[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

[iFlames]

awesome tut jay
thanks

[wf?9]

thnx jayfella

[Rambo]

Thanks
Nice tut

[timtamboy63]

not bad but you may wanna add classes for the width, eg class="1" would give you one ad space, class="2" would give you two it be fairly simple i think

[jayfella]

they are automatically sized. Like i said. it allows any sized width of advert, so there is no need to declare any widths.

[rapid-ddldotcom]

Thanks Jayfella

[pi0tr3k]

Nice tut mate, I'm sure it will be useful for some of you

[CJ]

You truely an All Rounder

[l0calh0st]

Thanks jay, what about that highlight? or is that just a darker AD image?