Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

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.

  1. Open basiclayout.html
  2. Open the CSS panel
  3. Click the Add Property option
  4. Select background-image
  5. Select the folder in the value side
  6. Browse to your banner_bg.jpg file
  7. Double click the file in the browse window
  8. Select the Add Property option
  9. Select the background-repeat option from the list
  10. From the value list select no-repeat
  11. 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).

The banner positioned on the page

Figure 12. The banner positioned on the page

Next we look at inserting navigation into the design.

Comments