4.6 Navigation styling - Video Tutorials & Practice Problems

<v Instructor>All right.</v> As a final step, we're going to style these menu items. We're going to put them to the right side which is a more standard location for these kinds of navigation links. And we're gonna put an extra margin in between these guys here. You can see that they're space pretty closely but we're gonna put some extra space there. These are inside of a div. So let's take a look at that right at the top here's the div style equals text align. (keyboard typing) So this is a way to align it to the right. Let's take a look at that. All right, that's great. And then we want to have a left margin on the HTML tags link and the Moby Dick link so that this space here and this space here are a little bigger. We could use margin left for this but we'll use the four number convention like this, (keyboard typing) margin zero. This is his top, right, bottom, left. Oops, and it's on the wrong one. I put it on home. That's not what I want. I want it on this one here. And then the same one down here. There you have nice spacing. There's a problem though which you may already have thought of, which is that if I click on this, oops, now we've got the old menus. So what we have to do is take this and copy it and paste it in to these other two. This is cumbersome. It's error, prone. This is just not good. So this is the kind of thing that is solved by a template system that you get as part of the material covered in Learn Enough CSS and Layout to Be Dangerous. It's also covered in the Ruby on Rails tutorial. There we go. Great.