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