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.
Okay, our menu is looking pretty good, but right now, there is just no visual separation between the links themselves. If I come up to the menu, and I kind of hover over these links, sometimes it's not quite obvious which one I'm hovering over because there's just no separation between them. So in this exercise, we're going to take a look at one of the ways that we can add some visual separation. So, I'm going to go back in my code editor, and I'm working with the vertical.htm file found in the 03_05 directory. And you can see once again I've sort of scrolled down to our vertical menu styles.
We're going to continue working with the same selector, which is the one that's targeting the links inside of the list items, the li a selector. I'm just going to go down to the bottom of this. And I'm sure some of you guys have already sort of figured out that if you want the separation between elements, margins would be a good place to start. You're right, margins would work great. The same way that padding adds a little bit of interior space to our menu items, margins will allow us to sort of space them apart. Now, when I think about how I want them spaced apart, I really just need to push them down away from each other a little bit just to leave a little bit of space.
So, instead of putting a margin all the way around the links, which would be kind of bad idea, I'm just going to focus on applying it to the bottom. So, I'm going to do a margin-bottom. And we don't need a lot of it. As a matter of fact, I'm just going to echo what we did with our padding above it, and I'll just do 0.2 ems. I'm going to go ahead and save that, go back out to my browser, refresh the page, and there you go. Now we've got some vertical separation. So that is perfect. So now, as I mouse over the different menu items, I know exactly which one I'm going to be clicking on, which of course is a very important part of any user experience when you're dealing with menus.
Now, using margins like this to control link spacing does make sense. I want to point out that it's really not always the right choice. Currently, the colors that we're getting as the visual separator between these links is coming from the page itself. So, we're just sort of seeing through, if you will. Now, you could have applied a background color to the parent unordered list or even the list item elements and that could shine through. But unless you've done that, the background of the page or the region that the menu is in is going to show through the links. And often that's not the best choice. You might have a background color of the page that just doesn't work or maybe even you're looking at an image back there.
So in those cases, you're going to want to use some type of an alternate method of visually separating those links. We're going to go ahead and explore one of those methods in our next exercise as we replace the margins that we're using here by adding some borders to our menu styling.
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.