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;
}
Leave a Reply