Log in

View Full Version : What the hell?!


loserWILL
22-03-2008, 03:13 PM
In my following code, I want the main content part (div id "main_content") to expand, so as the text gets bigger (height wise) the background image increases too.

But for some reason it isn't. Any help is appreciated.


<!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;
margin-bottom: 10px;
}

#promo {
background-image: url(images/promo_image.png);
width: 630px;
height: 157px;
overflow: hidden;
clear: both;
}

#left_content {
text-align: left;
float: left;
width: 410px;
margin: 15px;
}

#right_content {
width: 185px;
float: right;
margin-right: 15px;
margin-top: 15px;
}
</style>

</head>

<body>
<div align="center">
<div id="wrapper">

<!-- TOP IMAGE START -->
<div id="main_top">&nbsp;</div>
<!-- TOP IMAGE END -->

<!-- MAIN CONTENT START -->
<div id="main_middle">

<!-- LOGO START -->
<div id="logo">&nbsp;</div>
<!-- LOGO END -->

<!-- PROMO IMAGE START -->
<div id="promo">&nbsp;</div>
<!-- PROMO IMAGE END -->

<!-- LEFT CONTENT START -->
<div id="left_content">
&nbsp; tgg
</div>
<!-- LEFT CONTENT END -->

<!-- RIGHT CONTENT START -->
<div id="right_content">
&nbsp;
</div>
<!-- RIGHT CONTENT END -->
&nbsp;
</div>
<!-- MAIN CONTENT END -->

</div>
</div>
</body>

</html>
rawritsluke
22-03-2008, 03:16 PM
Do you mean main middle because I don't see a main_content in your div id's lol.
Anyway if it is the middle just try:

background-repeat: repeat-y;?
loserWILL
22-03-2008, 03:19 PM
Yes, I meant main_middle sorry.

Also, that didn't work.
rawritsluke
22-03-2008, 03:22 PM
Try this.


<div id="main_middle">whatever here</div>
loserWILL
22-03-2008, 03:24 PM
Try this.


<div id="main_middle">whatever here</div>

If I take out all the DIVs that are inside of it, then it expands fine. I don't know why it doesn't expand with all the DIVs and the text.
rawritsluke
22-03-2008, 03:26 PM
Yeah but you have no bottom to your image so that could be why?
Also theres a space in your middle_top or whatever the div is, could be why.
Just take out the divs and leave it :)
loserWILL
22-03-2008, 03:32 PM
Yeah but you have no bottom to your image so that could be why?
Also theres a space in your middle_top or whatever the div is, could be why.
Just take out the divs and leave it :)


No, that doesn't fix it.
rawritsluke
22-03-2008, 03:46 PM
Hmm maybe it's just I'm not that experienced in divs yet, other than that I can't see a problem, maybe put up an online preview? I could see then.
loserWILL
22-03-2008, 03:52 PM
Here: www.kolzy.com/prob
rawritsluke
22-03-2008, 04:16 PM
Could be because your typing in the left_content and not the main_middle? :P
Invent
22-03-2008, 06:17 PM
#main_middle
{
background-image:url(images/main_middle.png);
background-repeat:repeat-y;
clear:both;
overflow:hidden;
width:676px;
}

Want to hide these adverts? Register an account for free!