WEB STANDARDS CREATIVITY

Styling the main navigation
Understanding the power and flexibility of substring selectors is important, as you are about to put them to even greater use
in styling the main navigation for this page. Once again, you will use a range of different techniques, including positioning
and image replacement. The main navigation will look as shown in Figure 4-10.
Figure 4-10. The finished look of the main navigation
But how do you achieve this? Your first, simple task is to remove the heading from view, this time by positioning it off the
top edge of the browser window.
div[id="nav_main"] h4 {
position : absolute; top : -9999px; }
With the heading now banished, except for people browsing the page without styles, you can set the proportions of the
unordered navigation list and add a background image that contains all three of the button graphics.
div[id="nav_main"] ul {
width : 310px;
height : 38px;
margin-left : 200px;
padding : 0;
background : url(../images/li_nav_main.png) no-repeat; }
The navigation links in this list will be accomplished by positioning the three anchors. Next, establish this unordered list as a
positioning context and set all list items to display as inline, rather than block-level elements.
div[id="nav_main"] ul {
position : relative; }
div[id="nav_main"] li {
display : inline; }
With position : relative; applied to the list to establish a positioning context, now set a general rule for all three
anchors.
div[id="nav_main"] a {
position : absolute;
top : 0;
display : block;
height : 38px;
width : 104px;
text-indent : -9999px; }
chapter 4 Designing for Outside the Box
101