PDA

View Full Version : leyer with background image not visibe


Kostaben
05-26-2007, 06:12 PM
Hello everyone.

I've put in my mage a layer with a background image and nothing else in it. Well, it doesnt appear on the browser. If i write a line of text in the layer then is visible only the part of the background that is behind the text.
Whats going on?

Thanx

Andromeda
05-26-2007, 08:08 PM
Kostaben

Please post the code of your page so that we can see what's going on.

Kostaben
05-26-2007, 09:32 PM
Here it is.

.<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:20px;
top:10px;
width:605;
height:120;
z-index:1;
}
body {
background-color: #3F581F;
}
#Layer2 {
position:absolute;
left:545px;
top:264px;
width:209px;
height:37px;
z-index:1;
}
.style1 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 24px;
color: #99CC33;
}
#Layer3 {
position:absolute;
left:48px;
top:296px;
width:78px;
height:74px;
z-index:1;
background-image: url(images/ojos%20del%20salado_top.jpg);
}
#Layer4 {
position:absolute;
left:41px;
top:301px;
width:100;
height:90;
z-index:1;
background-image: url(images/aventura/mountainbike.jpg);
visibility: visible;
}
#expedicion {
position:absolute;
left:47px;
top:417px;
width:100;
height:90;
z-index:2;
visibility: visible;
}
#aventura {
position:absolute;
left:46px;
top:300px;
width:100;
height:90;
z-index:3;
visibility: visible;
}
#tradicional {
position:absolute;
left:43px;
top:527px;
width:100;
height:90;
z-index:4;
background-image: url(images/tradicional/AZE009.jpg);
}
-->
</style>
</head>

<body>
<div id="expedicion"><img src="images/expedicion/patagonia trek_top.jpg" alt="image" width="100" height="90" /></div>
<div id="aventura"><img src="images/aventura/mountainbike.jpg" width="100" height="90" /></div>
<div id="tradicional"></div>
<table width="657" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->

<tr>
<td width="7"></td>
<td width="642"></td>
<td width="8"></td>
</tr>
<tr>
<td></td>
<td align="center" valign="top" nowrap="nowrap"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="614" height="123" align="middle" title="cabeza">
<param name="movie" value="flash/cabezafinal.swf" />
<param name="quality" value="high" />
<embed src="flash/cabezafinal.swf" width="614" height="123" align="middle" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3" align="center" valign="top"><div align="center"><img src="images/mainpage/mainpage.jpg" width="640" height="645" border="0" usemap="#Map" /></div></td>
</tr>
<tr>
<td>&nbsp;</td>
<td></td>
<td></td>
</tr>
</table>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
<map name="Map" id="Map">
<area shape="rect" coords="429,10,462,25" href="index.html" />
<area shape="rect" coords="483,10,557,25" href="http://www.google.com" />
<area shape="rect" coords="574,11,618,24" href="#" />
<area shape="rect" coords="473,71,626,101" href="index.html" />
</map>
</p>
</body>
</html>



The "tadicional" layer its not visible.
And i have another problem. The position of the layer its a bit diferent in Mozilla and in Explorer.

Thanx Andromeda

Andromeda
05-27-2007, 02:06 AM
I'm very baffled by this. Hopefully someone will come up with an answer.

What does work though, is if you put the text in the "tadicional" div rather than in the layer.

i.e.
<div id="tradicional">put your text here</div>

but why your background image isn't showing I don't know - sorry.

chriskq
05-27-2007, 11:20 AM
its simple.

you have no realtive container.

any element postioned absolute has to be inside a parent div that is positioned relative.

Kostaben
05-27-2007, 06:50 PM
I'm sorry i didn't get it. Can you give some details about that?

thanks

chriskq
05-28-2007, 01:36 AM
take a step back.
Why are you using absolute positioning? (ie, creating layers).

Kostaben
05-28-2007, 11:54 PM
Thank you for the reply.

I took a step back, and i made it using tables and puting the images directly but with this, i have always a problem with different positioning at diferent browsers.
Ok. i'll put this in a new thread to avoid chaos.