Designing with CSS – Part 5: Restyling the Unordered Navigation List
Restyling the Unordered Navigation List
Begin by making changes to your #leftcol #nav ul
selector. It should currently look similar to Listing 1.
#leftcol #nav ul{
padding: 0;
margin: 0;
background-color:#00FF99;
}
Listing 1. #leftcol #nav ul
selector code
Change the code in Listing 1 so it resembles the version in Listing 2.
#leftcol #nav ul {
margin: 0;
padding: 0;
background-color: transparent;
list-style-type: none;
border: 1px solid #000000;
}
Listing 2. Revised #leftcol #nav ul
selector code
Open basicalyout.css in Dreamweaver, locate the #leftcol #nav ul
selector, and complete the following steps. Remember that while you type in the style sheet, your CSS code hints are active. Take advantage of them and monitor what they are offering as you type. Code hints speed your workflow dramatically:
- Locate the
background-color
value delete it and type transparent. - Place your cursor after
;
and press Enter. - Type list-style-type: none; and press Enter. When you set the value of this property to
none
it removes the bullets from the list items. - Type and press Enter. The percent value you set here scales the font size based on the default percentage you set in the
body
selector. - Type border: 1px solid #000000;. This shorthand code sets the border for all four sides in accordance with the given values. In this case the borders will be one pixel wide, solid, and black.
- Save your work.
Comments