A Smarter Way To Learn HTML & CSS(2015)

73
A vertical navigation bar

part 5

The vertical navigation bar we created in the last chapter is functional, but doesn’t look that great. Let’s dress it up a little.

Instead of a list of links against a blue background, we’re going to have five separate blue blocks. Each block is a navigation choice.

We remove the blue background from the div, since we’re going to color the li elements individually.

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

The styling for the unordered list is unchanged…

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

We’re going to color each li element separately, so we write...

div#navbar ul li {
background-color: blue;
padding: 0 1em .3em 1em;
}

We’re going to stretch out the blue li elements by padding the a elements inside them, so we no longer need padding on the li elements.

div#navbar ul li {
background-color: blue;
padding: 0 1em .3em 1em;
}

To enlarge the blue background of the li elements, we declare each a element a block and pad it out.

div#navbar ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 3em;
font-weight: 900;
text-decoration: none;
color: white;
display: block;
padding: .35em;
}

All these changes produce this.

Separate the list items with a little bit of bottom margin…

div#navbar ul li {
background-color: blue;
margin: 0 0 .25em 0;
}

And there you have it:

Revise your CSS file to style the navbar like the one shown above. Save the file. Display the page. (Code the li bottom margin as above, specifying 0 for the other three sides, to override a general margin specification for li elements that you coded earlier.)

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

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

All materials on the site are licensed Creative Commons Attribution-Sharealike 3.0 Unported CC BY-SA 3.0 & GNU Free Documentation License (GFDL)

If you are the copyright holder of any material contained on our site and intend to remove it, please contact our site administrator for approval.

© 2016-2026 All site design rights belong to S.Y.A.