Foros del Web » Creando para Internet » CSS »

no me sale (maquetacion)

Estas en el tema de no me sale (maquetacion) en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/02/2005, 22:34
 
Fecha de Ingreso: julio-2003
Ubicación: Arequipa - Peru
Mensajes: 148
Antigüedad: 14 años, 4 meses
Puntos: 0
no me sale (maquetacion)

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
__________________
Sysdev tu Hosting
http://www.preuniversitarioonline.com Llevamos la universidad a tu casa

Última edición por KarlanKas; 03/02/2005 a las 03:15
  #2 (permalink)  
Antiguo 03/02/2005, 03:21
 
Fecha de Ingreso: enero-2005
Mensajes: 188
Antigüedad: 12 años, 10 meses
Puntos: 0
unos pequeños cambios

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
  #3 (permalink)  
Antiguo 03/02/2005, 08:51
 
Fecha de Ingreso: julio-2003
Ubicación: Arequipa - Peru
Mensajes: 148
Antigüedad: 14 años, 4 meses
Puntos: 0
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
__________________
Sysdev tu Hosting
http://www.preuniversitarioonline.com Llevamos la universidad a tu casa
  #4 (permalink)  
Antiguo 03/02/2005, 10:18
 
Fecha de Ingreso: enero-2005
Mensajes: 265
Antigüedad: 12 años, 11 meses
Puntos: 1
Mírate alguna de estas plantillas de tres columnas
  #5 (permalink)  
Antiguo 03/02/2005, 12:56
Avatar de Durgeoble  
Fecha de Ingreso: marzo-2003
Mensajes: 462
Antigüedad: 14 años, 8 meses
Puntos: 2
añade a las propiedades de derecha, izquierda y centro la siguiente opcion:
margin-bottom: 40px;
__________________
Todas mis respuestas funcionaran correctamente en aquellos navegadores que respeten los estandares.
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 08:20.