posición de capas

xinxan22 · #1 (**permalink**) 07/03/2012, 04:48

Buenos días,

tengo dos capas y me gustaría mostrar una dentro de otra.

Una capa es un marco sin fondo, la otra capa es un fondo negro por ejemplo.

El problema es que la capa contenido queda por encima de la capa marco.

Lo tengo de la siguiente manera:

Código HTML:

<style>
		div.capa_marco_m{
		  background-image: url('img/marco.png');
		  background-repeat: no-repeat;
		  width: 830px;
		  height: 550px;
		  z-index: 10;
		}
		div.capa_contenido_m{
		  background-color:#000000;
		  width: 699px;
		  height: 446px;
		  position: relative;
		  top: 56px;
		  left: 63px;
		  z-index: 1;
		}
</style>


<table cellpadding="0" cellspacing="0">
<tr>
<td width="90"></td>
<td><div class="capa_marco_m"><div class="capa_contenido_m">CONTENIDO</div></div></td>
<td width="60"></td>
</tr>
</table>

Gracias un saludo

xinxan22 · #2 (**permalink**) 07/03/2012, 05:01

Encontré como hacerlo en la siguiente página:

http://www.webestilo.com/foros/mensa...o=16&msg=38905

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

<html>
<head>
 <title>Untitled</title>
 <style type="text/css">
  #contenedor {
   width: 90px;
   position: relative;
   margin: 0px auto; 
  }
  #capa1 {
   position: absolute;
   left: 0;
   top: 0;
   width: 90px;
   color: red;
   z-index: 2;
  }
  #capa2 {
   position: absolute;
   left: 0;
   top: 0;
   width: 90px;
   color: black;
   z-index: 1;
  }
 </style>
</head>

<body>

<div id="contenedor">
 <div id="capa1">
  sdfhsdfhsdfh<br />
  ertwtwetwre<br />
  wetwetwet
 </div>
 <div id="capa2">
  srgreghwerhr<br />
  xfgfghxfgh<br />
  xfghxfghxfg
 </div>
</div>

</body>
</html>

Por cierto recomiendand lo siguiente: "Ah, y no olvides usar XHTML Strict como DOCTYPE."

Yo no lo estoy usando, que significa eso?

Un saludo

apaxito · #3 (**permalink**) 08/03/2012, 06:11

Vas a tener problemas con diferentes navegadores (sí lo indicas en tu primera línea

). Este mensaje hubiera quedado mejor en el hilo de CSS.