Question

I’m trying to put together a navigation bar using a table:

• There are n links to different parts of the website
• There is one “logout” link, which is an icon of fixed size

What I’d like to do is the following. The available width for the whole bar (which is known in advance) minus the required width of the icon should be divided equally among the cells containing the n links for navigation (ignoring the size of the links inside, this is not a problem).

Currently, I’m performing this computation in PHP and use to achieve this. However, this does not comply with the XHTML 1.0 Strict standards. According to the W3C validator, I should use CSS to set the width of the column. Problem is: I don’t know how to do this, and if it is at all possible. Probably this problem is a hint that I shouldn’t be using tables for this, but I have no other ideas at the time.

How can I achieve the effect, using tables or something else, in an XHTML Strict and CSS compliant way?

Answer 1

The easiest way would be to put the links into little boxes (all the same size). Since CSS has no way to make calculations, you must still set the width of the boxes but by using CSS, you can do this once. Use DIV for the boxes. The class for the boxes must say display: inline; so they behave like words in text (the browser will place them next to each other on a line).

After that, you just calculate the width per box in PHP and send this width in a little piece of inline CSS in the header of the HTML page. That way, all boxes will have the same width and they will all be in the same line.

For an example how to create a navigation bar with CSS, look at the source code of the page you’re reading just now.