PDA

View Full Version : Brain fried, need dynamic CSS help



boogily
Jan 11th, 2011, 05:00 AM
Overall I want a content container to look like
http://www.happydogwebproductions.com/mdkiosk/contentContainer.png

So, to make this dynamic vertically, i chose to create a header image, have the middle repeat, and have the footer image. Here is the header image
http://www.happydogwebproductions.com/mdkiosk/contentTopBkg.png
The problem is, when I create the content in the middle with the repeating background, it starts under the header, leaving way to big of a gap. But if I position it up, that background covers the header and screws that up. I need a way to have the content I create expand the middle, keep the header and footer the same, and all be on one layer. :confused:

Excavator
Jan 11th, 2011, 06:14 AM
Hello boogily,
You can make the page with that single image, similar to the way you make sprites.
See an example here (http://nopeople.com/CSS%20tips/slider/index.html).

I could easily be done using your 3 images too. Put a containing div in the middle div that presents your repeat-y image and move it into the header/footer divs with negative margins.
I made a little example quoted below. It should work for you with the right image (I just used the ones in your original post).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #FC6;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333;
}
#container {
width: 979px;
margin: 30px auto;
background: url(http://www.happydogwebproductions.com/mdkiosk/contentContainer.png);
overflow: auto;
}
#header {
height: 172px;
background: url(http://www.happydogwebproductions.com/mdkiosk/contentTopBkg.png);
overflow: auto; /*to kill the uncollapsing margin*/
text-align: center;
}
#header h1 {margin: 10px 0;}
#content {
width: 919px;
margin: -130px auto 0; /*adjust bottom margin the same way for footer*/
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>WEBSITE TITLE</h1>
<!--end header--></div>
<div id="content">
<p>
First word Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
<br /><br /><br />
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
<br /><br /><br />
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
<br /><br /><br />
<br /><br /><br />
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
<br /><br /><br />
<br /><br /><br />
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
<br /><br /><br />
<br /><br /><br />
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<br /><br /><br />
<br /><br /><br />
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
<br /><br /><br />
<br /><br /><br />
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end content--></div>
<!--end container--></div>
</body>
</html>

boogily
Jan 11th, 2011, 07:36 AM
Thanks for the reply. The issue that I am trying to battle is the rounded corners. If I use a repeat-y element for the area that contains the content it will show under the .png rounded corners...

boogily
Jan 11th, 2011, 07:43 AM
Solved, almost. Used overflow visible, negative margins. but now the shadow in the .png doubles. ugh

boogily
Jan 11th, 2011, 07:49 AM
Solved. I'm just going to have to avoid .pngs for this.