Forum Moderators: not2easy
The css is defined as:
<style type="text/css">
.topLevel { position:absolute; z-index: 0;}
.imgA1 { position: absolute; z-index: 1; }
.imgB1 { position: absolute; top: 45px; left: 25px; z-index: 2; }
.imgB2 { position: absolute; top: 157px; left: 157px; z-index: 2; }
</style>
and is used as follows:
<div class=topLevel>
<img class=imgA1 src="mini.JPG">
<img name="rotating_picture1" class=imgB1 src="start.gif">
<img name="rotating_picture2" class=imgB2 src="Copy of start.gif">
</div>
Many thanks in advance. I'd post a link to my webpage where I'm trying to get this to work, but I don't think URLs are allowed :(
Best wishes
Paul
position: absolute gives an element "position" AND removes it from the flow
That's going to cause it to overlap onto things following this fragment.
What you want: an outer element (e.g. you div) that has position:relative (instead of absolute) so it does gain position, but doesn't loose it's place in the flow.
I'd seriously consider to give the background image as a CSS background to the div (and give it the right size); and then just position the other two elements inside that. That would also eliminate any need for setting the z-index.
[edited by: swa66 at 10:07 pm (utc) on Nov. 17, 2009]
<style type="text/css">
.topLevel2 { position:relative; height: 425px; width: 369px; background-image: url('mini.JPG'); }
.imgB1a { position: absolute; top: 45px; left: 25px; }
.imgB2a { position: absolute; top: 157px; left: 157px; }
</style>
and in the html file:
<div class=topLevel2>
<img name="rotating_picture1" class=imgB1a src="start.gif">
<img name="rotating_picture2" class=imgB2a src="Copy of start.gif">
</div>
This displays the background image in the div, but it doesn't display the two images on top of this even if I do specify their z-order in the css for imgB1a and imgB2a
Best wishes
Paul
e.g. you cannot use spaces in a URL, you need to encode that.
Also URLs are cases sensitive beyond the the host part
Anyway, this works for me (I added some dimensions on the two internal images as my test images are quite large)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.topLevel2 {
position: relative;
height: 425px;
width: 369px;
background-image: url('1.jpg');
}
.imgB1a {
position: absolute;
top: 45px;
left: 25px;
width: 100px;
height: 100px;
}
.imgB2a {
position: absolute;
top: 157px;
left: 157px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p>BEFORE</p>
<div class="topLevel2">
<img alt="rotating_picture1" class="imgB1a" src="2.jpg" />
<img alt="rotating_picture2" class="imgB2a" src="3.jpg" />
</div>
<p>AFTER</p>
</body>
</html>
Paul
