Web Design with HTML and CSS

Working with CSS background images

Lesson 8, Advanced CSS Layout 185

Move the mouse cursor over your links to see the eff ect. The behavior appears odd

because the background color is defi ned by the size of the text. Fill the entire block with

color, as instructed in the next step.

5 In your text editor, add the following property (highlighted in red) to your
#mainnav ul li a rule:
#mainnav ul li a {
color:#ffffff;
text-decoration:none;
display:block;
}

This property and value override the default inline value of links in the mainnav so the

entire block expands. Save your fi le and check the menu in your browser.

Setting the hyperlink element to display as a block element forces it to fi ll the menu area.

Return to your text editor. You will now set a style that defi nes the appearance of the

menu when a user is on a specifi c page; this will help him identify which page he is on.

6 In your HTML, locate the code for the mainnav list. Add the following class names

(highlighted in red) to each list item:

<ul>

<li><a class="nav-home" href="index.html">Home</a></li>

<li><a class="nav-about" href="about.html">About Us</a></li>

<li><a class="nav-recipe" href="recipes.html">Recipes</a></li>

<li><a class="nav-submitrecipes" href="submitrecipe.html">Submit

a Recipe</a></li>

<li><a class="nav-forum" href="forum.html">Forum</a></li>

<li><a class="nav-contact" href="contact.html">Contact Us</a>

</li>

</ul>

The purpose of assigning a unique class to each list item is to target the list items with

a style. You must also fi nd a way to identify the page the user is on. You can do this by

creating a unique ID style for each page.