Web Design with HTML and CSS

Working with CSS background images

Lesson 8, Advanced CSS Layout 189

6 Locate the rules you have been working with and modify them as follows (highlighted
in red):
body#home .nav-home, body#aboutus .nav-about, body#contact
.nav-contact {
background-color:#29336B;
color:#F8F068;
}

Choose File > Save and preview the page in your browser. The Contact link is now
active. Click the About Us and Home links to activate them.

In the On Your Own section, you will repeat these steps for the Recipes, Submit a
Recipe, and Forum pages.

Adding images to your sidebar

In the Home page, add two images to the sidebar and one to the main section, as
instructed below.

1 Open your 08_layoutwork.html page. In your HTML, locate the sidebar div, and
below the heading 3 code, add the following (highlighted in red):

The Funky Orange

alt="FunkyOrange Smoothie" />

2 Add another image further down in the sidebar as follows (highlighted in red):

<h3>The Tropical KickBack</h3>

<p><img src="images/TropicalKickback.png" alt="" width="235"

height="130" /></p>

Note that these images have been sized to the same dimensions of 235 pixels wide by
130 pixels high. These images are located in your images folder so they will be correctly
linked, but ensure you type the fi le name correctly so the links to the images are not broken.

3 Save the fi le and then preview it in your browser. The two images you added are inside
the sidebar. You’ll now use a more advanced technique to add another image into the
main area.