HTML/CSS: Navigation: All Your Cookies In A Row

Last week, we discussed the super-cool wp_list_pages($args) function, and how it can make creating your navigation on your website super easy. If you want your navigation in your sidebar, for example, or anywhere else as a vertical list, then this already works perfectly. But what if you want it as a part of your header, like we do, in a horizontal list? Don’t worry, CSS is here to the rescue!

display: inline

First things first, you need a way to identify your list. While you want your navigation list to have a certain style, you’re most likely not going to want every single list on your website to have that same style. It’d be a bit weird to have horizontal lists when you want to list something in a blog post, don’t you think? So we surround the list with a <div> element, and put an id on that <div>. Let’s call it “navigation”. (Remember that we use <div>s – not tables! – to divide up the sections of our page. The navigation is just one little section of the page… and we did the same for the header, so you have a larger <div> that encompasses your navigation, and everything else in the header, as well.)

Now that we have a way to identify our navigation list, we can use CSS to make it look exactly how we want it to.

So in order to make our navigation horizontal, all we have to do is add this attribute to the element in the CSS: display: inline; That will make the list show up all in a line, rather than each above the next. But where do we put it?

Cookie Crumbs

Should we put it on the #navigation? Nope. You see, it means nothing to tell your <div> (which is the element that the #navigation id is on) to display inline. Because a <div> doesn’t have anything that it can display inline. It’s just a way to divvy up our page, after all.

No… we have to look inside the <div>. So what’s next? Our <ul> element. Is that where we want to put the display: inline;? Again, no. That would just tell the list as a whole to display in a line, which does just about as much good as telling the <div> to do that. In other words, it doesn’t do a thing for us. What we really want is to tell each of the items in a list to display in a line, right?

So… you guessed it, we want to put the display: inline; attribute on the <li> elements! We’ve got a bunch of them, and we want them to all stand nicely in a line, not piling on top of one another’s head like we normally would.

But there’s no id or class on the <li> elements in our code. How on earth are we supposed to do anything in CSS without them? It’s easier than you think, I promise. All you have to do is this: #navigation ul li { display: inline; } It’s like a path of cookie crumbs… from your id or class, you just step in through the levels until you get to the element that you want to style.

That’s all you have to do to get a horizontal navigation. Easy as can be.

Party Time!

There’s so much more I can teach you, just about navigation alone! But… well… I’m supposed to be on vacation… (innocent look)… so as much fun as it is to talk about code, we really should be partying, right?

So instead I’ll just break out the sunscreen and leis, and save the rest of all that I’d love to tell you about navigation until next week!