no me sale (maquetacion)

DirecFox · #1 (**permalink**) 02/02/2005, 22:34

Hola amigos quiero poner en mi pagina tres paneles una cabecera en la parte superior, otro de contenido, y por ultimo uno de pie; el panel de contenido tiene que contener 3 columnas y el panel del pie debe de posicionar segun la posicion de las 3 columnas.
Bueno estoy que intento e intento pero no me sale haber si alguien me da una mano
Les adjunto el codigo con el que estoy probando pero no me sale

Código:

<style>
	#contenido{top:10%}
	#pie{background:#00FF00}
	#cabecera{background:#FF0000}
	#derecha{position:absolute;width:30px;left:20px;background:#00AA00;color:#FFFF00}
	#centro{position:absolute;width:30px;left:180px;background:#0000BB;color:#FFFFFF}
	#izquierda{position:absolute;width:30px;left:350px;background:#00CC00;color:#00FF00}
</style>
<body>
	<div id="cabecera">
		<center><font size="6">texto de la cabecera</font></center>
	</div>
<div id="contenido"	>
	<div id="derecha">
		texto de la derecha que esta ubicado para poder ser modificado
	</div>
	<div id="centro">
		texto del centro que esta ubicado para poder ser modificado bla!!bla!!bla!!bla!
	</div>
	<div id="izquierda">
		texto de la izquierda que esta siendo utilizado para poder modificado !bla!!bla!!bla!!
	</div>

</div>
<div id="pie"> 
  <center><font size="6">pie de pagina</font></center>
</div>

Saludos

Mauricio

inforsol · #2 (**permalink**) 03/02/2005, 03:21

He modificado unas cuantas cosas en lo que tenías, estúdiatelo y a ver si entiendes como va...

Código HTML:

<style>
 #contenido{top:0px;left:0px}
 #pie{background:#00FF00;height:40px;
  width:100%;position:absolute;bottom:0px}
 #cabecera{background:#FF0000;height:40px;
  width:100%;position:absolute;top:0px;left:0px}
 #derecha{position:absolute;width:20%;top:40px;
  right:0px;background:#00AA00;color:#FFFF00}
 #centro{position:absolute;width:60%;top:40px;
  left:20%;background:#0000BB;color:#FFFFFF}
 #izquierda{position:absolute;width:20%;top:40px;
  left:0px;background:#00CC00;color:#00FF00}
</style>
<body style="margin:0px">
 <div id="cabecera">
  <center><font size="6">texto de la cabecera</font></center>
 </div>
 <div id="contenido">
  <div id="derecha">
   texto de la derecha que esta ubicado para poder
   ser modificado
  </div>
  <div id="centro">
   texto del centro que esta ubicado para poder ser
   modificado bla!!bla!!bla!!bla!
  </div>
  <div id="izquierda">
   texto de la izquierda que esta siendo utilizado para
   poder modificado !bla!!bla!!bla!!
  </div>
 </div>
 <div id="pie"> 
  <center><font size="6">pie de pagina</font></center>
 </div>

He cortado la longitud de las líneas para que no me las corte el formateador del foro, que si no las rompe. Pero ponle cuidado al copiar, porque puede que te aparezcan cosas cortadas tipo "100 %" en vez de 100%.
Salud

DirecFox · #3 (**permalink**) 03/02/2005, 08:51

Gracias por responder, funciona bien pero cuando una columna crece verticalmente la cabecera se mantiene en el mismo tamaño como podria modificarlo para que una columna crece el seccion pie baje a la altura de donde termina la columna mas alta

Gracias

Mauricio

posavasos · #4 (**permalink**) 03/02/2005, 10:18

Mírate alguna de estas plantillas de tres columnas

Durgeoble · #5 (**permalink**) 03/02/2005, 12:56

añade a las propiedades de derecha, izquierda y centro la siguiente opcion:
margin-bottom: 40px;