CSS horizontal navigation bar spacing question

February 13, 2005 10:34 PM

Can CSS be used to transform an unordered list of links into a horizontal navigation bar which occupies a fixed (total) width but has equidistant padding between each link, regardless of content length? ( css layout tooth-grinding insanity )

Semantically, a navigation bar is a list of links and should therefore be rendered using <ul>. As such, I am attempting to produce an unordered list that occupies a fixed width (i.e. 450px) but want the padding between each list item to be equal. The padding also needs to be variable, because the text of each link might change, so fixed-width <li>s will not suffice.



Figure 01, List of links sans padding




Figure 02, List of links with equidistant padding x


Any ideas how this might be accomplished? The most irritating part is that I can achieve the desired effect in two minutes using a table.

posted by Danelope to computers & internet (9 comments total)

Does this do it for you?
posted by willnot at 10:40 PM on February 13, 2005

Does this do it for you?

Nope, because the padding between each piece of text in that sample isn't equal. Only the size of the list items themselves. Hence my quandary.
posted by Danelope at 10:49 PM on February 13, 2005

Solution 1 on that page is for fixed padding. In fact the only one where the padding isn't fixed is solution 2. Maybe I don't understand what you're looking for.
posted by willnot at 11:47 PM on February 13, 2005

Danelope wants the items spread across the width of the UL like in 2. on that page, but with equal distances between the ends of the items rather than between their centers.

Danelope, I hate to say it, but how about something like:

ul.navbar { display: table; width: 450px; }
ul.navbar li { display: table-cell; padding-right: 20px; }
ul.navbar li.lastitem { padding-right: 0 }

and then add whatever you would do to make it work with an HTML table? Or does your table trick involve empty cells and GIF spacers and such?
posted by nicwolff at 12:13 AM on February 14, 2005

What I'm looking for:

1. The entire list remains a fixed width.
2. The margins between each list item are variable, expanding to use any space not consumed by the text itself.
3. The margins between each list item are always equal.
posted by Danelope at 12:14 AM on February 14, 2005

Here's the table I use, which invokes the typical amount of table-based layout kludgery:

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

  <td nowrap width="1%">Link 1</td>

  <td width="32%"><br/></td>

  <td nowrap width="1%">Link Number 2</td>

  <td width="32%"><br/></td>

  <td nowrap width="1%">Link Three</td>

  <td width="32%"><br/></td>

  <td nowrap width="1%">Link No. 4</td>

</tr>

</table>

posted by Danelope at 12:20 AM on February 14, 2005

Just for clarification, this is for a fluid/dynamic width page? Or, alternately, this is code that could be re-used on multiple pages regardless of width, and regardless of the length of the navigation items?

I'm assuming yes, but just wanted to check.

(And, as of right now, I don't have an answer. But I'll keep thinking.)
posted by Alt F4 at 4:07 AM on February 14, 2005

I'm sure some of the horizontal list examples on Listamatic would have sample code to make this work. Word of caution though, some of their examples are not 100% supported on all browsers, so they have added browser support section.

There are a few examples that use the full width of the page and seem to offer what you are looking for (there is more than what I linked).
posted by purephase at 4:56 AM on February 14, 2005

The only CSS solution I know for this is using CSS Expressions, supported by IE and FireFox I think, which would let you examine the DOM to see how much space was left over between your rendered list with no padding and its full-wdth container element. You then divide the difference by the number of elements -1 (if you don't want padding on the outside) or elements +1 (if you do want padding on outside), and that should give you what you want.

Another technique is to render your list in a hidden container element (such as DIV), and then with client-side javascript measure the width of the container to figure out how much space the text is using. Then with that info you are equipped to size the spacers in your menu's container element accordingly.
posted by SNACKeR at 6:09 AM on February 14, 2005