Foros del Web » Creando para Internet » CSS »

capas superpuestas

Estas en el tema de capas superpuestas en el foro de CSS en Foros del Web. hola gente, estoy tratando de hacer que una capa se superponga a otra. Algo asi: [URL="http://gabrieled209.aloja2.info/"]http://gabrieled209.aloja2.info/[/URL] Pero la pagina que se carga en la capa ...
  #1 (permalink)  
Antiguo 31/01/2010, 11:25
 
Fecha de Ingreso: noviembre-2003
Mensajes: 22
Antigüedad: 21 años
Puntos: 1
capas superpuestas

hola gente, estoy tratando de hacer que una capa se superponga a otra. Algo asi:
[URL="http://gabrieled209.aloja2.info/"]http://gabrieled209.aloja2.info/[/URL]

Pero la pagina que se carga en la capa del fondo se ve mal.... deveria verse algo asi:
[URL="http://gabrieled209.aloja2.info/alt/"]http://gabrieled209.aloja2.info/alt/[/URL]

Es decir, el "Panel derecho" que se vea sobre la pagina de fondo como esta en el segundo link.

El CSS del primero es el siguiente:
#pagina {
width:auto;
height:auto;
background-image:url(images/body_bg.jpg);
background-repeat:repeat-x
}
#central {
width:739px;
height:auto;
margin-left:20%;
}
#cabezera {
width:auto;
height:82px;
}
#menu {
width:auto;
height:57px;
}
#contenido {
position:absolute;
z-index:1;
width:auto;
height:auto;
background:url(images/main_tab_bg.jpg);
}
#framecontenido{
position:relative;
z-index:1;
margin-left:2px;
margin-right:2px;
}
#panelderecho {
position:relative;
z-index:2;
height:200px;
width:245px;
border: 1px solid #C00;
left:540px;
top:0px;
}

Y el del segundo es asi:
#pagina {
width:auto;
height:auto;
background-image:url(images/body_bg.jpg);
background-repeat:repeat-x
}
#central {
width:739px;
height:auto;
margin-left:20%;
}
#cabezera {
width:auto;
height:82px;
}
#menu {
width:auto;
height:37px;
}
#contenido {
width:auto;
height:auto;
background:url(images/main_tab_bg.jpg);
}
#framecontenido{
margin-left:2px;
margin-right:2px;
}
#panelderecho {
position:relative;
z-index:2;
height:200px;
width:245px;
border: 1px solid #C00;
left:540px;
top:0px;
}

Por si acaso el codigo del contenido es asi (aunque se puede ver en el codigo fuente):

<div id="pagina">
<div id="central">
<div id="cabezera">
<table cellpadding="0" cellspacing="0">
<tr>
<td width="511">
<h1>Logo</h1>
</td>
<td width="67">
<h3>Vacio</h3>
</td>
<td width="77">
<h3>Home</h3>
</td>
<td width="84">
<h3>Boton</h3>
</td>
</tr>
</table>
</div>
<div id="menu">
<table cellpadding="0" cellspacing="0">
<tr>
<td width="140" align="center">
<img src="images/menu-inicio 01.jpg" name='inicioIMG' width="140" border="0">
</td>
<td width="126" align="center">
<img src="images/menu-servicios 01.jpg" name="serviciosIMG" width="126" border="0">
</td>
<td width="134" align="center">
<img src="images/menu-estructura 01.jpg" name="estructuraIMG" width="134" border="0">
</td>
<td width="152" align="center">
<img src="images/menu-consultas 01.jpg" name="consultasIMG" width="152" border="0">
</td>
<td width="187" align="center">
<img src="images/menu-sobrenosotros 01.jpg" name="sobrenosotrosIMG" width="187" border="0">
</td>
</tr>
</table>
</div>
<div id="contenido">
<div id="framecontenido"></div>
</div>
<div id="panelderecho">
<h1>Panel derecho</h1>
</div>
</div>
</div>

Espero puedan ayudarme, saludos!
  #2 (permalink)  
Antiguo 31/01/2010, 14:27
 
Fecha de Ingreso: marzo-2009
Ubicación: Uruguay
Mensajes: 128
Antigüedad: 15 años, 8 meses
Puntos: 8
Respuesta: capas superpuestas

Use divs :P
  #3 (permalink)  
Antiguo 31/01/2010, 16:40
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 5 meses
Puntos: 269
Respuesta: capas superpuestas

- Para posicionar en el eje de z se utiliza z-index, presta atención a la propiedad position.
- Ojo con la div-manía es preferible que crees tus menús con listas no ordenadas <ul><li></li> ... </ul> a que lo hagas con divs y tablas.

Saludos!

Etiquetas: capas, superpuestas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:04.