< Back to Coding, HTML

Side Ads

This little demo puts promotional ads on the left and right of the webpage. To do this, the HTML is structure is like this:

<body>
<div id="mainContainer">    
Main Website Content.
</div>

<div class="adContainer">
    <div class="leftAd"><a href="http://www.google.com"
target="_blank">left ad text</a>
    </div>
    <div class="rightAd"><a href="http://www.google.com"
target="_blank">right ad text</a>
    </div>
   </div>
</body>

and the CSS is as follows:

body{
 background:url(images/ad-bg.jpg) center top no-repeat;
 margin:0;
 padding:0;
}

#mainContainer{
 z-index:2;
 position: relative;
 margin:0 auto;
 width:980px;
 min-height: 1000px;
}

.adContainer{
 position:absolute;
 width:100%;
 height:100%;
 top:0;
 left:0;
 overflow:hidden;
}

.leftAd, .rightAd{
  left: 50%;
  top:0;
 position: absolute;
}

.leftAd{
  margin-left: -900px;
}

.rightAd{
 margin-left: 496px;
}

.leftAd a,.rightAd a{
 width: 404px;
  height: 1000px;
  display: block;
  text-indent: -9999px;
}

View the demo

Download the Demo

 

Be Sociable, Share!

Leave a Reply

Your email address will not be published. Required fields are marked *