Web Design with HTML and CSS

156

A brief history of layout techniques on the web

Web Design with HTML and CSS Digital Classroom

The list items are linking to pages that do not exist yet. Nevertheless, you are linking the

items because they need to be hyperlinked to be styled correctly.

2 Preview the page in your browser.

Your list is in the default vertical position and is overlapping your sidebar.

Notice that your page appears “broken” again. This is because your list is overlapping

your fl oated sidebar. Also, the list has no bullet points. Remember that your CSS

reset style sheet is attached to this page and one of the rules has a property of list-

style:none, which removes the bullet points. For this example, the lack of bullet points

is acceptable because you are using this list for navigation.

3 Return to your text editor and locate your #mainnav rule. Add a new rule between this

one and the sidebar by pressing Return a few times to add some space and then adding

the following code:

#mainnav li {

fl oat:left;

}

This is a new type of CSS rule called a contextual selector; it targets onl y list items that are

inside the mainnav div. If you were to defi ne a new rule just for list items, all the list

items on the page would be aff ected, which would not work for this example.