Need help? Check out our Support site, then


Tagline Float on Top of Header?

  1. Hello fellow wordpressers!
    I'm running into a problem with my tagline. For some reason it seems to move depending on if I am logged in or not. I am assuming its using the top wordpress bar as reference as where the top is? I just cant get it to match up! Im wondering if there is anyway to make the tagline float on top of the header. I looked around the forums but could not find anything like this. Here's the site: http://theprimebook.wordpress.com/
    And here is the tagline code: #site-description {<br /> color:#898989;<br /> font-size:16px;<br /> position:absolute;<br /> left:800px;<br /> bottom:434px;<br /> z-index:2;<br /> clear:right;<br /> font-style:italic;<br /> width:220px;<br /> margin:15px 0 18px;<br /> }
    Thank you ahead of time!

    The blog I need help with is theprimebook.wordpress.com.

  2. moved to CSS forum

  3. Woops, sorry about that, thank you.

  4. Not a problem: it just makes it easier for the people who can help with CSS to find your question.

  5. thesacredpath
    Staff

    Where exactly is the description supposed to be? Logged in I see it in the middle of the right end of the header (can't read it when it's there) and logged out it is on top of the facebook and twitter buttons. In the following, I've taken out the stuff that are duplicates of what is in the original CSS. As long as you have "add to existing..." selected before saving, your changes will add to, or overwrite the like things in the original, so there is no need to include things that are not changing. I added position: relative; to the wrapper which means the position absolute for the site description will be absolute in relation to the wrapper. This way you do not need the z-index. Also note I'm not using "bottom" now, but "top."

    #wrapper {
    position: relative;
    }
    
    #site-description {
    color: #898989;
    font-size: 16px;
    left: 700px;
    position: absolute;
    top: 150px;
    }

    Do the above and then let me know so I can check it in Safari. What you had seemed to have completely blown up in Safari and hopefully what we've done above will fix that.

  6. I very much appreciate your help in this matter. The tagline is suppose to be lined up the bottom of the logo, and to the right a touch. I inserted the code and got it lined up in the preview, but as soon as I save it, then go the the actual page, its in a different spot. I also noticed it seems to move around on different computers. Maybe has to do with screen resolutions?

    I dont understand why it is in a different position in the preview, but then is in a different position when I load the actual page.
    Thanks again for your help. The is the code I have in for the tagline:
    #site-description {<br /> color:#898989;<br /> font-size:16px;<br /> left:796px;<br /> position:absolute;<br /> top:157px;<br /> }</p> <p>#branding img {<br /> border-bottom:1px solid #000000;<br /> border-top:4px solid #000000;<br /> display:none;<br /> }

    Updated on website: http://theprimebook.wordpress.com/

  7. Thought; Might be the "Preview: changes must be saved or they will be lost" bar that is throwing it off? But nothing else moves. Hmmmmm.... Thanks again

  8. Ah Ha! Think the wrapper was off.
    I believe I got it working with:
    #wrapper {<br /> position:relative;<br /> }</p> <p>#site-description {<br /> color:#898989;<br /> font-size:16px;<br /> left:620px;<br /> position:absolute;<br /> top:58px;<br /> }
    But need to check on another computer. Thank you! You were extremely helpful

  9. thesacredpath
    Staff

    You are welcome. The wrapper position declaration is to keep it from moving around when logged in and logged out.

  10. It appears to be fixed. Thank you very much again. You were extremely helpful

  11. thesacredpath
    Staff

    You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic