Support » Fixing WordPress » Changing header text position problem

  • Resolved iomkiwi


    I am trying to position my header text in the bottom right corner of my header image but as I pad it down it moves to the left away from the right margin. I want the text to disappear into the photo on hover.

    Can anyone help this newbie?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator Andrew Ozz


    WordPress Dev

    Try adding this to your style.css:

    #header h1 {
    font-size: 2em;
    display: block;
    margin: 0 10px 0 250px;

    and adjust the margins until it’s right.

    Sorry – that doesn’t seem to work, maybe I’m putting it in the wrong place. Where should it go approx?
    Up near the top just under where it says —-Color CSS—
    or further down just before the ——hnav—-?

    The change to the font size does give the same font size in IE and Firefox now but changing the margins shifts the whole image.

    Moderator Andrew Ozz


    WordPress Dev

    I see… Your header div is actually called masthead, and the h1 has the id header. Try defining the h1 as h1#header at line 83 in style.css, then adjust the margin on it:

    h1#header {
    font-size: 2em;
    padding: 0;
    margin: 100px 10px 5px 250px;

    You won’t need text-align. The font-size is there to make sure all browsers use the same size for this h1.

    Really appreciate your help but it isn’t working, changing the margins shifts the image not the writing. Without the text align the H’s are above one another.
    Anyway think I am making progress – changed the padding settings around line 460 from

    padding: 0px 5px 0px 5px


    padding: 0px 0px 0px 120px;

    Site now looks fine in Firefox, but seems to have opened up a new can of worms in IE, seems to be a lot of excess margin on right hand side and bottom of image. However that is a whole new question.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Changing header text position problem’ is closed to new replies.