Dreamweaver Article

Designing with CSS – Part 5: Defining Columns and Vertical List Navigation

Moving the Navigation

At the end of Part 4, I set a little exercise for you to add an h1 title and p elements into the leftcol div. How did it go, OK? Hopefully you completed it just fine by implementing descendant selectors in much the same way as you have already covered in the series.

You can delete all that information from your page for the time being. If you never bothered with the exercise and you left the temporary <br /> tags in the leftcol div, then please delete them now.

Making Structural Changes in the HTML Document

Open basiclayout.html in the Code view of Dreamweaver. Because you need to make some precise selections within your code, the Design view really won't do. Code view shows you exactly what you are doing.

You need to perform the following tasks, which I have listed below. You can also view them in the presentation linked below the list.

1. Locate the Start and End comments for the nav div.
2. Highlight them and all the code in between.
3. Select Edit > Cut (Control+X) to cut the code to the Clipboard.
4. Locate the leftcol div.
5. Place your cursor between the opening and closing div tag.
6. Select Edit > Paste (Control+V) to paste the code into the leftcol div.
7. Open the basiclayout.css file.
8. Select Edit > Find and Replace (Control+F) to open the Find and Replace dialog box.
9. Type #nav into the Find box.
10. Type #leftcol #nav into the Replace box.
11. Click the Replace All button.
12. Save your work.

Play the demo: Changing the Page Structure

Once you complete the changes above, you can preview the page in your browser of choice (see Figure 1).

Figure 1. Navigation now inside the leftcol div

As you can see from Figure 1, the navigation div now resides in the leftcol div. You still have some styling to do but I'm sure you would agree that making this big change was relatively painless in CSS. If you had been using tables to lay out your design, this alteration would have required a major redesign of the table structure. Notice how the other elements on the page simply moved up to fill the void left by by moving the nav div.

Let's embark on a little tidying up of the debugging colors:

1. Open basiclayout.css in Dreamweaver.
2. Locate the #content selector.
3. Delete the background-color property and its value.
4. Locate the .container class selector.
5. Delete the background-color property and its value.
6. Locate the #wrapper selector.
7. Change its background-color value to #ffffff (white).
8. Locate the #leftcol selector.
9. Delete the background-color property and its value.

Preview the page again in your browser of choice (see Figure 2).

Figure 2. Colors tidied up on the page

Leave the background color you set on the ul element for now. Next we will begin to restyle the unordered list to give it a completely new look.

Page 2 of 5

Previous Page

Next Page