Sent by Jukka K. Korpela on 16 August 2004 21:09
On Mon, 16 Aug 2004, Danie Roux wrote:
> After spending two days discovering the wonders of CSS positioning from a
> few great resources, only one part of my original layout remains for
> conversion:
>
> <table width="100%">
> <tr>
> <td><a href="http://somelink.com">First Link</a></td>
> <td><a href="http://somelink.com">Second Link</a></td>
> <td><a href="http://somelink.com">Third Link</a></td>
> <td><a href="http://somelink.com">Fourth Link</a></td>
> <td><a href="http://somelink.com">Fifth Link</a></td>
> </tr>
> </table>
I'm not sure it needs to be converted. You might use CSS for styling the
table of course. But if a table does best what you want, why not use it,
when your material (items treated as a collection, links in this case) is
tabular, even if it is a trivial table (which _can_ also be marked up as a
list)?
> The question is: How can I equally space out the links across the whole of
> the screen using CSS?
Presumably this implies <ul> markup for the collection of links.
> 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.
(I suppose this relates to having _four_ links, not five as in your
example.)
On my IE 6, setting it to 25% makes it wrap for some canvas widths and not
for others. Even a Reload may change this. I guess the problem is related
to inadequate handling of rounding errors in browsers. As a practical
move, which is a bit ridiculous but seems to work, you could set
width: 24.9%. This seems to avoid wrapping, and the deviation from the
full width of the available area is probably too small for most people to
notice.
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
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/
