position an image over other div elements

liunx

Guest
Hi

please look at the attached

<!-- m --><a class="postlink" href="http://www.joewalkden.co.uk/layout3">http://www.joewalkden.co.uk/layout3</a><!-- m -->

I've been trying to position an image in the top right corner but it always appears underneath the two lines of text I have in my header div. What's the way around this?

thanks!Give your paragraphs a width so they don't take up the whole space then float the image right. Those paragraphs should probably be an h1 anyway, at least the first one.thanks, I must still be missing something.

<!-- w --><a class="postlink" href="http://www.joewalkden.co.uk/layout3b">www.joewalkden.co.uk/layout3b</a><!-- w -->

Any suggestions?I'd suggest getting rid of some of the DIVs that are not really needed, then set the image as a background to the header DIV.

CSS:

#header{
color: #FFFFFF;
margin: 0;
padding: 5px 0 0 0;
height: 110px;
background: #000000 url("1redbox.jpg") no-repeat 100% 50%;
}

#header h1 {
margin: 30px 0 0 20px;
}

#header h2 {
margin: 0 0 0 40px;
}


HTML:

<div id="header">
<h1>joewalkden.co.uk</h1>
<h2>came to London for a month in January</h2>
</div>

Makes the markup a lot easier to read - and therefor update - too. :)Great, that worked perfectly.

So when you define the div as #header h1 for example, does the text in that div then inherit the specific h1 properties from the "header" div, in addition to any other h1 properties that may be specified elsewhere in the style sheet?

thanks"#header h1" means to assign the following attributes to any H1 element contained within the element whose ID="header".
 
Back
Top