[html/css] Advert banner like wJ

[jayfella]

Ok.

So the advert banner on wJ 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.wjunction.com/images/ads/advert2.gif" />
    </div>
    <div class="rightBox"></div>
    
    <div class="leftBox"></div>
    <div class="midBox">
        <img class="adImg" src="http://www.wjunction.com/images/ads/advert2.gif" />
    </div>
    <div class="rightBox"></div>
    
    <div class="leftBox"></div>
    <div class="midBox">
        <img class="adImg" src="http://www.wjunction.com/images/ads/advert2.gif" />
    </div>
    <div class="rightBox"></div>
    
    <div class="leftBox"></div>
    <div class="midBox">
        <img class="adImg" src="http://www.wjunction.com/images/ads/advert2.gif" />
    </div>
    <div class="rightBox"></div>
    
</div>

Le resulte:

[slide]http://www.imgcentre.com/img/uploads/big/045cdd0605.png[/slide]

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

 

[iFlames]

awesome tut jay
thanks <3

 

[wfø9]

thnx jayfella <3

 

[Rambo]

Thanks
Nice tut <3

 

[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?