HTML and CSS Reference
In-Depth Information
Figure 7-3b on page HTML 332 shows the two list items: Waterfall Exploring and
Whale Watching. Notice the white background color on the submenu, which differs
from the dark background color used on the navigation bar. Using CSS to apply the
background colors gives the appearance of a menu and submenu system. You could use
graphical images here as well. For instance, you could create a navigation bar using
button images to give this same menu and submenu effect.
The embedded style sheet code below sets the font-family throughout the Web
page by use of the body element (Line 12). Line 14 sets the link color and turns text-
decoration (i.e., underline) off. (Line 13 is intentionally left blank.)
12 body {font-family: Verdana, Arial; background-color: #303032;}
13
14 a {text-decoration: none; color: #303032;}
It may help for you to compare the uses of these menu styles to the section of
HTML code (below) provided in the jaredadam.html file (Figure 7-4 on the previous
page), together with viewing the resulting Web page (Figure 7-3b on page HTML 332).
The structure of the divisions and unordered lists used in the jaredadam.html file at
start-up are as follows:
<div id=”menubar”>
<div id=”menu1” class=”menu”>Water Expeditions
<ul>
<li><a href=”waterfall.html”>Waterfall Exploring
</a></li>
<li><a href=”whale.html”>Whale Watching</a></li>
</ul>
</div>
<div id=”menu2” class=”menu”>Exotic Destinations
<ul>
<li><a href=”ch7sample.html”>Exotic 1</a></li>
<li><a href=”ch7sample.html”>Exotic 2</a></li>
</ul>
</div>
<div id=”menu3” class=”menu”>Cycling Tours
<ul>
<li><a href=”ch7sample.html”>Cycling 1</a></li>
<li><a href=”ch7sample.html”>Cycling 2</a></li>
</ul>
</div>
</div>
