Valeee, ahora parece que se tienen en cuenta a la hora de incluir contenido, pero no respetan el sitio donde estaban.
¿Por qué no se quedan en su sitio?.
EDITO: PARECE QUE HE DADO CON LA SOLUCIÓN, he puesto en el css el estilo float: left o right dependiendo de donde quería que quedasen las capas y parece que se ha solucionado. Estoy supercontenta, ¿cómo lo vé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>
<title>PRUEBA</title>
<style type="text/css">
<!--
img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#CAPOTA {
position:relative;
left:-20px;
top:-10px;
width:850px;
height:100%;
background-color: #000000;
margin-left: auto;
margin-right: auto;
background-image: url(nuevaestructura2012/fondocapa.jpg);
}
-->
</style>
<style type="text/css">
<!--
#BOTONERA {
left:0px;
top:150px;
width:850px;
height:24px;
background-color: #FFCC00;
}
#CABECERA {
left:0px;
top:0px;
width:850px;
height:150px;
background-color: #CCCCCC;
}
#LATERAL {
left:0px;
top:175px;
width:200px;
height:100%;
background-color: #999900;
float: left;
}
#centro {
left:700px;
top:174px;
width:650px;
height:396px;
background-color: #FF0000;
float: right;
vertical-align: top;
}
#contenido {
left:200px;
top:573px;
width:650px;
height:100%;
background-color: #FF3366;
float: right;
}
#pie {
left:0px;
top:1023px;
width:100%;
height:40px;
background-color: #FFFF00;
clear: both;
}
-->
</style>
</head>
<body>
<div id="CAPOTA">
<div id="capa-sombra">
<div id="CABECERA">CABECERA</div>
<div id="BOTONERA">BOTONERA</div>
<div id="LATERAL">
<p>LATERAL<br />
<span style="font-variant:normal; letter-spacing:normal; line-height:11px; orphans:2; text-align:-webkit-auto; text-indent:0px; text-transform:none; white-space:normal; widows:2; word-spacing:0px; -webkit-text-size-adjust:auto; -webkit-text-stroke-width:0px; background-color:rgb(255, 255, 255); display:inline !important; float:none; font-family:arial, sans-serif; font-size:small; color:rgb(34, 34, 34); font-style:normal; font-weight:normal; ">Este comportamiento</span> <br />
<span style="font-variant:normal; letter-spacing:normal; line-height:11px; orphans:2; text-align:-webkit-auto; text-indent:0px; text-transform:none; white-space:normal; widows:2; word-spacing:0px; -webkit-text-size-adjust:auto; -webkit-text-stroke-width:0px; background-color:rgb(255, 255, 255); display:inline !important; float:none; font-family:arial, sans-serif; font-size:small; color:rgb(34, 34, 34); font-style:normal; font-weight:normal; ">Este comportamiento</span> <br />
mal; font-weight:normal; ">Este comportamiento</span></div>
<div id="centro">CENTRO</div>
<div id="contenido">
<p>CONTENIDO</p>
<p>Cada uno tiene sus manias, y yo no voy a ser menos. Cuando quiero colocar varias capas que están juntas horizontalmente (una justo al lado de la otra) siempre las meto dentro de otra capa que las engloba. Así me es más fácil aplicarle luego los estilos y queda todo más recogidito. Como en este caso quiero crear tres huecos rectangulares, y todos uno al lado del otro, crearé tres capas, una para los enlaces de la izquierda, otra para el espacio central que en principio usaremos para poner publicidad y otra para los enlaces de la derecha. Esas tres capas las voy a meter dentro de la capa #pie.Cada uno tiene sus manias, y yo no voy a ser menos. Cuando quiero colocar varias capas que están juntas horizontalmente (una justo al lado de la otra) siempre las meto dentro de otra capa que las engloba. Así me es más fácil aplicarle luego los estilos y queda todo más recogidito. Como en este caso quiero crear tres huecos rectangulares, y todos uno al lado del otro, crearé tres capas, una para los enlaces de la izquierda, otra para el espacio central que en principio usaremos para poner publicidad y otra para los enlaces de la derecha. Esas tres capas las voy a meter dentro de la capa #pie.Cada uno tiene sus manias, y yo no voy a ser menos. Cuando quiero colocar varias capas que están juntas horizontalmente (una justo al lado de la otra) siempre las meto dentro de otra capa que las engloba. Así me es más fácil aplicarle luego los estilos y queda todo más recogidito. Como en este caso quiero crear tres huecos rectangulares, y todos uno al lado del otro, crearé tres capas, una para los enlaces de la izquierda, otra para el espacio central que en principio usaremos para poner publicidad y otra para los enlaces de la derecha. Esas tres capas las voy a meter dentro de la capa #pie.Cada uno tiene sus manias, y yo no voy a ser menos. Cuando quiero colocar varias capas que están juntas horizontalmente (una justo al lado de la otra) siempre las meto dentro de otra capa que las engloba. Así me es más fácil aplicarle luego los estilos y queda todo más recogidito. Como en este caso quiero crear tres huecos rectangulares, y todos uno al lado del otro, crearé tres capas, una para los enlaces de la izquierda, otra para el espacio central que en principio usaremos para poner publicidad y otra para los enlaces de la derecha. Esas tres capas las voy a meter dentro de la capa #pie.<br />
Cada uno tiene sus manias, y yo no voy a ser menos. Cuando quiero colocar varias capas que están juntas horizontalmente (una justo al lado de la otra) siempre las meto dentro de otra capa que las engloba. Así me es más fácil aplicarle luego los estilos y queda todo más recogidito. Como en este caso quiero crear tres huecos rectangulares, y todos uno al lado del otro, crearé tres capas, una para los enlaces de la izquierda, otra para el espacio central que en principio usaremos para poner publicidad y otra para los enlaces de la derecha. Esas tres capas las voy a meter dentro de la capa #pie.Cada uno tiene sus manias, y yo no voy a ser menos. Cuando quiero colocar varias capas que están juntas horizontalmente (una justo al lado de la otra) siempre las meto dentro de otra capa que las engloba. Así me es más fácil aplicarle luego los estilos y queda todo más recogidito. Como en este caso quiero crear tres huecos rectangulares, y todos uno al lado del otro, crearé tres capas, una para los enlaces de la izquierda, otra para el espacio central que en principio usaremos para poner publicidad y otra para los enlaces de la derecha. Esas tres capas las voy a meter dentro de la capa #pie.<br />
</p>
</div>
<div id="pie">PIE</div>
</div>
</div>
</body>
</html>
La capa "centro" siempre quedará fija incluyendo la cabecera y demás. Pero necesito que las capas "lateral" y "contenido" sean elásticas.
