dalecon
asked on
position div tag ontop of another div tag
hi
i have 2 images within div tags on my page - i want both images to be centered. This i have acheived
however i want the the 2nd div tag to be ontop of the first - but still centered
<div>
<img id="centreimage" src="images/image1.png" width="800" height="650px">
<div>
<img id="centreimage" src="images/image2.png" width="700px">
</div>
</div>
CSS
img#centreimage
{
display: block;
margin: 0 auto;
text-align: center;
}
I'm trying to get the images/image2.png ontop of images/image1.png
So both images show but image1 is behind image2
thanks for any help
i have 2 images within div tags on my page - i want both images to be centered. This i have acheived
however i want the the 2nd div tag to be ontop of the first - but still centered
<div>
<img id="centreimage" src="images/image1.png" width="800" height="650px">
<div>
<img id="centreimage" src="images/image2.png" width="700px">
</div>
</div>
CSS
img#centreimage
{
display: block;
margin: 0 auto;
text-align: center;
}
I'm trying to get the images/image2.png ontop of images/image1.png
So both images show but image1 is behind image2
thanks for any help
Or you could relatively place both images (or static if that works for you), then change the z-index to determine which div / image appears on top of the other.
ASKER
<div style="background:url(imag
<div style="background:url(imag
</div>
if i do the above then neither image in centered vertically. the images just show top left
<div style="background:url(imag
</div>
if i do the above then neither image in centered vertically. the images just show top left
Well then just change the background position :)
e.g. left top to center
...no-repeat center;
e.g. left top to center
...no-repeat center;
ASKER
i want both images centered vetically and both images at the top of the page
then i want image2 on top of image1
i don't want to fo absolute position because if a user rezizes their broswer the 2 images won't be centered
any help much appreciated
ASKER
Well then just change the background position :)
e.g. left top to center
...no-repeat center;
I've done this but still is stays top left - it;s ignored
e.g. left top to center
...no-repeat center;
I've done this but still is stays top left - it;s ignored
can you post a link to the page or post all the code please
ASKER
<html>
<head>
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
<body id="homepage">
<div style="background:url(imag
<div style="background:url(imag
</div>
</body>
</html>
CSS
body#homepage
{
background-color: 000000;
}
<head>
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
<body id="homepage">
<div style="background:url(imag
<div style="background:url(imag
</div>
</body>
</html>
CSS
body#homepage
{
background-color: 000000;
}
That works fine for me in ie6... what browser are you viewing in?
Try this code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
<body id="homepage">
<div style="background:url(imag
<div style="background:url(imag
</div>
</body>
</html>
Try this code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
<body id="homepage">
<div style="background:url(imag
<div style="background:url(imag
</div>
</body>
</html>
Ahhhh, you mean the whole thing is not centered in the page???? Another example coming 2 secs
ASKER CERTIFIED SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
ASKER
I'm using IE7
this is very annoying
I can see image1 but can't see image2 it's still behind image1
i've swapped images around so that dix#container has image2 and div#topimage has image1 but still i only see image1
ASKER
i've put z-index in, but this jsut gets ignored as well
It works on my comp in ie7
There is no way that image2 can be behind image1.
z-index only works with positioned elements.
Are you sure that the link to image2 is correct?
if you change the link to image1 so that image1 doesnt appear, can you see image2?
There is no way that image2 can be behind image1.
z-index only works with positioned elements.
Are you sure that the link to image2 is correct?
if you change the link to image1 so that image1 doesnt appear, can you see image2?
ASKER
yep
Is this page or can this page be on the web?
ASKER
no something i'm developing on my local machiine
ASKER
fixed it - i won't say what it was because i feel a bit silly
Thank you ever so much for your time and examples, much appreciated
lol no probs :)
The easiest way to do this would be to use background images..
<div style="background:url(imag
<div style="background:url(imag
</div>
Regards
Steggs