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.

HTML 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>
<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:

HTML Code:

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.

HTML Code:

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

loserWILL · 22-03-2008, 03:24 PM

Originally Posted by rawritsluke

Try this.

HTML Code:

<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

Originally Posted by rawritsluke

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?

Thread: What the hell?!

Thread Tools

What the hell?!

Posting Permissions