Extending Lists - HTML5 - page 117

For sites coded with HTML 4, the container is typically a <div> tag with a unique ID or class.
HTML5 provides a new tag to hold the navigation items, <nav> . Whichever containing element for
the navigation bar is used, this selector defines the overall dimensions of the group as well as provides
any border, background color, or image that encompasses all of the elements. It is often also used to
set the position of the navigation bar. Here's a typical containing element declaration:
div#nav {
width:400px;
height:20px;
background:#f3f3f3;
border:1px solid #ff0000;
position:absolute;
left: 50px;
top: 25px;
}
If you want to try out the HTML5 <nav> tag in the example code, just substitute
nav for div#nav . That changes the selector from a <div> tag with an ID of nav
to an HTML5-compatible <nav> tag. However, be aware — not all browsers
support the newer tag yet.
The <ul> tag CSS declaration removes the bullet image, if not part of the design, and sets the mar-
gins surrounding the navigation. For example:
div#nav ul {
list-style-type:none;
margin:0 auto;
}
The CSS rule for the list item typically controls how much space each individual item takes up by
defining a width; once a width is set, the text can be aligned as desired. Furthermore, if the naviga-
tion bar is a horizontal one, the <li> tags are often floated in one direction or another, like this:
div#nav ul li {
float:left;
width:120px;
text-align: center;
}
The final set of CSS rules are centered on the <a> elements in the unordered list. You'll often find
multiple rules related to the <a> tag when working, one for the default link state and others for addi-
tional interactive states, like the hover state. Here are two typical declarations:
div#nav ul li a {
display:block;
line-height:40px;
}
div#nav ul li a:hover {
color: red;
background-color: yellow;
}