Web Design with HTML and CSS

Working with CSS background images

Lesson 8, Advanced CSS Layout 183

Enhancing your CSS navigation bar

Now you’ll make your navigation bar more aesthetically pleasing. Currently, it uses the
positioning and colors you added in Lesson 7 to understand how fl oats work. You’ll now use
CSS to add styling and interactivity. To review how the menu works, modify some of the
properties to create a navigation menu better suited for the style of your page, as indicated in
the following steps.

1 In your 08_layoutwork.html internal style sheet, locate the #mainnav rule. This rule sets
the height of the div to 40 pixels and gives it a pale-green background color. Below this
rule is the #mainnav li rule, which is fl oating the list items to the left as well as setting
styles such as width, height, background color, and more.

Preview the page in your browser to see how the navigation bar is currently styled. The
list items (with a background color of grey) are not the same height as the #mainnav
div, which is why there is a gap. You’ll fi x this now.

Your list items are not the same height as the surrounding navigation section; this accounts for the visual gap.

2 Return to your text editor. To make the list fi t into the mainnav, both elements need to
be the same height. Make the following changes to your rules (highlighted in red).
#mainnav {
background-color:#60668B;
height:35px;
}
#mainnav li {
fl oat:left;
width:120px;
height:35px;
background-color:#7D83A4;
text-align:center;
border-left:1px black solid;
border-right:1px black solid;
line-height:35px;
}