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% .
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;
Search WWH ::

Custom Search