SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dropping to next line

    Anyone know if the code is unstable on the header of this site: http://mercurytint.com/? The problem: the middle link with the dollar sign in the header -- the text keeps dropping to the next line. And the whole box section should be even with the end of the Llumar image above it so telephone icon text should be even with end of Llumar text. It looked fine but now it doesn't. I don't know what I did to change it except add meta tags, etc.

    Thanks so much in advance!

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    It looked fine but now it doesn't.
    Hi Karen,

    I'm not sure what it looked like before but these adjustments below seem to get it like you say you want it.

    Maybe just push the logo to the left some with a larger right margin. Then I lifted the box parent up with a neg top margin and gave it some bottom margin to give the text some breathing room. Last I reduced the width on your telephone div a little.

    Code:
    .llumar {
    clear:both;
    display:block;
    float:right;
    height:42px;
    margin-bottom:19px;
    margin-right:14px; /*was 8px*/
    width:155px;
    }
    
    .boxes {
    clear:both;
    float:right;
    height:67px;
    margin:-10px 0 10px; /*was margin-right:8px*/
    overflow:hidden;
    width:535px;
    }
    
    div#b_ct {
    width:170px; /*was 180px*/
    }
    I'm sure you can play around with it some more and get it like you want it.

  3. #3
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ray. Yeah, not sure what happened. It keeps changing. I'll try this.

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The problem: the middle link with the dollar sign in the header -- the text keeps dropping to the next line.
    I missed that part of the problem, I was just trying to get your phone lined up with the logo with my previous suggestions.

    If I remember right you had a width on that middle div yesterday, it looks like you've removed it now. A narrow width would have forced the text to drop to a new line.

    You can do away with the width:auto; as that is the default anyway. Just keep in mind that floats shrinkwrap to the width of their content. The way your controlling your text with the line breaks <br>, that is what is setting the width on the floats that are set as width:auto;

    You might want to give some right padding on that middle div to push that longest line of text away from the phone image.

    Code:
    div#b_ck a {
        /*padding-left:53px;*/
        padding: 0 6px 0 53px;
        background:url(images/tax.png) top left no-repeat;
        /*width:auto;*/
    }
    All in all, it looks better now than it did yesterday since you corrected the extra line.

  5. #5
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Appreciate your help!

    Congrats on "CSS Guru of the Year 2010" Ray. Rock on!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •