Prev: IE7 on Windows Vista displays half-transparent area as opaque
Next: Photo Gallery: Ping Dorayme
From: Thomas 'PointedEars' Lahn on 19 Mar 2010 06:18
shapper wrote:

> I am creating an horizontal menu using a unordered list:
>
> <ul class="Menu">
> <li>Item 1</li>
> <li>Item 2</li>
> </ul>
>
> What is the best way to make it horizontal?
> Use "display:inline" or "float:left"?

li { display:block; float:left}, because it is the only way to be sure about
the distance between the items. A bonus is that the list wraps to the next
line if an item does not fit the containing block (e.g., with greater font
size).


PointedEars
From: shapper on 19 Mar 2010 07:30
On Mar 19, 8:21 am, Ben C <spams...(a)spam.eggs> wrote:
> On 2010-03-18, dorayme <dora...(a)optusnet.com.au> wrote:
>
>
>
> > In article <slrnhq5ars.42u.spams...(a)bowser.marioworld>,
> >  Ben C <spams...(a)spam.eggs> wrote:
>
> >> On 2010-03-18, shapper <mdmo...(a)gmail.com> wrote:
> >> > Hello,
>
> >> > I am creating an horizontal menu using a unordered list:
>
> >> ><ul class="Menu">
> >> >  <li>Item 1</li>
> >> >  <li>Item 2</li>
> >> ></ul>
>
> >> > What is the best way to make it horizontal?
> >> > Use "display:inline" or "float:left"?
>
> >> Depends what you want, but usually floats. If they're all the same
> >> height, and you want to set the height on them, floats are easier.
>
> >> If you want them to be subject to the world's most complicated and
> >> widely misunderstood vertical alignment model, display: inline is
> >> better.
>
> > Perhaps one advantage is that in the inline way you don't have to
> > worry about excluding the nuisance list item bullets (which can
> > cause havoc unless careful with floats).
>
> Easy to get rid of though, with list-style-type: none or even display:
> inline as well as float: left.

There is such example here:
http://css.maxdesign.com.au/listamatic/horizontal03.htm

But the display: inline is applied to the LI and the float to a child
A.

>
> > Another could be seen as either an advantage or disadvantage, to wit:
> > in the inline way, a list item text will wrap (if it is a link, it
> > will be clickable both before and after the wrap. This is either a
> > further sub-advantage or sub-disadvantage!). In the float way,
> > internal text wrap will not happen. Perhaps it could be said that
> > internal list item text wrapping is more in the spirit of fluid
> > design?
>
> The text in floats will wrap if you set the width on them. This is
> another (dis)advantage-- you can't set width on inlines.

From: Ben C on 19 Mar 2010 13:22
On 2010-03-19, dorayme <dorayme(a)optusnet.com.au> wrote:
> In article <slrnhq6csj.3u8.spamspam(a)bowser.marioworld>,
> Ben C <spamspam(a)spam.eggs> wrote:
>
>> On 2010-03-18, dorayme <dorayme(a)optusnet.com.au> wrote:
>> > In article <slrnhq5ars.42u.spamspam(a)bowser.marioworld>,
>> > Ben C <spamspam(a)spam.eggs> wrote:
>> >
>> >> On 2010-03-18, shapper <mdmoura(a)gmail.com> wrote:
>> >> > Hello,
>> >> >
>> >> > I am creating an horizontal menu using a unordered list:
>> >> >
>> >> ><ul class="Menu">
>> >> > <li>Item 1</li>
>> >> > <li>Item 2</li>
>> >> ></ul>
>> >> >
>> >> > What is the best way to make it horizontal?
>> >> > Use "display:inline" or "float:left"?
>> >>
>> >> Depends what you want, but usually floats. If they're all the same
>> >> height, and you want to set the height on them, floats are easier.
>> >>
>> >> If you want them to be subject to the world's most complicated and
>> >> widely misunderstood vertical alignment model, display: inline is
>> >> better.
>> >
>> >
>> > Perhaps one advantage is that in the inline way you don't have to
>> > worry about excluding the nuisance list item bullets (which can
>> > cause havoc unless careful with floats).
>>
>> Easy to get rid of though, with list-style-type: none
>
> As I did in the URL I gave
>
>> or even display:
>> inline as well as float: left.

I used to see it quite a lot and wondered if the reason was because
list-style-type: none didn't work in some version or other of IE.

> This never occurred to me. Not sure I like it (might be easy to
> forget what this is about later!) but I might need to think about
> it.
>
>> > Another could be seen as either an advantage or disadvantage, to wit:
>> > in the inline way, a list item text will wrap (if it is a link, it
>> > will be clickable both before and after the wrap. This is either a
>> > further sub-advantage or sub-disadvantage!). In the float way,
>> > internal text wrap will not happen. Perhaps it could be said that
>> > internal list item text wrapping is more in the spirit of fluid
>> > design?
>>
>> The text in floats will wrap if you set the width on them. This is
>> another (dis)advantage-- you can't set width on inlines.
>
> Not sure you caught my meaning? In
>
><http://dorayme.netweaver.com.au/alt/inlineVfloatLists.html>
>
> I was talking the text wrapping with respect to the whole list
> not within the list item.

OK, but it is also wrapping within the list item.

> In a float, it is probably better to take advantage of the shrink to
> fit property and let the text be on one line naturally (best for
> navigation strips I reckon).

Yes although sometimes people want the items all the same width. In that
case, you can use floats and set widths on them. If necessary, text will
wrap inside the floats.

> To see what I mean, narrow the browser width and see how the two lists
> differ in respect to wrapping. I find it quite good that the inline
> list one wraps the way it does, no height.

It's quite good, but on another day another person might not like it
because it's not the effect they're trying to achieve.
From: Ben C on 19 Mar 2010 13:24
On 2010-03-19, Thomas 'PointedEars' Lahn <PointedEars(a)web.de> wrote:
> shapper wrote:
>
>> I am creating an horizontal menu using a unordered list:
>>
>> <ul class="Menu">
>> <li>Item 1</li>
>> <li>Item 2</li>
>> </ul>
>>
>> What is the best way to make it horizontal?
>> Use "display:inline" or "float:left"?
>
> li { display:block; float:left}, because it is the only way to be sure about
> the distance between the items.

I don't see why. You can just as well put left or right padding or
margins on inline boxes to separate them. The gaps will be exactly the
same as if you'd used floats.

Why display: block? To get rid of the bullets? You can use the more
perspicuous list-style-type: none instead.

> A bonus is that the list wraps to the next line if an item does not
> fit the containing block (e.g., with greater font size).

Inlines do that too.
From: dorayme on 19 Mar 2010 14:02
In article <slrnhq7cio.512.spamspam(a)bowser.marioworld>,
Ben C <spamspam(a)spam.eggs> wrote:

> On 2010-03-19, dorayme <dorayme(a)optusnet.com.au> wrote:
....
> > Not sure you caught my meaning? In
> >
> ><http://dorayme.netweaver.com.au/alt/inlineVfloatLists.html>
> >
> > I was talking the text wrapping with respect to the whole list
> > not within the list item.
>
> OK, but it is also wrapping within the list item.
>

In the above URL, in the li as float, the whole li wraps. With
inline, the text inside the li wraps causing the li itself to
split. I am thinking this could be an attractive feature...


> > In a float, it is probably better to take advantage of the shrink to
> > fit property and let the text be on one line naturally (best for
> > navigation strips I reckon).
>
> Yes although sometimes people want the items all the same width. In that
> case, you can use floats and set widths on them. If necessary, text will
> wrap inside the floats.
>
> > To see what I mean, narrow the browser width and see how the two lists
> > differ in respect to wrapping. I find it quite good that the inline
> > list one wraps the way it does, no height.
>
> It's quite good, but on another day another person might not like it
> because it's not the effect they're trying to achieve.

Quite so. I think there is no one answer to which to use, inline
or float. I am just being more impressed with the simplicity of
inline. It is a *natural* way to go with the flow. Honestly, I
think Bill (William of Ockham) would be happier.

--
dorayme
First  |  Prev  |  Next  |  Last
Pages: 1 2 3 4 5
Prev: IE7 on Windows Vista displays half-transparent area as opaque
Next: Photo Gallery: Ping Dorayme