Someone please help me! I'm using Dreamweaver 8. I build the layout in Photoshop, sliced up the images, and I'm using CSS for layout. This is what I'm trying to accomplish: Banner section, then content section. I want my maincontent and my leftside to be able to stretch. And then my footer, and then the bottom of my page.
You can view my page here:
It displays properly in explorer, *except the #maincontent section does not stretch them image, it repeats the image.
Html code:
CSS Code:
I know that I have the height set to 355px in the #leftside and #maincontent sections which is why the image repeats itself. However this is the only way I could get it to display properly. I need the #leftside and #maincontent to be identical in size, so the #footer lines up properly. Can someone please help me understand what I'm doing wrong? If you preview in Firefox or Opera it's not even close.
Thanks,
nofx1728
You can view my page here:
It displays properly in explorer, *except the #maincontent section does not stretch them image, it repeats the image.
Html code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link href="concernedmain.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="flag">
</div>
<div id="rightflag">
</div>
</div>
<div id="side">
<div id="bottomflag">
</div>
<div id="leftside">
</div>
</div>
<div id="content">
<div id="topcontent">
</div>
<div id="maincontent">
</div>
</div>
<div id="footer">
</div>
<div id="bottompage">
</div>
</div>
</body>
</html>CSS Code:
Code:
/* CSS Document */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color:#ffffff;
margin: 0px;
padding: 0px;
}
/*layout*/
#container {
background-color: #0F2E5D;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
margin: 0px auto;
width: 760px;
border-left: #000000 1px solid;
}
/*logo and header*/
#header {
background-color:#FFFFFF;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
height: 93px;
float: left;
width: 760px;
}
#flag {
background-image: url(assets/top_flag.jpg);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
height: 93px;
width: 200px;
float: left;
}
#rightflag {
background-image: url(assets/top_bg.jpg);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
height: 93px;
width: 560px;
float: left;
}
/*end of header*/
/*side*/
#side {
background-color: #0F2E5D;
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 200px;
float: left;
}
#bottomflag {
background-image: url(assets/bottom_flag.jpg);
width: 200px;
float: left;
height: 50px;
}
#leftside {
background-color: #0F2E5D;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 200px;
float: left;
height: 355px;
}
/*end of side*/
/*content*/
#content {
background-color: #0F2E5D;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 560px;
float: left;
}
#topcontent {
background-image: url(assets/top_content.jpg);
width: 560px;
height: 50px;
}
#maincontent {
background-image: url(assets/main_content.jpg);
width: 560px;
color: #000000;
height: 355px;
}
/*end of content*/
/*footer*/
#footer {
background-image: url(assets/cc_footer.jpg);
width: 760px;
height: 25px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
/*end of footer*/
/*bottom page*/
#bottompage {
background-image: url(assets/bottom_page.jpg);
width: 760px;
height: 22px;
}
/*end of bottom page*/
/*text*/
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
/*end of text*/I know that I have the height set to 355px in the #leftside and #maincontent sections which is why the image repeats itself. However this is the only way I could get it to display properly. I need the #leftside and #maincontent to be identical in size, so the #footer lines up properly. Can someone please help me understand what I'm doing wrong? If you preview in Firefox or Opera it's not even close.
Thanks,
nofx1728
. I usually declare all my elements margins to 0px; at the top, and forgot to do it, and it came back to haunt me. Thanks again for all of your help, it is much appreciated.