Support » Themes and Templates » Problems positioning text on top of header image

  • Resolved realepicurean

    (@realepicurean)


    Hi,
    I’m trying to put some text (specifically, subscribe links) on top of my header image but can’t seem to position them correctly.

    I’m looking for them to be on the top right of the header, something is forcing their default position over though.

    My site is: http://www.realepicurean.com/

    Thanks for any help.

Viewing 11 replies - 1 through 11 (of 11 total)
  • I can’t see any text or link on, or near, your header at the moment. So it’s hard to figure out what you were doing wrong.

    Thread Starter realepicurean

    (@realepicurean)

    Currently commented out to stop my site looking (so) daft.

    We’d really need to see the site with that code actively being used.

    Thread Starter realepicurean

    (@realepicurean)

    Ok; now enabled, so you can see the problem. Note search box has similar position problems.

    Edit style.css:

    #headerimg .follow {
    float:right;
    font-size:1.25em;
    margin:10px 0 0 650px;
    width:960px;
    }

    and remove width:960px;.

    Thread Starter realepicurean

    (@realepicurean)

    Hmmn, I can see how that changes things but still can’t get the text to float in the right place, parallel with the sidebar…

    Edit: Or floating at the right of where the page would be, above the search, aligned right?

    still can’t get the text to float in the right place, parallel with the sidebar

    You didn’t mention wanting the links to line up with the sidebar previously. Where exactly are you trying to move these links to?

    Thread Starter realepicurean

    (@realepicurean)

    Sorry I’m awkward…If I can get the left of that text parallel with the left of the sidebar I’ll be happy 🙂

    Try this:

    Add “position:relative” to #headerimg. Then add “position:absolute” to #headerimg .follow and remove the width. Then you can position your text anywhere relative to the header image. Something like this:

    #headerimg {
    background:url("images/logobar21092010.jpg") no-repeat scroll center top #FFFFFF;
    height:183px;
    margin:0;
    position:relative;
    }
    
    #headerimg .follow {
    float:right;
    font-size:1.25em;
    margin-top:10px;
    position:absolute;
    right:150px;
    top:70px;

    }

    Forgot to say, change the right and top pixel values until it’s where you want it.

    Thread Starter realepicurean

    (@realepicurean)

    Works a treat ta!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Problems positioning text on top of header image’ is closed to new replies.