Prev: IE7 on Windows Vista displays half-transparent area as opaque
Next: Photo Gallery: Ping Dorayme
From: shapper on 18 Mar 2010 23:02
On Mar 18, 11:45 pm, 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). 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?
>
> I think I mostly use floats for navigation strips. There are
> other advantages I think, but I can't say at this moment. I have
> to be *very quick* in these posts now because there are ears
> pointing at me.
>
> <http://dorayme.netweaver.com.au/alt/inlineVfloatLists.html>
>
> --
> dorayme

I am working on a design for a CMS:
I am using Float on the Menu and on Stats Bar:
http://www.flyondreams.net/flyonpages/

I think on stats I really need to use Float so I can setup the width
of each list item. Or not?

On your example you don't clear floats ... Or use overridden.
If I don't do this my design gets all broken.
Am I missing something?

Well, any suggestion to improve my layout is welcome.

Thank You,
Miguel
From: Ben C on 19 Mar 2010 04:15
On 2010-03-18, shapper <mdmoura(a)gmail.com> wrote:
> On Mar 18, 10:40�pm, 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.
>
> I am not sure about what you mean but my idea is:
>
> If LI contains a single Word (Or short line) then use inline.
> If the LI contains text for multiple lines that use Float.
>
> Not?

Yes, if you want multiple lines in each LI, you either need inline-block
or float.
From: Ben C on 19 Mar 2010 04:21
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 or even display:
inline as well as float: left.

> 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 04:22
On 2010-03-18, shapper <mdmoura(a)gmail.com> wrote:
> On Mar 18, 10:40�pm, 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.
>
> Or better:
> Float for LI with Fixed width.
> Inline for LI with variable width that adapts to content.

Floats will shrink to fit the content too. But if push comes to shove
and it doesn't all fit, then auto width floats will drop beneath each
other but the text inside them won't wrap.
From: dorayme on 19 Mar 2010 05:03
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.
>

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. 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). 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.

--
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