Log in

View Full Version : problem with div (layers)


vml79
03-06-2008, 01:33 PM
hello,

i have a problem with this code :

<HTML>
<HEAD>



<STYLE type=text/css>.centerdiv {
TEXT-ALIGN: center
}
.centerdiv>div{
MARGIN: 0px auto;
}
</STYLE>


</SCRIPT>

</HEAD>
<BODY>
<DIV class=centerdiv>
<div id=Layer0 style="z-index: 0; position: relative;"> <IMG height=600 src="img.jpg" width=780>
<DIV id=Layer1 style="Z-INDEX: 1; LEFT: 283px; WIDTH: 117px; POSITION: absolute; TOP: 479px; HEIGHT: 44px;">text 1</DIV>
<DIV id=Layer2 style="Z-INDEX: 2; LEFT: 50px; WIDTH: 349px; POSITION: absolute; TOP: 218px; HEIGHT: 115px;">text 2</DIV>
</div>
</DIV>
</BODY>
</HTML>

in internet explorer looks like i wanted to (layer0 centered and layers 1 and 2 related to 0) but in firefox layer 0 is centered and layers 1 and 2 to left...
i read and read for two days and i can't find a solution for this so pls if anyone can help me
Medyman
03-07-2008, 06:07 PM
in internet explorer looks like i wanted to (layer0 centered and layers 1 and 2 related to 0) but in firefox layer 0 is centered and layers 1 and 2 to left...
i read and read for two days and i can't find a solution for this so pls if anyone can help me

It's not clear what you want to do.

It looks like you want to center the content on the page, have the image in layer 0 as a background and the content in layer 1 and 2 above it.

To fix YOUR code, you could simply just add a width to layer 0 so that the content within it isn't overflowing.


<div id=Layer0 style="z-index: 0; position: relative;width:780px;"> <IMG height="600" src="img.jpg" width="780">

Also note the quotes that I added around the width/height of your image. You should really be using CSS for this by the way.


Now, some suggestions:
If what you want to do is indeed what I stated above do this:


<div id='centerdiv'>
<div id='layer1'></div>
<div id='layer2'></div>
</div>

Center center div on the page using this technique: http://www.milov.nl/code/css/verticalcenter.html

Next, you can add a background via CSS so you're not messing with z-index and positioning etc...
http://www.w3schools.com/css/css_background.asp

If you're overlapping layer 1 and 2, you will need to use the absolute positioning and z-index (make sure centerdiv as a CSS value of position:relative if you do this).
http://www.echoecho.com/csslayers.htm

If not, you probably don't need to add any CSS to those divs.


HTH