Absolutely Positioned Ads

Tutorial Category:

Share This:

The best areas to place advertising can vary from page to page and it depends on the type of content and layout you have. But one element that all websites have in common is a header and it’s the first thing that visitors usually see. For that reason, it’s a great spot to place advertisements.

If you’re following the new trend to lay out your site with CSS, you’re not using tables. So how do you position the ad in a specific area? Let’s learn how to absolutely position an ad!

STEP ONE

Let’s say we have a header image that’s 800 pixels wide and 140 pixels tall. (The following image isn’t that size as you can tell but let’s pretend!)

STEP TWO

We’ll place it in a div called header and make it the background image. The CSS for that would be as follows:

#header {
height: 140px;
width: 800px;
background-image: url(images/header.gif);
position: relative;
}

The XHTML for that would be as follows:

STEP THREE

Let’s say we have an ad that’s 234 pixels wide and 60 pixels tall. I want to place it in the bottom left corner of the header. I don’t want it to be right against the border so I want a bit of space in between the left and bottom sides.

STEP FOUR

We’ll place the advertisement in a div called ad. The CSS for that would be as follows:

#ad {
height: 60px;
width: 234px;
position: absolute;
left: 10px;
bottom: 10px;
}

The XHTML for that would be as follows:

Now let’s bring it all together by placing the ad inside the header:

So how does it work? Good question. Let me point out the details of the CSS that makes it work.

Notice that the ad’s position is set to absolute and the header’s position is set to relative. What that means is that we want the ad to be absolutely positioned relative to where the header is.

We said the header was 800 pixels wide and 140 pixels tall. That means that the width of the header starts at 0 pixels and ends at 800 pixels. The height starts at 0 pixels and ends at 140 pixels.

Because we set the ad’s position of left and bottom to 10 pixels, the ad is positioned 10 pixels from the left and 10 pixels from the bottom of the header!

NOTE: The options you have to position are top, right, bottom, and left. So if you wanted to position the ad in the top left, it would be top: 10px and left: 10px.

Go have some fun absolute positioning!

Share This:

Related Tutorials