loserWILL
22-12-2007, 07:29 PM
I've coded the layout for my upcoming script, just one problem. The big "copyright" DIV (the one with the red top) isn't staying at the bottom. Here's my code, and a screenshot of what it looks like. +rep to any suggestions and help.
Image:
http://www.fovq.com/site/december%202007/huh.gif
Code:
<style type="text/css">
body {
background-image: url(images/bg.gif);
margin-top: 0;
font-family: "Trebuchet MS";
font-size: 12px;
}
body a:link {
text-decoration: none;
}
body a:hover {
text-decoration: none;
font-weight: bold;
}
#banner {
background-image: url(images/banner.gif);
width: 800px;
height: 155px;
}
#main {
width: 750px;
}
#navigation_wrap {
width: 166px;
margin-top: 35px;
float: left;
}
#navigation_top {
background-image: url(images/navigation_top.gif);
width: 166px;
height: 35px;
}
#navigation_middle {
background-image: url(images/navigation_middle.gif);
width: 166px;
}
#navigation_bottom {
background-image: url(images/navigation_bottom.gif);
width: 166px;
height: 11px;
}
#content_wrap {
width: 439px;
margin-left: 50px;
float: right;
margin-top: 35px;
}
#content_top {
background-image: url(images/content_top.gif);
width: 439px;
height: 35px;
}
#content_middle {
background-image: url(images/content_middle.gif);
width: 439px;
}
#content_bottom {
background-image: url(images/content_bottom.gif);
width: 439px;
height: 11px;
}
#copyright_wrap {
width: 658px;
margin-top: 50px;
}
#copyright_top {
background-image: url(images/copyright_top.gif);
width: 658px;
height: 35px;
}
#copyright_middle {
background-image: url(images/copyright_middle.gif);
width: 658px;
}
#copyright_bottom {
background-image: url(images/copyright_bottom.gif);
width: 658px;
height: 11px;
}
</style>
</head>
<body>
<!-- the banner -->
<div align="center">
<div id="banner" align="center"></div>
</div>
<!-- this'll hold the content -->
<div align="center">
<div id="main">
<!-- the navigation -->
<div id="navigation_wrap">
<div id="navigation_top"></div>
<div id="navigation_middle"></div>
<div id="navigation_bottom"></div>
</div>
<!-- the content -->
<div id="content_wrap">
<div id="content_top"></div>
<div id="content_middle"></div>
<div id="content_bottom"></div>
</div>
<!-- the copyright - DO NOT REMOVE - READ THE README FILE FOR MORE INFORMATION ON REMOVING THE COPYRIGH -->
<div id="copyright_wrap">
<div id="copyright_top"></div>
<div id="copyright_middle"></div>
<div id="copyright_bottom"></div>
</div>
</div>
</div>
Image:
http://www.fovq.com/site/december%202007/huh.gif
Code:
<style type="text/css">
body {
background-image: url(images/bg.gif);
margin-top: 0;
font-family: "Trebuchet MS";
font-size: 12px;
}
body a:link {
text-decoration: none;
}
body a:hover {
text-decoration: none;
font-weight: bold;
}
#banner {
background-image: url(images/banner.gif);
width: 800px;
height: 155px;
}
#main {
width: 750px;
}
#navigation_wrap {
width: 166px;
margin-top: 35px;
float: left;
}
#navigation_top {
background-image: url(images/navigation_top.gif);
width: 166px;
height: 35px;
}
#navigation_middle {
background-image: url(images/navigation_middle.gif);
width: 166px;
}
#navigation_bottom {
background-image: url(images/navigation_bottom.gif);
width: 166px;
height: 11px;
}
#content_wrap {
width: 439px;
margin-left: 50px;
float: right;
margin-top: 35px;
}
#content_top {
background-image: url(images/content_top.gif);
width: 439px;
height: 35px;
}
#content_middle {
background-image: url(images/content_middle.gif);
width: 439px;
}
#content_bottom {
background-image: url(images/content_bottom.gif);
width: 439px;
height: 11px;
}
#copyright_wrap {
width: 658px;
margin-top: 50px;
}
#copyright_top {
background-image: url(images/copyright_top.gif);
width: 658px;
height: 35px;
}
#copyright_middle {
background-image: url(images/copyright_middle.gif);
width: 658px;
}
#copyright_bottom {
background-image: url(images/copyright_bottom.gif);
width: 658px;
height: 11px;
}
</style>
</head>
<body>
<!-- the banner -->
<div align="center">
<div id="banner" align="center"></div>
</div>
<!-- this'll hold the content -->
<div align="center">
<div id="main">
<!-- the navigation -->
<div id="navigation_wrap">
<div id="navigation_top"></div>
<div id="navigation_middle"></div>
<div id="navigation_bottom"></div>
</div>
<!-- the content -->
<div id="content_wrap">
<div id="content_top"></div>
<div id="content_middle"></div>
<div id="content_bottom"></div>
</div>
<!-- the copyright - DO NOT REMOVE - READ THE README FILE FOR MORE INFORMATION ON REMOVING THE COPYRIGH -->
<div id="copyright_wrap">
<div id="copyright_top"></div>
<div id="copyright_middle"></div>
<div id="copyright_bottom"></div>
</div>
</div>
</div>