A vertical navigation bar part 3 - A Smarter Way To Learn HTML & CSS (2015)

A Smarter Way To Learn HTML & CSS(2015)

71
A vertical navigation bar

part 3

In the last chapter we styled the anchors. Now let’s give the div a blue background.

div#navbar {
background-color: blue;
}

We’ll make the anchors white so they show up on the blue background.

div#navbar ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1em;
font-weight: 900;
text-decoration: none;
color: white;
}

And we’ll style the div so it’s just wide enough to accommodate the list items, but no wider.

div#navbar {
clear: both;
background-color: blue;
display: inline-block;
}

inline-block tells the browser to shrink to fit.

Now we have…

The browser hasn’t forgotten that this is a list, so it has added padding on the left side to indent it. We don’t want it indented. So we specify zero left-side padding for the ul.

div#navbar ul {
list-style-type: none;
padding-left: 0;
}

That moves it flush-left.

Because an unordered list is a block element, the browser has added top and bottom margins. We’ll keep them. In your CSS file…

1. Make the navigation bar div a dark color.

2. Make the anchors a light color.

3. Shrink the navigation bar to fit.

4. Remove padding from the left side of the list.

5. Save the file. Display the page.

Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-71-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/71.html