Re: [WSG] horizontal floated lists
Most of the time I display: inline the li's in a horizontal menu. -- Cameron W: www.themaninblue.com __ Do you Yahoo!? Yahoo! Mail SpamGuard - Read only the mail you want. http://antispam.yahoo.com/tools * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] horizontal floated lists
Hi Cameron- Setting a list item to display inline can possibly cause some problems with breaking items over a line. Using floats can help push longer list items to the next line (if the containing block width is less than the sum of the list item widths) and retain the general structure of the item navigation. Floated list items can also have block level elements in them (eg an anchor set as a block), whereas HTML4 states that inline elements cannot have block level elements in them. http://www.w3.org/TR/CSS2/visuren.html#inline-formatting http://www.w3.org/TR/CSS2/generate.html#lists http://www.w3.org/TR/html401/struct/global.html#h-7.5.3 Inline elements can have uses in making various bits and bobs horizontal - but according to the rec they are more for inline visual formatting. e.g pWeb emStandards/em Group/p than for pushing blocks around a page. Cheers James Cameron Adams wrote: Most of the time I display: inline the li's in a horizontal menu. -- Cameron W: www.themaninblue.com __ Do you Yahoo!? Yahoo! Mail SpamGuard - Read only the mail you want. http://antispam.yahoo.com/tools * The discussion list for http://webstandardsgroup.org/ * * The discussion list for http://webstandardsgroup.org/ *
[WSG] horizontal floated lists
Hi all
Came across this a while back and thought I´d share it, some have
probably already done it...
When making a horizontal list the general way to do this is with list
elements floated, left or right:
ul
liitem0/li
liitem1/li
liitem2/li
liitem3/li
liitem4/li
/ul
/* css */
ul li
{
float : left;
}
If you want to use the ul as a background filler its' pretty difficult
as the floats will cause it to resize to about 1 pixel. The solution is
to tack another list element onto the end and set its float to none:
ul
liitem0/li
liitem1/li
liitem2/li
liitem3/li
liitem4/li
li class=¨filler¨nbsp;/li
/ul
/* css */
ul li
{
float : left;
}
ul li.filler
{
float : none;
}
This works quite well and will cause the ul to resize to the height of
the list item contents, although there is an empty list element that may
cause some problems with unstyled pages.
Cheers
James
*
The discussion list for http://webstandardsgroup.org/
*
