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.
- Open basiclayout.html
- Open the CSS panel
- Click the Add Property option
- Select background-image
- Select the folder in the value side
- Browse to your banner_bg.jpg file
- Double click the file in the browse window
- Select the Add Property option
- Select the background-repeat option from the list
- From the value list select no-repeat
- Save your CSS file
Your banner selector should now look like the following:
#banner{
height: 110px;
background-image: url(../images/banner_bg.jpg);
background-repeat: no-repeat;
}
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).
Next we look at inserting navigation into the design.
Comments