HTML and CSS Reference
In-Depth Information
17. give the
nav
unordered list a height of
40px
:
#nav {
list-style-type: none;
margin: 15px 0 0 0;
padding: 0;
height: 40px;
}
When you give the unordered list a fixed height, the top margin of the
main<div>
and the unordered
list are no longer adjacent to each other, and no longer collapse. As a result, the top margin of the
main<div>
positions the
<div>
correctly below the menu in all browsers. An important lesson to take away
from this exercise is the need to use the developer tools in different browsers to solve discrepancies in layout.
■
if you need to support iE 6, amend the
#nav li
style rule to set
display
to
inline
. you also need to add
#nav li
to the iE conditional comment to change the
width
property from
15.5%
to
15.3%
because rounding errors
prevent iE 6 from handling percentages that add up to exactly
100%
.
Note
Using CSS Sprites in a Navigation Bar
The preceding examples use just text and background colors to style the links in an unordered list. Once you have
styled the links as clickable buttons, there's nothing stopping you from adding a background image or using CSS
sprites for rollover effects (see Chapter 8 for an explanation of CSS sprites).
There's a very basic example of using a CSS sprite for a navigation menu in sprite_nav.html. The styles for the
unordered list are very similar to those used for the horizontal menu in the preceding example. The styles for the
unordered list and list items look like this:
#nav {
list-style-type: none;
margin: 0;
padding: 0;
height: 2.3em;
border-bottom: #5B4625 3px solid;
}
#nav li {
width: 220px;
height: 2.3em;
margin: 0;
float: left;
}
The bullets are removed from the unordered list by setting
list-style-type
to
none
, and its margins and
padding are set to zero. The list is also given a fixed height. The list items are given a fixed width and are floated
left, but they also need a fixed height in order to make room for the background images.
The styles for the links look like this:
#nav a {
display: block;
text-decoration: none;
font-family: "Arial Black", Gadget, sans-serif;
