QUOTE(thehat @ 3 Apr, 2008 - 01:52 AM)
Like Chris says above, you just use three divs, where the top and bottom are of a fixed height with their backgrounds set to no-repeat and the middle one has no fixed height and its background-repeat set to repeat-y.
The reason this isn't currently going to work for you is because you are using absolute positioning on each of your divs, and you are forcing the height of the center div. You should instead absolutely position your wrapper, and then have the other divs set up like this:
CODE
<div id="wrapper">
<div id="topArea"> </div>
<div id="centerArea">
<!-- All your content goes here -->
</div>
<div id="botArea"> </div>
</div>
And the css like this:
CODE
#wrapper {
position: absolute;
left: 12%;
top: 4%;
width: 950px;
height: 170px;
}
#topArea {
height: 52px;
background: url(images/bordertop.gif) 0 0 no-repeat;
}
#centerArea {
background: url(images/middle2.gif 0 0) repeat-y;
}
#botArea {
height: 52px;
background: url(images/borderbottom.gif) 0 0 no-repeat;
}
Personally, I would never use tables for layout formatting as suggested above because it generates loads of unnecessary code, it messes around with screen readers and other accessibility devices and it is against W3C specifications.
Hope that helps
Thanks for that mate, that is the idea i was looking for, however i still can't get it to work properly. I am also trying to place a couple of items within this area now. These are a banner and menu bar. The code i am using doesn't seem to repeat the middle border part at all. At present all i can see is the topborder, banner and menu.
Would be grateful if you could point out what im doing wrong. Cheers
CSS
CODE
body
{
margin: 0;
font: 0.7em/1.6em verdana, arial, helvetica, sans-serif;
background: #211d1d url(images/bg.jpg) repeat-x 0% 0%;
letter-spacing: 1px;
color: #1c3b5a;
}
#wrapper
{
position: absolute; top: 35px; right: 80px;
width: 1050px;
}
#bordertop
{
height: 52px;
background: url(images/bordertop.gif) no-repeat 0% 0%;
}
#bordermiddle
{
background: url(images/middle2.gif) repeat-y 0% 0%;
}
#borderbottom
{
height: 52px;
background: url(images/borderbottom.gif) no-repeat 0% 0%;
}
#contenttest
{
z-index:1;
font-size:x-large;
color:White
}
#header
{
height: 200px;
background: url(images/smashbanner2.png) no-repeat 0% 0%;
z-index:1;
}
#menu
{
height: 81px;
width: 882px;
float: left;
z-index:1;
}
HTML
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<link rel="stylesheet" href="StyleSheet.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="bordertop">
</div>
<div id="bordermiddle">
<div id="header" style="position: absolute; left: 3.5%; top: 30%; width: 100%; height: 200px;">
</div>
<div id="menu" style="position: absolute; left: 3%; top: 320%;">
<img src="Images/images/home_btn.png" alt="" /><img src="Images/images/artists_btn.png" alt="" /><img src="Images/images/shop_btn.png" alt="" /><img src="Images/images/events_btn.png" alt="" /><img src="Images/images/listen_btn.png" alt="" /><img src="Images/images/contact_btn.png" alt="" />
</div>
<div id="contenttest" style="position: absolute; left:5%; top:30%;">
</div>
</div>
<!--<div id="borderbottom"> </div>-->
</div>
</body>
</html>
| 