More div problems

Jimuniguy · Aug 21, 2002

Hi,

This is driving me nuts, I have designed with <div> tags before but with no problem, maybe its something in the drinking water.

Basically when you load this code, you will see what I am trying to do, but the yellow background wont strech any futher and it needs to incoperate that blue box.

Why is it going wrong for????

Code:

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;>
<html>
<head>
<style type=&quot;text/css&quot;>
<!--
.test {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #999999;
}
-->
</style>
</head>

<body>

<div id=&quot;backgr&quot; style=&quot;position:relative; left: 0px;  top: 200px; width:100%; height:400px z-index:9; background-color: #ffffcc; layer-background-color: #ffffcc; border: 1px none #000000;&quot;>
	
<div id=&quot;Layer1&quot; style=&quot;position:relative; Left: 25px; top: 25px;  width:50px; height:50px; z-index:1; background-color: #999900; layer-background-color: #999900; border: 1px none #000000;&quot;>
<div id=&quot;Layer2&quot; style=&quot;position:relative; Left: 75px; width:50px; height:50px; z-index:2;  background-color: #CC3366; layer-background-color: #CC3366; border: 1px none #000000;&quot;>
<div id=&quot;Layer3&quot; style=&quot;position:relative; Left: 75px; width:50px; height:50px; z-index:3;  background-color: #99CC66; layer-background-color: #99CC66; border: 1px none #000000;&quot;>
</div>
</div>
</div>

<div id=&quot;Layer5&quot; style=&quot;position:relative; left: 25px; top: 50px;  width:50px; height:50px; z-index:4; background-color: #ccffcc; layer-background-color: #ccffcc; border: 1px none #000000;&quot;>
<div id=&quot;Layer6&quot; style=&quot;position:relative; left: 75px; top: 0px;   width:50px; height:50px; z-index:5; background-color: #ccffcc; layer-background-color: #ccffcc; border: 1px none #000000;&quot;>

</Div>
</Div>


<div id=&quot;Layer7&quot; style=&quot;position:relative; left: 25px; top: 75px;  width:50px; height:50px; z-index:6; background-color: #0033cc; layer-background-color: #0033cc; border: 1px none #000000;&quot;> 
</div>
</div>
</body>
</html>

Cheers

James

twcman · Aug 21, 2002

Sometimes it does take a second pair of eyes to find things. You missed a ';' after the height and before the zindex properties in your first div statement.

<div id="backgr" style="position:relative; left: 0px; top: 200px; width:100%; height:400; px z-index:9; background-color: #ffffcc; layer-background-color: #ffffcc; border: 1px none #000000;">
The only dumb questions are the ones that are never asked

mithrilhall · Aug 21, 2002

I see the problem (I think)

<div id="backgr" style="position:relative; left: 0px; top: 200px; width:100%; height:400px z-index:9; background-color: #ffffcc; layer-background-color: #ffffcc; border: 1px none #000000;">

You have no semi-colon after the height. ====================================
I love people. They taste just like
chicken!

twcman · Aug 21, 2002

Sorry, should have been after the px;

<div id="backgr" style="position:relative; left: 0px; top: 200px; width:100%; height:400px; z-index:9; background-color: #ffffcc; layer-background-color: #ffffcc; border: 1px none #000000;">
The only dumb questions are the ones that are never asked

Jimuniguy · Aug 21, 2002

Hi,

Hehe you both spotted it.

Thanks, its silly I had all the code lined up in dreamweaver and hunted all away along for things like that.

Hence therefore, is there anyway to get that first div tag dynamically incoperate all thoose boxes or do i need to put a fixed hieght on it?

Cheers

starway · Aug 21, 2002

If you remove all z-indexes you'll see that nothing is changed. That means that they are useless. Also, what is this: "[tt]layer-[/tt]"?
Clean up your code, there are multiple declarations for background styles.

To say truth, I don't know what the problem is. I played a little with your page but didn't find the source of problem.
Remove two first rows of squares - you'll see that the last blue one is not inside the "backgr" div!

Jimuniguy · Aug 21, 2002

Hi,

At present all the background colours are there cos I need to see what is going on, that will all get stripped as will the Z layers 2.

I know that blue one is not inside but it should be as there is no closing div tag

So why is it not??????

The IDs are needed unfortunatley for other refferencing and must be left in, i will swap them out for suitable names.

Cheers

James

RISTMO · Aug 21, 2002

Here is the working code you want. I will make two posts as I am not sure what the limit of characters is here.
1. My edited version that works:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">

</style>
</head>
<body>
<div id="backgr" style="position:relative; left: 0px; top: 200px; width:100%; height:250px; z-index:0; background-color: #ffffcc; layer-background-color: #ffffcc; border: 1px none #000000;">
<div id="Layer1" class="square" style="Left: 25px; top: 25px; background-color: #999900; layer-background-color: #999900;">
<div id="Layer2" class="square" style="Left: 75px; background-color: #CC3366; layer-background-color: #CC3366;">
<div id="Layer3" class="square" style="Left: 75px; background-color: #99CC66; layer-background-color: #99CC66;">
</div>
</div>
</div>
<div id="Layer5" class="square" style="Left: 25px; top: 50px; background-color: #ccffcc; layer-background-color: #ccffcc;">
<div id="Layer6" class="square" style="Left: 75px; top: 0px; background-color: #ccffcc; layer-background-color: #ccffcc;">
</Div>
</Div>
<div id="Layer7" class="square" style="Left: 25px; top: 75px; background-color: #0033cc; layer-background-color: #0033cc;">
</div>
</div>
</body>
</html>

Rick if(($question=="has been bugging me"
AND $answer=="fixed the problem&quot

OR $answer=="really good post&quot

{
print("Star&quot

;
}else{
print("Thanks.&quot

;
}

RISTMO · Aug 21, 2002

2. Your code that works now on IE 6.0:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
.test {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999999;
}
</style>
</head>

<body>

<div id="backgr" style="position:relative; left: 0px; top: 200px; width:100%; height:400px; z-index:9; background-color: #ffffcc; layer-background-color: #ffffcc; border: 1px none #000000;">

<div id="Layer1" style="position:relative; Left: 25px; top: 25px; width:50px; height:50px; z-index:1; background-color: #999900; layer-background-color: #999900; border: 1px none #000000;">
<div id="Layer2" style="position:relative; Left: 75px; width:50px; height:50px; z-index:2; background-color: #CC3366; layer-background-color: #CC3366; border: 1px none #000000;">
<div id="Layer3" style="position:relative; Left: 75px; width:50px; height:50px; z-index:3; background-color: #99CC66; layer-background-color: #99CC66; border: 1px none #000000;">
</div>
</div>
</div>

<div id="Layer5" style="position:relative; left: 25px; top: 50px; width:50px; height:50px; z-index:4; background-color: #ccffcc; layer-background-color: #ccffcc; border: 1px none #000000;">
<div id="Layer6" style="position:relative; left: 75px; top: 0px; width:50px; height:50px; z-index:5; background-color: #ccffcc; layer-background-color: #ccffcc; border: 1px none #000000;">

</Div>
</Div>

<div id="Layer7" style="position:relative; left: 25px; top: 75px; width:50px; height:50px; z-index:6; background-color: #0033cc; layer-background-color: #0033cc; border: 1px none #000000;">
</div>
</div>
</body>
</html>

I would use the first version.

Rick if(($question=="has been bugging me"
AND $answer=="fixed the problem&quot

OR $answer=="really good post&quot

{
print("Star&quot

;
}else{
print("Thanks.&quot

;
}

starway · Aug 21, 2002

ristmo2001, it's not a big deal to addd [tt]height[/tt] property to the <div id="backgr"> style.

Your solution doesn't answer the question: why <div id="backgr"> doesn't fill all 3 rows of squares?

RISTMO · Aug 22, 2002

Did you test my code? In IE 6.0, it DOES fill all three rows. Also, why type out:
position:relative;width:50px;height:50px;z-index:1;
7 times when you could type just type out:
class="square"

Rick if(($question=="has been bugging me"
AND $answer=="fixed the problem&quot

OR $answer=="really good post&quot

{
print("Star&quot

;
}else{
print("Thanks.&quot

;
}

Jimuniguy · Aug 22, 2002

Hi,

But I need that bit to work in IE 5.5

Thanks for your help so far though!

James

RISTMO · Aug 24, 2002

Why doesn't it? It works fine in IE 5.5 here.

Rick if(($question=="has been bugging me"
AND $answer=="fixed the problem&quot

OR $answer=="really good post&quot

{
print("Star&quot

;
}else{
print("Thanks.&quot

;
}

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

More div problems

Jimuniguy

Technical User

twcman

Programmer

mithrilhall

Programmer

twcman

Programmer

Jimuniguy

Technical User

starway

Programmer

Jimuniguy

Technical User

RISTMO

Programmer

RISTMO

Programmer

starway

Programmer

RISTMO

Programmer

Jimuniguy

Technical User

RISTMO

Programmer

Similar threads

Part and Inventory Search

Sponsor