Ok, I have a site I am making for a friend:

http://jesse.isgreat.org

I am trying to get 6 skinnier, longer, banners where the 3 currently are in the middle. Do I need to scrap the current code, or can I just edit it to make 6 instead of 3? It is just a template I found and edited not my own code...


I tried scaling it down, but maybe I missed something in my edit because it just put them all vertically on top of eachother.

Here is the snippet of code for the banners:

CSS

/* =BANNER */
    #banner_wrapper{
        width: 874px;
        overflow: hidden;
        padding:30px 0 0 28px;
    }
    .banner{
        float: left;
        width: 245px;
        float: left;
        background: #353C2C url(../images/banner_bg.gif) left repeat-y;
        margin-right:54px;
        padding-bottom:6px;
        position: relative;
    }
    .image_wrapper{text-align: center;}
    .banner img{border: 3px solid #181B0F;}
    .banner_last{margin-right:0;}
    .banner h2{
        height: 38px;
        background: url(../images/banner_top.gif) left no-repeat;
        font:1.9em "Lucida Grande", "Trebuchet MS", Arial, Helvetica, sans-serif;
        text-transform: uppercase;
        color: #010B54;
        padding: 15px 0 0 17px;
    }
    /* for the rounded bottom */
    .image_wrapper span{
        position: absolute;
        width: 245px;
        height: 6px;
        font-size:.1em;
        left:0;bottom:-1px;
        background: #353C2C url(../images/banner_bottom.gif) bottom no-repeat;
    }

html

<!-- The 3 Banner -->
        <div id="banner_wrapper">
            <div class="banner">
                 <center><h2><a href="http://jesse.isgreat.org/services.html">Our Services</a></h2></center>
                <div class="image_wrapper"><img src="images/services.jpg" width="228" height="202" alt="image: Services" /><span></span></div>
            </div>
            <div class="banner">
                 <center><h2><a href="http://jesse.isgreat.org/video.html">Video</a></h2></center>
                <div class="image_wrapper"><img src="images/videos.jpg" width="228" height="202" alt="image: Videos" /><span></span></div>
            </div>
            <div class="banner banner_last">
                 <center><h2><a href="http://jesse.isgreat.org/photography.html">Photography</a></h2></center>
            <div class="image_wrapper"><img src="images/photography.jpg" width="228" height="202" alt="image: Photography" /><span></span></div>
            </div>

Can anyone help me out? I will take any solution in order to get 6 banners instead of the current 3, even if its a different banner style. Could I just set them up like Ad Banners? Thanks.

You don't need all that to just float 6 images that will be links.

keep the <div id="banner_wrapper"> to hold the 6 image links. Apply the "banner" class to the 6 images (instead of the 3), and float the images.

.banner{
float: left;
width: xxxpx; /* width of the images */
background: #353C2C url(../images/banner_bg.gif) left repeat-y;
margin-right:xxpx; /*adjust margins to space the images */
padding-bottom:6px;

}

No absolute or relative positioning is necessary for the image 'banners'.
Make sure the width of the 6 images, including margins, fits inside the stated width of the banner-wrapper and make sure you CLEAR the floats by using overflow: auto (or hidden) on the banner-wrapper div.

Oh and this <center> <h2> -- is INVALID markup.

Thank you so much. It is looking much better now and way easier to understand where I had my problems.

Thanks a lot its also working for me.