Forums

JoshWhiteDesign

Hi everyone,

A new site I'm doing is for a travel agency: http://www.citrusbunny.com/testcenter/ds/

Took me a while to totally hammer down getting those little corner folds in front of the picture to show up, but I finally got it so the client can now just upload new photos and it will just pop right in leaving the nice folds.

BUT, one issue I'm having trouble with is that if you collapse the browser, you'll see the corners collapse beyond the wrapper into the body. I've tried a ton of different ways to get the corners to "lock" into place so that when the browser collapses, it doesn't take the corners with it?

Here is what I've kind of got right now is this:


#header {
background-image:url(images/header_bg.png);
background-repeat:no-repeat;
margin:auto;
width:800px;
}

#topcorner {
background-image:url(images/corners.png);
height:396px;
left:50%;
margin-left:-262px;
position:absolute;
width:524px;
z-index:11;
}

#image {
background-repeat:no-repeat;
height:375px;
margin:auto;
padding-top:15px;
width:500px;
}


<div id=\"header\">
<div align=\"center\">
<br/>
<img src=\"images/content_separator.jpg\"/>
</div>
<div id=\"topcorner\"/>
<div id=\"image\">
<div id=\"slideshow\">
<img class=\"\" alt=\"Slideshow Image 1\" src=\"image1.jpg\" style=\"opacity: 1;\"/>
<img class=\"\" alt=\"Slideshow Image 2\" src=\"image2.jpg\" style=\"opacity: 1;\"/>
<img class=\"\" alt=\"Slideshow Image 3\" src=\"image3.jpg\" style=\"opacity: 1;\"/>
</div>
</div>
<div align=\"center\">
<br/>
<img src=\"images/content_separator.jpg\"/>
</div>
</div>

apostrophe

Add this to the css:

#header {
 position: relative;
}

treehouse : what would you like to learn today?

Forums

Absolute Position locking into place?