Designing with CSS in Dreamweaver MX 2004 – 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’s 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.
- Locate the banner selector in basiclayout.css.
- Place your cursor after the height value and press Enter to create a new line. The code hints list appears.
- Select
background-imagefrom the list to insert thebackground-imageproperty. - Click Browse in the pop-up menu. This opens the Select File dialog box.
- Navigate to your background image and double-click it to insert the path as the value.
- Add a semicolon after the path to complete the process.
- Press Enter to to create a new line. The code hints list appears.
- Select
background-repeatfrom the list, followed byno-repeat. - Add a semicolon at the end of the line.
- 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).
Figure 12. The banner positioned on the page
Next we look at inserting navigation into the design.
Comments