WordPress.org

1. iomkiwi
   Member
   Posted 5 years ago #

   Hi
   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.

   http://www.hayes.flyingcarrot.com/

   Can anyone help this newbie?

2. Andrew Ozz
   WordPress Dev
   Posted 5 years ago #

   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.

3. iomkiwi
   Member
   Posted 5 years ago #

   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.

4. Andrew Ozz
   WordPress Dev
   Posted 5 years ago #

   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.

5. iomkiwi
   Member
   Posted 5 years ago #

   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

   to
   

   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.

Topic Closed

This topic has been closed to new replies.