Archives for Saturday, November 3rd, 2007
You are currently browsing 2 article(s) published on Saturday, November 3rd, 2007, please try the search if you can't fint what you're looking for.
Using display: table to Create Full Width Navigations
Saturday, November 03, 2007
Sometimes you need a navigation to span the entire width of its parent:
Because all types of navigations are nothing but lists of links they should always be marked up with the unordered list element (ul) with each navigation-item in its own li-element.
A very common way to display the list of links horizontally is to float each li-element to the left which will make them all appear on one row, but the total width of a row of floated elements is determined by the elements' margin, padding, border and contents so you have no real control over the width of your navigation-bar (unless, of course, you set a fixed width to each li).
Using the CSS display-property together with its table, table-row and table-cell values you can make an unordered list behave like a table and easily make the navigation-items take up the full width of your site.
- Continued...
- Comments are off
- Filed under (X)HTML, CSS, Semantics
