loserWILL
22-03-2008, 12:40 AM
I have the following code, and it's not 'expanding'. The background image I have set isn't getting bigger (height wise) when content is added.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>kolzy : what are you waiting for?</title>
<style type="text/css">
body {
background: #b61717;
font-family: "Trebuchet MS";
font-size: 14px;
color: #4e4e4e;
text-align: left;
margin: 0;
}
body a:link{
font-family: "Trebuchet MS";
font-size: 14px;
color: #4e4e4e;
text-decoration: none;
font-weight: bold;
}
body a:hover{
font-family: "Trebuchet MS";
font-size: 14px;
color: #4e4e4e;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
}
body a:visited{
font-family: "Trebuchet MS";
font-size: 14px;
color: #4e4e4e;
text-decoration: none;
font-weight: bold;
}
#wrapper {
width: 676px;
margin-top: 100px;
}
#main_top {
background-image: url(images/main_top.png);
width: 676px;
height: 30px;
}
#main_middle {
background-image: url(images/main_middle.png);
width: 676px;
}
#logo {
background-image: url(images/logo.png);
width: 252px;
height: 40px;
float: right;
margin-right: 25px;
}
</style>
</head>
<body>
<div align="center">
<div id="wrapper">
<!-- TOP IMAGE START -->
<div id="main_top"></div>
<!-- TOP IMAGE END -->
<!-- MAIN CONTENT START -->
<div id="main_middle">
<!-- LOGO START -->
<div id="logo"></div>
<!-- LOGO END -->
<!-- PROMO IMAGE START -->
<div id="promo"></div>
<!-- PROMO IMAGE END -->
<!-- LEFT CONTENT START -->
<div id="left_content">
</div>
<!-- LEFT CONTENT END -->
<!-- RIGHT CONTENT START -->
<div id="right_content">
</div>
<!-- RIGHT CONTENT END -->
</div>
<!-- MAIN CONTENT END -->
</div>
</div>
</body>
</html>
Any help is appreciated and'll get +rep.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>kolzy : what are you waiting for?</title>
<style type="text/css">
body {
background: #b61717;
font-family: "Trebuchet MS";
font-size: 14px;
color: #4e4e4e;
text-align: left;
margin: 0;
}
body a:link{
font-family: "Trebuchet MS";
font-size: 14px;
color: #4e4e4e;
text-decoration: none;
font-weight: bold;
}
body a:hover{
font-family: "Trebuchet MS";
font-size: 14px;
color: #4e4e4e;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
}
body a:visited{
font-family: "Trebuchet MS";
font-size: 14px;
color: #4e4e4e;
text-decoration: none;
font-weight: bold;
}
#wrapper {
width: 676px;
margin-top: 100px;
}
#main_top {
background-image: url(images/main_top.png);
width: 676px;
height: 30px;
}
#main_middle {
background-image: url(images/main_middle.png);
width: 676px;
}
#logo {
background-image: url(images/logo.png);
width: 252px;
height: 40px;
float: right;
margin-right: 25px;
}
</style>
</head>
<body>
<div align="center">
<div id="wrapper">
<!-- TOP IMAGE START -->
<div id="main_top"></div>
<!-- TOP IMAGE END -->
<!-- MAIN CONTENT START -->
<div id="main_middle">
<!-- LOGO START -->
<div id="logo"></div>
<!-- LOGO END -->
<!-- PROMO IMAGE START -->
<div id="promo"></div>
<!-- PROMO IMAGE END -->
<!-- LEFT CONTENT START -->
<div id="left_content">
</div>
<!-- LEFT CONTENT END -->
<!-- RIGHT CONTENT START -->
<div id="right_content">
</div>
<!-- RIGHT CONTENT END -->
</div>
<!-- MAIN CONTENT END -->
</div>
</div>
</body>
</html>
Any help is appreciated and'll get +rep.