Designing with CSS – Part 3: Creating the Banner Selector

Creating the Banner Selector

The next stage of the process is to create the banner div. Because the content within the wrapper flows from top to bottom, you first create the banner div, then the content div, and finally the footer div. The page will just flow naturally; there will be no defined positioning within this page. So you need to place the elements within the wrapper in the order that they will appear in the document. The first element within the wrapper is the banner, which you created in the previous section. Now create the selector for the banner.

The banner div is an ID type selector and it will be the first div you place within the wrapper div. Because we are simply letting the divs flow down the page, the banner div must take its place right after the opening wrapper div tag. The only property and value pair you need to add to the banner selector is the height property and its value. There is no content within the banner div that will be cut off in case the user resizes the browser text, so the height property in this instance is safe to use. Make the banner div 110 pixels high.

The banner selector should look like the following:

#banner{ height: 110px; }

Now that you have created the banner selector, I will show you how to set up a background image for this particular div. This time let’s use Dreamweaver code hints so that you can see just how easy Dreamweaver makes it for you to set up a background image right from within the CSS file.

With your basiclayout.html file open in design view you will use the Add Property function in the CSS panel to add a background image to our banner rule.

Now add the banner div to the XHTML document, switch to the Code view, and use the same technique that I demonstrated when inserting the wrapper div:

<body> <div id="wrapper"> <div id="banner"></div> </div> </body>

This code shows the banner div in position within the page. Notice how it is positioned immediately after the opening wrapper div tag and that the banner is completely encased within the wrapper div. Preview the page in the browser of your choice (see Figure 12).