CSS issue

  • raindance

    #2476

    Emmm…I have a css issue I could use some help with…

    http://juicytravels.com/travel-mileage-loyalty-programs/

    I’ve got the box on the right with the shadow just as I want it in the right place and all…the only thing I’m not getting is how to get the text to fill in the white space between the “Award wallet” logo on the left and the new box on the right. I want the text to flow in that white space around both of those divs. I’m sure I’ve got a dumb css error.

    So this is the code:

    <div class="sidebar-pages"><span class="sidebar-title">Other Loyalty Resources</span>
    <ul>
    <li><a title="Frequent Flyer Programs" href="http://juicytravels.com/mileageair-travel-programs/">Frequent Flyer Programs</a></li>
    <li><a title="Hotel Loyalty Programs" href="http://juicytravels.com/hotel-loyalty-programs/">Hotel Loyalty Programs</a></li>
    <li><a title="Car Rental Loyalty Programs" href="http://juicytravels.com/car-rental-loyalty-programs/">Car Rental Loyalty Programs</a></li>
    </ul>
    </div>
    <div class="articleimage1"><a href="http://www.awardwallet.com"><img class="alignleft" src="http://juicytravels.com/assets/articleimages/Page-LoyaltyPrograms/awardwallet.gif" alt="Award Wallet logo" width="200" height="50" /></a></div>
    <div class="articlecontent1"><a title="Award Wallet" href="http://www.awardwallet.com">Award Wallet</a> keeps track of your reward programs such as frequent flyer miles, hotel and credit card points with 427 current loyalty programs. What's Juicy: It's free and it monitors your accounts to notify you when points are going to expire. The interface is clean and easy to use, and best of all there is a smart phone app so you can quickly see balances on the go. Takes some time to enter in all your accounts but it sure is nice to have once you get them set up. For a mere $5 for six months you get the premium benefit tier including unlimited expiration tracking as opposed to only 3 for a free account. The coverage is better than the popular MileageManager and MileTracker sites.</div>
    <div style="clear:both;"></div>

    <hr />

    And this is the relevant css:

    }
    .articleimage1 {
    float:left;
    width:210px;
    }
    .articlecontent1 {
    float:right;
    }
    .sidebar-pages {
    width:200px;
    float:right;
    padding:10px;background: #fff;
    border: 1px solid #ccc;
    -moz-box-shadow: 0 0 5px #BBB;
    -webkit-box-shadow: 0 0 5px #BBB;
    box-shadow: 0 0 5px #BBB;
    margin-bottom: 16px;
    padding: 10px 12px;
    }
    .sidebar-title {
    font-family:Arial, Helvetica, sans-serif;
    color:#069;
    font-size:14px;
    font-weight:bold;
    }

    Does anyone know how to get the text to flow between the two in that white space? I want the text to start just to the right of the Award Wallet image, like in the ones below, and fill up the white space between the Award Wallet logo and the new related links box inset on the right.

    Thank you!

    Josh

    #20352

    Do you have something on there which prohibits users from being able to right-click?

    raindance

    #20353

    Not intentionally. I don’t know why it does that?

    I’m getting closer though, look…

    http://juicytravels.com/travel-mileage-loyalty-programs/

    Now just trying to get that text off the award wallet logo…

    .articleimage1 {
    float:left;
    width:210px;
    }
    .articlecontent1 {
    float:right;
    width:690px;
    }
    .articlecontent-withrightinset {
    display:inline;
    padding:15px;
    }
    .sidebar-pages {
    width:200px;
    float:right;
    padding:10px;background: #fff;
    border: 1px solid #ccc;
    -moz-box-shadow: 0 0 5px #BBB;
    -webkit-box-shadow: 0 0 5px #BBB;
    box-shadow: 0 0 5px #BBB;
    margin-bottom: 7px;
    padding: 10px 12px;
    position: relative;
    }
    .sidebar-title {
    font-family:Arial, Helvetica, sans-serif;
    color:#069;
    font-size:14px;
    font-weight:bold;
    }

    and the code from the page

    <div class="sidebar-pages">
    <span class="sidebar-title">Other Loyalty Resources</span>
    <ul>
    <li><a title="Frequent Flyer Programs" href="http://juicytravels.com/mileageair-travel-programs/">Frequent Flyer Programs</a></li>
    <li><a title="Hotel Loyalty Programs" href="http://juicytravels.com/hotel-loyalty-programs/">Hotel Loyalty Programs</a></li>
    <li><a title="Car Rental Loyalty Programs" href="http://juicytravels.com/car-rental-loyalty-programs/">Car Rental Loyalty Programs</a></li>
    </ul>
    </div>
    <div class="articleimage1"><a href="http://www.awardwallet.com"><img class="alignleft" style="display: inline;" src="http://juicytravels.com/assets/articleimages/Page-LoyaltyPrograms/awardwallet.gif" alt="Award Wallet logo" width="200" height="50" /></a></div>
    <div class="articlecontent-withrightinset"><a href="http://www.awardwallet.com">Award Wallet</a> keeps track of your reward programs such as frequent flyer miles, hotel and credit card points with 427 current loyalty programs. What's Juicy: It's free and it monitors your accounts to notify you when points are going to expire. The interface is clean and easy to use, and best of all there is a smart phone app so you can quickly see balances on the go. Takes some time to enter in all your accounts but it sure is nice to have once you get them set up. For a mere $5 for six months you get the premium benefit tier including unlimited expiration tracking as opposed to only 3 for a free account. The coverage is better than the popular MileageManager and MileTracker sites.</div>
    <div style="clear:both;"></div>

    <hr />

    I added a new class and gave it to that text I wanted to flow

    .articlecontent-withrightinset {

    display:inline;

    padding:15px;

    }

    But the padding is not applying to getting it off the logo…fooling around with that now…

    raindance

    #20354

    I just don’t get why the text is laying over the award wallet image and so close to the box of links on the right…why isn’t it honoring “padding”?

    .articleimage1 {
    float:left;
    width:210px;
    }
    .articlecontent1 {
    float:right;
    width:690px;
    }
    .articlecontent-withrightinset {
    padding-left:15px;
    padding-right:15px;
    }
    .sidebar-pages {
    width:200px;
    float:right;
    padding:10px;background: #fff;
    border: 1px solid #ccc;
    -moz-box-shadow: 0 0 5px #BBB;
    -webkit-box-shadow: 0 0 5px #BBB;
    box-shadow: 0 0 5px #BBB;
    margin-bottom: 7px;
    padding: 10px 12px;
    position: relative;
    }
    .sidebar-title {
    font-family:Arial, Helvetica, sans-serif;
    color:#069;
    font-size:14px;
    font-weight:bold;
    }

    I took out the inline css for the image…didn’t seem to impact it…

    Josh

    #20355

    Try using the !important property. Like this:

    padding: 10px !important;

    raindance

    #20356

    Got it. Not elegant I’m sure in the css and better ways to do it but when I changed the div style for that text in the top block to id and changed from . to # in css, it respected padding. So I guess when it’s a class . not an id # it handles it differently.

    I must do some good css tutorials and get better at css!

    Thanks for looking at it…

    raindance

    #20357

    Oh I just saw the important thing…oh ya I forgot to try that…ha.Thanks 🙂

    Josh

    #20358

    No worries. As long as you got it resolved 🙂

    raindance

    #20359

    Yup thanks for helping 🙂

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.