<!-- CSS Articles

CSS Lists: Part 3 - Horizontal Lists

In this installment of CSS Lists, we'll go over the always-handy horizontal lists. It's recommended that you at least read CSS Lists: Part 1 so that you understand how to transform static lists into dynamic navigational components.
Horizontal lists differ from vertical lists in several ways, but in order to fully understand that, we need to understand how they're 'made horizontal'. Oddly enough, all you need to do is to set the display property value of the LI elements to inline. Well, that's not all you're going to want to do, but that's the crux of it.

Here's what I mean:

• List Item 1
• List Item 2
• List Item 3

That was a plain list. No properties were assigned to it. Now I'll add the following CSS:


After applying just that rule, here's the same list:


As was done in previous installments of CSS Lists, I'm wrapping the list with a DIV element, and styling it and its descendant elements. The HTML/XHTML I'm working with is:


The next thing to do is to remove the "vestigial" inherent list properties, which means removing the margin, padding, and list-style-type property values (by 'removing' I of course mean either resetting to 0 or none). While I'm doing that, I might as well set the font-family, font-size, and line-height property values:



The list now looks like one stack of inline elements, which, in a way, it is:



If you remember the sequence of steps from CSS Lists: Part 1, you know that I'll now start messing around with the A elements. However, one of the big differences between the lists I've demonstrated so far, and horizontal lists, is that horizontal lists don't have the same link width for each link. While this is a mixed blessing, it's more of an advantage than a disadvantage, since you waste less space on your page overall.

Starting with the basics:



Here's how the markup renders now:



What's unexpected, was that there would be any space between the list elements. Remember though, that they're inline elements now, which means that they'll act like ones, and treat white spaces, which include newlines, as, well, spaces... This requires a tweak to the markup:



If you've been around since the olden days of image stacking, you'll recognize this trick as "tag breaks" or "in-tag newlines". There was a need to remove the newlines between the LI tags, so the first thing you would think of doing is just placing them all in a row. This works, but makes for extremely un-maintainable markup, especially when you have 8 list items and 8 corresponding link URLs. However, neither HTML, nor XHTML, mind if there's a newline within a tag. This lets us close the ending LI tags the line after they open.

Here's the result of that tweak:



If you do want spaces between the list items, you'd usualy use the margin property instead of white-spaces. We're not barbarians, you know...
As well, I didn't find the room to comment about the usage of the padding property in the A element style rule until now. It's the usual 'top-clockwise' shorthand syntax, but unlike vertical arrays, I had to pad all sides. This is because, just like the LI elements, the A elements are also inline, which means that they'll take not a pixel more than they need to render (unlike block-level elements, which will take whatever horizontal space you give them). This meant that I needed to pad their right side by the same amount as I padded their left side (I say "need" loosely, since you can really do whatever you wish that suits your design).

Now to give them some hover reactions:



Nothing new here. I just gave the :hover state a slightly brighter color. I also added some borders to the links for spice. Here's how the list looks now:



Before I move on, I should mention this little neat feature: you can center the list by centering the text of the UL element. That is to say, by adding this:



This is the list you'll get:



Why would that happen? Well, now that every element that's a descendant of the UL element is inline, it'll be effected by the text-align property. And remember that this rule selects the UL element, not the DIV, so you can still throw things in there and have them unaffected by the centering.

If you consider the usage of horizontal links, they're often used to guide the visitor around the broad sections on the site. They also sometimes act as guides to where the visitor currently is. Look at the following style rule:


Now look at the following implementation:


And finally, how it looks in practice:



This can be a means of tagging the page the visitor is currently visiting. You're styling one specific LI element and adding, in this case, border properties to it. Note how much larger the top, and the bottom borders had to be made, however. This, again, relates to all of these elements being inline. The A elements, even though they were given border and padding to, one would think, 'inflate' the LI elements that wrap them, they did so only horizontally, not vertically. Thus, in order to see the vertical border applied to the LI elements, they have to surpass the A's element box. Once you've done that though, you're in the clear, this will render properly in Firefox, Internet Explorer versions 7 and 6, and Opera.

The subject of images in lists will likely be covered in the next installment. You'd be surprized in what ways lists can manipulate images, and do so with relatively few properties at that.