Sent by Richard York on 16 August 2004 18:06
Danie Roux wrote:
> Hi all,
> The question is: How can I equally space out the links across the whole of
> the screen using CSS?
>
> Using "list-style-type: none; display: inline; float: left width: 24%"
> with a <ul> it almost works. But it doesn't fill it to the very end of the
> page. Specifying 25% makes it wrap.
You mean 20% right? :-) I came up with this:
http://www.smilingsouls.net/CSS/liquid_links.html
IE bugs out on this one. I guess it doesn't understand that 20% x 5 = 100%.
If you give IE a width of 19.9% for the <li> elements it works alright,
in fact the slightly smaller percentage is barely noticeable. It is
noticeable, OTOH in Opera, so only IE should be given that length. OTOH
still IE 5.5 gets it right, so I would go for a conditional comments
style sheet to supply the 19.9% width only to IE 6.
Here I make the <a> element a block element, and add any border, padding
and margins to that, otherwise if these are added to the <li> elements,
those lengths are added to the percentage length and you end up with > 100%.
Also, for this to work correctly default margin/padding must be removed
from the <ul> element.
HTH!
--
Richard York
------------------------------------------------------------------------
[richy[<@>]smilingsouls[<@>]net] :: [http://www.smilingsouls.net]
[http://pear.php.net/Mail_IMAP] A PHP/C-Client/PEAR solution for webmail
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
