Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Feb 2011
    Posts
    3
    Member #
    26989
    I am working on a redesign for my site and having an issue with Ad sizing on the side. In the initial code for the site it was set up for 2 Ad sizes. I want different options.

    I have updated the code so all the different sizes show. My problem is that the medium size ads now have too much blank space on the bottom of them.

    Here is a link to site as it stand currently: www.bicyclesmile.com/wordpress

    You can see the ads on the right hand side.

    Here is what I have for html:
    <div id="ads">
    <ul>

    <li class="wide">
    <a href="http://www.yubaride.com/"><img src="http://www.bicyclesmile.com/wordpres...11/02/yuba.png" alt="" /></a></li>

    <li class="wide">
    <a href="http://www.chromebagsstore.com/"><img src="http://www.bicyclesmile.com/wordpres...2/chromead.png" alt="" /></a></li>

    <li class="wide">
    <a href="http://www.planetbike.com"><img src="http://www.bicyclesmile.com/wordpres...anetbikead.png" alt="" /></a></li>

    <li class="wide">
    <a href="http://www.bagaboo.hu"><img src="http://www.bicyclesmile.com/wordpres...bagaboo_ad.jpg" alt="" /></a></li>

    <li><a href="http://www.crumpler.ca"><img src="http://www.bicyclesmile.com/wordpres...crumplerad.png" alt="" /></a></li>
    <li><a href="http://www.queenbee-creations.com/"><img src="http://www.bicyclesmile.com/wordpres...2/queenbee.png" alt="" /></a></li>

    </ul>
    </div>

    Here is what I have for css:
    #ads {
    padding: 9px 4px 0 9px;
    border: solid 1px #ddd;
    background: #fff;
    width: 265px;
    }

    #ads ul {
    list-style: none;
    padding: 0;
    overflow: hidden;
    width: 300px;
    }

    #ads ul li {
    float: left;
    }

    #ads ul li a {
    float: left;
    background: #fff;
    display: block;
    height: 135px;
    width: 135px;
    }

    #ads ul li a img {
    margin: 0 10px 10px 0;
    }

    #ads ul li.wide a {
    width: 260px;
    height: 200px;
    margin-right: 0;
    }

    I am looking to have 3 different ad sizes: 260x200, 260x120, 125x125

    I am sure there are other thins to mess with too, but that is where I think I should be looking.

    Any help is greatly appreciated
    Ryan

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Take out your floats. You don't need them. You're lining your items up vertically, not horizontally. Floats are designed to line things up horizontally.

    When you've got that done, add the following to both your ul and your li:
    Code:
    margin: 0;
    padding: 0;
    That will take care of your padding and margins between the list items.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Junior Member
    Join Date
    Feb 2011
    Posts
    3
    Member #
    26989
    I tried that and it did not work, but then again maybe I did it wrong. Here is what I changed it to:

    #ads {
    padding: 9px 4px 0 9px;
    border: solid 1px #ddd;
    background: #fff;
    width: 265px;
    }

    #ads ul {
    list-style: none;
    padding: 0;
    overflow: hidden;
    width: 300px;
    margin: 0;
    padding: 0;
    }

    #ads ul li {
    margin: 0;
    padding: 0;
    }

    #ads ul li a {
    background: #fff;
    display: block;
    height: 135px;
    width: 135px;
    }

    #ads ul li a img {
    margin: 0 10px 10px 0;
    }

    #ads ul li.wide a {
    width: 260px;
    height: 200px;
    margin-right: 0;
    }

    Any other suggestions, or did I just do this wrong?

  5. #4
    Junior Member
    Join Date
    Feb 2011
    Posts
    3
    Member #
    26989
    Ok, I figured it out.

    input this into the original css:

    #ads ul li.wide a {
    width: 260px;
    height: 120px;
    margin-right: 0;
    }

    #ads ul li.tall a {
    width: 260px;
    height: 200px;
    margin-right: 0;
    }

    I seem to have lost the padding between the ads, but I will check the code on that later.

  6. #5
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Sorry, dude...missed these two posts.

    If you want padding between the ads (I'm assuming vertical padding), you can put it in the li css:
    Code:
    #ads ul li {
    margin: 0;
    padding: 0 0 5px 0;
    }
    That would leave a gap of 5 pixels between each ad, and then 5 pixels on the bottom of the last ad.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Ignore the font stuff. I didn't put that in there. XenForo did and I can't get it out.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:29 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com