Hi there

I'm having a brain block in that I would like the heading 1 class'"siteheading" to stay where it is on the right side of the "wrapheader" style but when I move the window size it moves over to the left each time. I have positioned it "absolute" and the "wrapheader" style is a float: left. Perhaps this is the problem I don't know. Any ideas?

here is the website: http://test.diamondharbour.info/

Your assistance would be greatly appreciated - thanks. :-)

4 answers

0
points

You want it to be absolute to the parent element which would be that header div (which would also need relative positioning).

container (position:relative) header (position:absolute - right: 100px; bottom: 0px)

Answered about 7 years ago by DFischer
0
points

There's no need to position your H1 absolutely. Right now your H1 is positioning itself the specified amount of pixels away from the top and right edges of the viewport, not the image of the harbor behind it.

Since that image is a fixed size, and you will always want your H1 text to appear in the same spot,. in relation to the image, you can simply give your H1 the appropriate padding and/or margin to place it where you want it.

since it looks like you're trying to place the text in relation to the right side of the image, try something more like this:

.siteheading  {padding-top: 188px; padding-right: 146px; text-align:right; }
Answered about 7 years ago by jenny ham
0
points

I don't really want to position the whole header as an absolute as I prefer to use floats. But I did originally have a float on the siteheading though this seemed to float about the baseline depending on the resolution of the page.

Also, regarding the padding advice above, this is no good in IE. I then need to place IE hacks to get the positioning correct and exactly the same as in FF. This is the experience I have had anyway. I guess I could add a height and width to it perhaps??

Any other ideas?

Answered about 7 years ago by Felicia
0
points

I think I may've fixed it. I have added this code instead and it seems to work in both browsers:

margin-top: 168px; 
padding-right: 8px;
text-align:right;
display:block;

Cheers

Answered about 7 years ago by Felicia