Hey hows it going I made a few changes to your coding and css here is the coding
CSS Document
Code:
@charset "utf-8";
#container {
margin: 0px;
padding: 0px;
width: 100%;
}
#body_id {
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
}
#header {
margin: 0px;
padding: 0px;
height: 126px;
width: 100%;
background-attachment: scroll;
background-image: url(../images/header_bg.jpg);
background-repeat: repeat-x;
}
#header #header_left {
background-attachment: scroll;
background-image: url(../images/logo.jpg);
background-repeat: no-repeat;
float: left;
height: 126px;
width: 280px;
}
#header #header_right {
height: 126px;
width: auto;
padding: 0px;
float: right;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#header #header_right UL
{
WIDTH: auto;
LIST-STYLE-TYPE: none;
TEXT-ALIGN: left;
height: 57px;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#header #header_right UL LI
{
DISPLAY: inline
}
#header #header_right UL A
{
PADDING-RIGHT: 10px;
DISPLAY: block;
PADDING-LEFT: 10px;
FONT-WEIGHT: bold;
FONT-SIZE: 10px;
FLOAT: right;
PADDING-BOTTOM: 10px;
TEXT-TRANSFORM: uppercase;
WIDTH: 80px;
COLOR: #143294;
PADDING-TOP: 10px;
TEXT-ALIGN: center;
TEXT-DECORATION: none;
background-image: url(../images/button_closed.jpg);
background-repeat: no-repeat;
background-position: center bottom;
background-color: #FFFFFF;
margin-top: 62px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
height: 37px;
}
#header #header_right UL A:hover
{
COLOR: #232323;
background-image: url(../images/button_open.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
#header #header_right UL A.active
{
COLOR: #232323;
background-image: url(../images/button_open.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
#header #header_right UL A.active:hover
{
COLOR: #232323;
background-image: url(../images/button_open.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
#header #header_center {
float: right;
height: 126px;
width: 11px;
background-attachment: scroll;
background-image: url(../images/header_right.jpg);
background-repeat: no-repeat;
}
#content {
width: 100%;
background-attachment: scroll;
background-image: url(../images/main_bg.jpg);
background-repeat: no-repeat;
background-position: right;
background-color: #8ACCFC;
}
#content #content_border {
background-attachment: scroll;
background-image: url(../images/center_right_border.jpg);
background-repeat: no-repeat;
background-position: right top;
float: right;
min-height: 482px;
width: 11px;
background-color: #8CCCFC;
}
* html #content #content_border {
height: 482px;
}
#content #content_left {
float: left;
background-image: url(../images/left_bg.jpg);
background-repeat: repeat-y;
background-attachment: scroll;
height: 482px;
width: 264px;
background-color: #E6E6DE;
}
#content #content_left #content_left_top {
background-attachment: scroll;
background-image: url(../images/center_left.jpg);
background-repeat: no-repeat;
height: 357px;
width: 264px;
}
#content #content_left #content_left_bottom {
background-attachment: scroll;
background-image: url(../images/center_bottom.jpg);
background-repeat: no-repeat;
height: 125px;
width: 264px;
background-color: #FFFFFF;
background-position: top;
}
#content #content_right {
margin-bottom: 0px;
margin-left: 264px;
width: auto;
margin-top: 0px;
margin-right: 0px;
padding-top: 0px;
padding-right: 11px;
padding-bottom: 0px;
padding-left: 0px;
background-attachment: scroll;
background-image: url(../images/roof.jpg);
background-repeat: no-repeat;
background-position: left top;
background-color: #FFFFFF;
}
#content #content_right #fullcontent {
height: auto;
width: auto;
background-attachment: scroll;
background-repeat: no-repeat;
background-position: left top;
padding-left: 15px;
padding-right: 15px;
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
min-height: 482px;
}
* html #content #content_right #fullcontent { height: 482px; }
#footer {
width: 100%;
clear: both;
height: 29px;
background-attachment: scroll;
background-image: url(../images/footer_bg.jpg);
background-repeat: repeat-x;
}
#footer #footer_left {
margin: 0px;
padding: 0px;
float: left;
height: 29px;
width: 278px;
background-attachment: scroll;
background-image: url(../images/footer_left.jpg);
background-repeat: repeat-x;
}
#footer #footer_right {
background-attachment: scroll;
background-image: url(../images/footer_right.jpg);
background-repeat: repeat-x;
float: right;
height: 29px;
margin-right: 0em;
width: 18px;
}
Coding
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 Document</title>
<link href="../css/style.css" rel="stylesheet" type="text/css" />
</head>
<body id="body_id">
<div id="container">
<div id="header">
<div id="header_left"></div>
<div id="header_center"></div>
<div id="header_right">
<ul>
<li><a href="#">Advertise</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Add</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="content_left">
<div id="content_left_top"></div>
<div id="content_left_bottom"></div>
</div>
<div id="content_border"></div>
<div id="content_right">
<div id="fullcontent">
<!-- Start Main Content-->
<!-- End Main Content -->
</div>
</div>
</div>
<div id="footer">
<div id="footer_left"></div>
<div id="footer_right"></div>
</div>
<!-- END CONTAINER -->
</div>
</body>
</html>
I owe you one after the code you gave me