that’s what happens when you position something relatively. It still occupies its original space, but it’s displayed in the coordinates given ( relative to it’s original position).
try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
body {background:#878787}
body {background:#878787}
* {padding:0; margin:0; }
#container {width:927px; margin:0 auto;}
#header {position:relative; overflow:hidden; background:url(images/mockup_07.jpg) no-repeat bottom left;}
#nav {position:absolute; bottom:50px; right:30px; list-style:none;}
#nav li { float:left; }
#nav a { display:block; padding:0 .5em;}
#nav li + li a { border-left:1px solid #000; }
#nav a , h1 a { text-decoration: none; color:#000; font-family:Arial, Helvetica, sans-serif}
h1 { background:url(images/mockup_03.jpg) no-repeat bottom left; padding-left:129px; min-height:157px; float:left; margin-left:17px}
h1 a{ display:block; padding-top:50px; padding-bottom:25px;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="#">A New Site...<br />stuff stuff </a></h1>
<ul id="nav">
<li><a href="index.php">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--header-->
<div id="content">
</div></div>
</body>
</html>
where:
mockup_03.jpg is your logo
and mockup_7.jpg is an image of the top part of your content area (the rounded corners)
Thanks for posting. I have not yet tried this out as I have a few other things I have to get on with first.
One thing I want to mention is that the content area with the rounded corners you see int he image will be a division with css rounded corners and a drop shadow.
Will this have any impact on your code snippet above?
Sorry, yes, I have just noticed that they close those other divs. That’s me being thick. Sorry
I know you can do a shadow like that, I wasn’t asking HOW to do a shadow but STATING that that area will be made with a div and CSS rounded corners and a CSS shadow and wondered if by me doing it that way, would ahve any effect on the snippet of code written above?
Well, like I suggested, and Dresden too, you set the background to the image you posted and have real text positioned within that. The worst thing that you could do is not set up the positioning correctly, so it could look off. Another drawback is if thee text size increases, your layout may break or again look off. Does taht help?
overflow :hidden helps clearing floats. Position relative can do several things; however in the in my specific example , it merely sets the point of origin for any child elements that get position:absolute.
In another words: I set the header position relative, so that when I set #nav to position absolute; bottom:50px; right:30px; … the RIGHT EDGE of #nav is placed 30px from (left of) the right of edge #header, and the BOTTOM EDGE UP 50px from the bottom edge of #header.
If you dont use position:relative on a parent element when you intend to AP child elements, they will end up being positioned from the body element…
Try my code, it’s actually relatively flexible with content amount and flex size.
The containing block for a positioned box is established by the nearest positioned ancestor (or, if none exists, the initial containing block, as in our example)
The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin
That’s kind of retail but they will end up being positioned from the initial containing block, not the body element
The language in the spec can get confusing, as some one new to positioning might assume that using a page wrapper div constitutes a container block…
Candygirl is right tho, but in essence it is the width of the view port. I suppose I could have said a phantom tag prior to the HTML or BODY ( sine is good to note that BODY and HTML DON’T have 100% height by default) …
An update about this. Thanks for your example with this site.
I have decided I want the logo image to be an actual elemtn in the page rather than as an image background therefore I can make it and the text next to it a link back to the homepage.
As you can see, I have floated both the logo image and the h1 to the left. It all is just as I want it except the bottom of the log is cut off due to the overflow property of the #header div. If I remove that overflow property, it all messes up.
It’s hard to tell from that but it looks as though you meant to float the logo but you made it absolute instead. That means it won’t stretch the header and it will get cut off because the header is only as tall as the real content.
The absolute positioning wins out in the above rule and the logo is now removed from the flow and will not stretch the header.
If that’s what you wanted and you want the logo to overlap the header then remove the overflow:hidden from the header and use another clearing mechanism for the floats.
If you meant to float the log as well then that was your problem so remove the absolute positioning.
The image should be in a suitable block container to be semantically and not by itself.
If you want the logo to overlap the header then you probably want to set the height for the header or make sure that existing content creates the header height that you need.
The overflow:hidden should be removed and any floats are cleared with the :after rule I gave you (IE needs haslayout to clear which is why I added a width) .
Then you can place your logo absolutely and it will overlap as required. If the element below the header is position:relative also then you will need to ensure that the header has a higher z-index.
