What you??™ll learn How to create a two-tier navigation system, with different
backgrounds and styles for each tier. This is another method for
dealing with navigation text resizing, and it??™s also useful for larger
websites, providing a place for subnavigation.
Completed files two-tier-navigation in the chapter 5 folder.
1. Edit the body element. In the HTML page, give the body start tag an id value of
homePage.
2. Add some subnavigation. Open the HTML document and add another list for subnavigation,
directly after the navigation div.
3. Amend the body rule. In the CSS document, edit the body rule to add a dark gray
background color and some padding at the top of the document.
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
background: #333333;
padding-top: 20px;
}
4. Style the structural divs??”add the following three rules to style the three main
structural divs. Adding a light gray bottom border to the masthead makes the transition
between the vibrant navigation to the black-text-on-white-background
content area less harsh.
#wrapper {
width: 750px;
margin: 0 auto;
background-color: #ffffff;
Creating a two-tier navigation menu
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
220
border: 1px solid #555555;
}
#masthead {
border-bottom: 8px solid #cccccc;
}
#content {
background: #ffffff;
padding: 10px;
}
5.
Pages:
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317