[html/css] Advert banner like KWWH

[jayfella]

Ok.

So the advert banner on KWWH is pretty sexy. Nice rounded corners, pretty cool. Here's my interpretation of how i would go about coding it from scratch.

Credits to the original creator - its a re-write, not a rip

Im not sure how the original was written, but this version allows any width of advert, so you can span it however wide you like and it will retain its look.

Images: http://hotfile.com/dl/52067516/a3d1da3/images.rar.html

CSS:

#mainHoriz {background: #ddd; height: 60px;}
.leftBox { float: left; background: url(images/leftBox.png) no-repeat; height: 60px; width: 7px; position: relative; z-index: 5;}
.midBox { float: left; background: url(images/midBox.png) repeat-x; height: 60px; margin-left: -4px;}
.rightBox { float: left; background: url(images/rightBox.png) no-repeat; height: 60px; width: 7px; margin-left: -5px; position: relative; z-index: 5;}
.adImg { position: relative; z-index: 4; margin-top: 3px;} 

HTML:

<div id="mainHoriz">

    <div class="leftBox"></div>
    <div class="midBox">
        <img class="adImg" src="http://www.besthostingforums.com/images/ads/advert2.gif" />
    </div>
    <div class="rightBox"></div>
    
    <div class="leftBox"></div>
    <div class="midBox">
        <img class="adImg" src="http://www.besthostingforums.com/images/ads/advert2.gif" />
    </div>
    <div class="rightBox"></div>
    
    <div class="leftBox"></div>
    <div class="midBox">
        <img class="adImg" src="http://www.besthostingforums.com/images/ads/advert2.gif" />
    </div>
    <div class="rightBox"></div>
    
    <div class="leftBox"></div>
    <div class="midBox">
        <img class="adImg" src="http://www.besthostingforums.com/images/ads/advert2.gif" />
    </div>
    <div class="rightBox"></div>
    
</div> 

Le resulte:



Ok.
The background is grey so you can see how this is constructed. You can easily repeat-x a pretty little bar. The left, mid and right of the "transparent" rounded box is also easily modified.

Have fun

jayfella Reviewed by jayfella on 2nd Jul 2010. [html/css] Advert banner like KWWH Ok. So the advert banner on KWWH is pretty sexy. Nice rounded corners, pretty cool. Here's my interpretation of how i would go about coding it from scratch. Credits to the original creator - its a re-write, not a rip :) Im not sure how the original was written, but this version allows any width of advert, so you can span it however wide you like and it will retain its look. Images: http://hotfile.com/dl/52067516/a3d1da3/images.rar.html Rating: 5