Viewers: in countries Watching now:
Join James Williamson, as he shows you how to create elegant menus, links, and buttons that help visitors navigate your site faster and more intuitively. The course covers creating structured navigation that is accessible and clean, styling links, and building horizontal and vertical menus with rollover effects. The last chapter reveals how to create stylish buttons with special effects and CSS sprites.
In this exercise, we are going to focus on displaying our links horizontally. Now since there are multiple ways to build a horizontal menu, I am going to demo a couple of techniques that allow us to do that, talk about some of the issues surrounding them, and then discuss what my preferred technique is. To do that, I'm working on the horizontal.htm file, this time from the 04_02 directory, but we're just sort of picking up right where we left off. Again, first order of business is to get those links displaying horizontally rather than vertically, which is the default.
Now the key to this is the list item element itself, list items by default are displayed in browsers as block-level elements. Now what that means is that these elements are stacked one on top of another which is why they're displayed vertically. In order to get them to display horizontally we need to sort of change that someway. So the first technique I am going to show you guys is to change the display property. So just below the existing selector here I am just going to do a selector that targets the list item, so the li. And I am going to go up, and I am going to change the li to display: inline, rather than having the browser display it as a block- level element, I'm telling the browser that from now on for these particular list items it needs to display them as inline level elements.
Let's take a look at that in the browser and see the result. Now, rather than stacking one on top of each other, because these are inline level elements, they are displaying all on one single line and they will keep doing that for as long as they have room. Problem solved, right? Well, there are always problems regardless of the technique that you are using, and I want to show you what the problems are here when we start using inline level list items. I have clicked on the page. I am just going to start tabbing through these links. As I tab to the links, notice how the links are highlighting. The only active area of the link is of course shrink-wrapped right to the content.
Now we are used to that, right? In the past, when we were creating our vertical menus, one of the first things that we did was take our anchor elements and change their display to block. And that's going to be the instinctive reaction as to what the next step would be here. Let me show you what happens when you do that. If I go down into my styles and create another selector, that's going to target the links inside that list. Let's just say I change the display to block and then give it a width and height, so you can make sure you can see it. We'll do a height of 50 pixels as well.
I am going to do a background color of red. This would be a normal step. Now I have got them all displayed horizontally. I will display the links as block-level elements so that I can start controlling width, height, padding, margin, and things like that. All right, so let's see what happens. I am going to refresh my page. We just told the browser that the links themselves should display as block-level elements. What do block-level elements do? They stack one on top of the other, and so because of that, even though we have displayed the list items as inline level element, now all of a sudden, the links are going right back to displaying as block-level elements.
If we want to control those things like padding and margins and things like that within our links, they need to actually display as block-level elements. So are we sunk? Well, we are not necessarily sunk. If I come back into my list items, and I change their display to what's known as inline-block, I save that and refresh, you can see that now they stack right back on top of each other. So what in the world is going on there? Well, inline-block is a display property that not a lot of people use, but it's very, very handy.
Essentially, what it does is it tells the browser that I want this particular element to display as an inline level element, but I want to be allowed to set block-level properties on it like margins and padding and things like that. So now the block-level elements are sitting inside of them the same way they would if the list items were still block-levels. I know it's hard to wrap your head around that. Just trust me that this works. You could have also gone in and applied the inline-block to the anchor elements as well, and that would have worked.
The only problem with this particular technique in using inline-block is that on older versions of Internet Explorer, inline-block is only allowed on elements that should display as inline as default. So there are a lot of things that you need to think about there. This is one way to tackle that particular technique. And as you're probably guessing, it's not my favorite. Let me show you what my favorite technique would be. What I am going to do is I am just going to get rid of this list item selector altogether, and I am going to go back up to my ul, li, and just underneath list-style I am going to go ahead and add float of left.
This time, instead of using display: inline to display the links horizontally, I'm floating them to the left. Now if I save this and go back and preview this in my browser, I can see that now all the links are still displaying horizontally. I don't have any spacing between them now, and that's because I don't have any default margins or padding between them. But they're all displaying exactly the way I want them to in terms of being horizontal to that. That doesn't mean that floats are without problems, containing floats is difficult often the parent container elements will collapse on themselves. We are going to take a look at how to deal with that in just a little bit.
And floating elements can often sort of mess up the layout and comes after them, so a lot of times you have to clear those floats as well. So both of these techniques can have their pros and cons. The way I look at it is like this. Display: inline is perfect if you don't really need to control the exact width, height, and box model properties of the links inside the horizontal menu. If that's the case, display: inline works fantastic. On the other hand, if you do need that control, then the float method is probably the better method to use, but just be aware that you have to deal with some of the peculiarities of the float method as well.
There you have it. Those are two techniques that give you almost exactly the same results. My personal preference is floating my horizontal menu elements as opposed to using the inline methods. And that's simply because I really like to have more control over the formatting of the individual link items. Knowing how both of these methods work is really important so that you can use your own judgment about which one that you prefer and which one is right for a given situation.
There are currently no FAQs about CSS: Styling Navigation.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.