Foros del Web » Creando para Internet » CSS »

Posicionamiento de capas absolute y relative

Estas en el tema de Posicionamiento de capas absolute y relative en el foro de CSS en Foros del Web. Hola, estoy haciendo el diseño de una web y me he encontrado un problema, necesito en la web 3 capas relativas, una para la cabecera ...
  #1 (permalink)  
Antiguo 16/04/2011, 03:53
 
Fecha de Ingreso: febrero-2009
Mensajes: 36
Antigüedad: 8 años, 10 meses
Puntos: 0
Posicionamiento de capas absolute y relative

Hola, estoy haciendo el diseño de una web y me he encontrado un problema, necesito en la web 3 capas relativas, una para la cabecera que contendrá una imagen y la otra tiene que contener 2 capas absolutas, una a cada lado y otra de relativa en el centro; y la tercera sería el pie de pagina. El problema es que la primera sale bién. la última también, pero no hay manera de que la segunda apareza. Lo que si aparece son las capas que tendrían que estar en dentro de la segunda capa. Alguien me puede ayudar?
Aqui esta el código:
Código:
<!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=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
body{
	background-color:#FFC;
}

#cabecera{
	position:relative;
	background-color:#999;
}
#cos{
	position: relative;
	background-color:#999;
	z-index:1;
}

/* Baners de dalt */
#baners_dal {
	position:absolute;
	width:554px;
	height:147px;
	z-index:2;
	left: 27%;
	top: 5px;
	background-color:#CC0;
}
#publi1 {
	position:absolute;
	width:260px;
	height:50px;
	z-index:3;
	left: 10px;
	top: 10px;
	background-color:#000;
}
#publi2 {
	position:absolute;
	width:260px;
	height:50px;
	z-index:3;
	right: 10px;
	top: 10px;
	background-color:#000;
}
#publi3 {
	position:absolute;
	width:260px;
	height:50px;
	z-index:3;
	left: 10px;
	top: 70px;
	background-color:#000;
}
#publi4 {
	position:absolute;
	width:260px;
	height:50px;
	z-index:3;
	right: 10px;
	top: 70px;
	background-color:#000;
}

/*baners esquerra */
#baners_esquerra{
	position:absolute;
	width:200px;
	height:600px;
	top: 149px;
	z-index:2;
}
#publi5{
	position:absolute;
	width:180px;
	height:50px;
	z-index:3;
	left: 10px;
	top: 5px;
	background-color:#000;
}
#publi6{
	position:absolute;
	width:180px;
	height:50px;
	z-index:3;
	left: 10px;
	top: 60px;
	background-color:#000;
}
#btn_esq{
	top: 115px;
	z-index:3;
	left: 10px;
	height:370px;
	width:180px;
	position:absolute;
	background-color:#FFC;
}

#publi7{
	position:absolute;
	width:180px;
	height:50px;
	z-index:3;
	left: 10px;
	top: 490px;
	background-color:#000;
}

#publi8{
	position:absolute;
	width:180px;
	height:50px;
	z-index:3;
	left: 10px;
	top: 545px;
	background-color:#000;
}
/* baners dreta */
#noticies{
	position:relative;
	width:100%;
	height:100%;
	z-index:2;
	background-color:#6FF;
}
#baners_dreta{
	position:absolute;
	width:200px;
	height:600px;
	z-index:2;
	right: 5px;
	top: 149px;
}
#publi9{
	position:absolute;
	width:180px;
	height:50px;
	z-index:3;
	left: 10px;
	top: 5px;
	background-color:#000;
}
#publi10{
	position:absolute;
	width:180px;
	height:50px;
	z-index:3;
	left: 10px;
	top: 60px;
	background-color:#000;
}
#btn_dret{
	top: 115px;
	z-index:3;
	left: 10px;
	height:370px;
	width:180px;
	position:absolute;
	background-color:#FFC;
}
#publi11{
	position:absolute;
	width:180px;
	height:50px;
	z-index:3;
	left: 10px;
	top: 490px;
	background-color:#000;
}

#publi12{
	position:absolute;
	width:180px;
	height:50px;
	z-index:3;
	left: 10px;
	top: 545px;
	background-color:#000;
}
#baners_baix{
	position:relative;
	width:554px;
	height:50px;
	z-index:3;
	background-color:#000;
}
#sep{
	position:absolute;
	width:100%;
	height:5px;
	background-color:transparent;
	z-index:1;
	
}
</style>
</head>
<body>
<div id='cabecera'>
</div>
<div id='sep'>
</div>
<div id='cos'>
<div id="baners_dal" >
	<div id="publi1"></div>
	<div id="publi2"></div>
	<div id="publi3"></div>
	<div id="publi4"></div>
</div>
<div id="baners_esquerra">
	<div id="publi5"></div>
	<div id="publi6"></div>
    <div id='btn_esq'></div>
	<div id="publi7"></div>
	<div id="publi8"></div>
</div>
<div id="noticies">
</div>
<div id="baners_dreta">
	<div id="publi9"></div>
	<div id="publi10"></div>
    <div id='btn_dret'></div>
	<div id="publi11"></div>
	<div id="publi12"></div>
</div>
</div>
<div id='sep'>
</div>
<div id="baners_baix"></div>
</div>
</body>
</html>
Grácias por adelantado
  #2 (permalink)  
Antiguo 16/04/2011, 04:17
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Posicionamiento de capas absolute y relative

Hola:

No veo la necesidad, por ningun lado, de tener que usar nada con position absolute. Échale un vistazo a este ejemplo de tres columnas equilibradas.

Saludos.


Etiquetas: capas, posicionamiento, relative
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 05:16.