Posicionamiento de capas absolute y relative

qsflay · #1 (**permalink**) 16/04/2011, 02:53

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

jomaruro · #2 (**permalink**) 16/04/2011, 03:17

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.