Start learning with our library of video tutorials taught by experts. Get started
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.
Floating menu items can cause two big problems, first, their parent elements can collapse and not contain the floated items inside, and second, floated items can disrupt the layout of elements that come after them in the source order. Now both of those issues can be handled by properly clearing the floats. So we are going to experiment a little bit with that in this exercise, and I have opened up the horizontal.htm from 04_03 directory. And there have been a couple of changes to this, so I want to scroll down into the code and show you what I am talking about.
I've added a nav selector, that's giving the navigation element the background of red, and then I took off the existing float from the ul, li, and I have also removed that one selector that was targeting the link. Just because I want to start fresh and show you guys really what goes on when you start floating some of these menu items. Now, if we preview this page, currently in the browser we are back to displaying vertically instead of horizontally, but you can see the red background of the parent nav element.
So remember, the nav element is wrapping all the way around the unordered list, and now we can see its background. Well, if I come in to my ul, li, and I add that float property again, so let's say I just add that, and I say float to the left so that I can display all of these links in horizontal fashion, If I save this, go back out to my browser, and refresh the page, they do display horizontally but the background color goes away. So what's going on there? Well, that's a feature called Containing Floats.
And the browser is actually doing exactly what it should do in this instance. Essentially, when you float an element, it kind of stay as a normal document flow, but it also kind of doesn't. What happens is, is it's going to float to the far left or to the far right based on which way you float it, and it's going to go all the way until it reaches some type of border, that could be its parent element, that could be all the way to the edge of the page, but the parent element is instructed to basically act like that element is no longer contained, meaning it's not inside of it anymore.
So the nav element is now just looking at itself as being empty, because the unordered list and all the individual list items both of those have been floated, so the nav element just sort of rolls up like a window shade. That's a problem with containing floats. So in order to contain those floated elements there are a couple different solutions for that. One would be to float the parent element itself. You will notice, for example, that both the ul and the li are being floated. There's no real reason to float the unordered list except for the fact that by floating it as well, the list items are contained now again within the unordered list, so if I were to put a background on the unordered list you'd see it.
By the same token, if I come up to the nav, and I just go, okay, I'm going to float you to the left as well. If I save that and preview it, the background comes back. But there is a problem with this. First off, you enter in the stage where you start having to float all these different elements all the way up to chain just to get a background to appear, for example. That's bad news, because in a lot of cases this could break other things that come after it in the layout, and since most of your menus are up top, that's a really big problem.
You notice the other thing that happens is when you float an element it kind of shrink wraps it to its content. So now that background, instead of stretching all the way across the page--which is maybe what we wanted--it now shrink-wraps to the things that are inside of it, both of those are problematic. Well, another way to clear floats is if you have anything inside that element that comes after the last floated element. Let me show you what I mean. So we have got the nav element, and then we have got the nested unordered list.
If there was something else in here, let's say even a line break and on this one particular element I'd applied a clear property which would clear the float, that reestablishes normal document flow, and all of a sudden the nav has to come down and contain that element which causes it to contain the floats as well. That technique has been around for a very long time, and that lead to a lot of people throwing in a lot of non-semantic markup, like line breaks just like I showed you. They would do that all the time and put class of clear: left or clear: right or clear: both on it, and that would help contain the floats.
Some very smart people started to put their heads together and they came up with more efficient ways to do that. And my favorite out of all those ways is what's known as the micro-clearfix, and this is written by Nicholas Gallagher. You can read more about it at the URL that I have here on the page. Essentially, what this does is it generates a little bit of content before and after the parent element's content. It puts in sort of an empty space, sets its display to table, and then it clears both of them. So essentially, what that does is it forces any containing element with this class applied to it to contain any floats inside of it.
That's a brilliant piece of code, all you've got to do is copy and paste that into your files from here on out. You are good to go. Anytime you need to contain a float, you just apply that .cf class to it. And to kind of show you that, I am going to take off the float property on the nav here. Save that, and then I am going to go back down into my code. I am going to find that nav element, and then I am just going to apply that class. I am going to say class="cf". Save that, go back into my browser, refresh. Now, not only does it contain the floats, but it still acts as a normal block-level element.
It's just going to go ahead and expand to fill its parent element as well. So I am a huge fan of that clearfix technique. Hopefully you guys have worked with the float property for a while. Having a thorough understanding of how floats work and how to contain and properly clear them is crucial to using the floating technique when you are creating your horizontal menu. So if you haven't used float for a while, be sure to research the float property and experiment with it as often as you can so that you can deepen your understanding of exactly how floats work.
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.