Foros del Web » Creando para Internet » CSS »

Alargar página con divs

Estas en el tema de Alargar página con divs en el foro de CSS en Foros del Web. Hola, hace poco que me pasé a las CSS y aún no consigo hacer lo que hacía con las tablas. El problema que tengo ahora ...
  #1 (permalink)  
Antiguo 21/07/2006, 10:42
 
Fecha de Ingreso: mayo-2006
Mensajes: 64
Antigüedad: 11 años, 7 meses
Puntos: 0
Alargar página con divs

Hola, hace poco que me pasé a las CSS y aún no consigo hacer lo que hacía con las tablas.

El problema que tengo ahora es que estoy haciendo una página que puede tener una altura variable, entonces, las divs de los lados tienen que agrandarse a la par.

Lo que hice fue poner unas divs arriba para la cabecera.
Debajo, una div contenedora que tuviera el resto de la página, y las divs de dentro con posiciones relativas. Así la parte de abajo se mueve cuando se hace más larga la página (en el centro), pero los laterales, aunque le ponga height:100%, no se alargan como debieran.

Aquí les dejo el código, a ver si pueden ayudarme:

Código:
<div id="logo" style="height:67px; width:221px; position:absolute; top:0px; left:0px;"></div>
<div id="top" style="height:67px; width:580px; position:absolute; top:0px; left:222px; background-image:url(imagenes/top.gif)"></div>

<div id="contenedor" style="width:802px; position:absolute; top:68px; left:0px; "> 	
		<div id="menu" style=" width:221px; height:444px; position:relative; top:0px; left:0px; float:left; background-color:#F7F7F7;">
			  <img src="imagenes/menu.jpg" width="221" height="196" /><div id="menu_linea" style="background-image:url(imagenes/linea_menu.gif); float:right; height:252px; width:6px;"></div>	
  		</div>		
		<div id="separador_izq" style="height:444px; width:1px; position:relative;float:left;"></div>				
		<div id="resultados" style="height:28px; width:580px; position:relative; float:right "><img src="imagenes/result.gif" width="580" /></div>
		
		
		<div style=" width:199px; height:100%; float:right; background-color:#E8E8E8">
			
			<div style="width:197px; float:center; background-color:#FFFFFF; margin-left:1px; vertical-align:top;">
				<div id="derecha_arriba" style="height:138px;  padding-top:19px; padding-left:23px;"><img src="imagenes/tit_lotnac.gif" alt="Loteria Nacional" width="94" height="12" />
						<div class="Texto" style="margin-top:13px; margin-left:20px;">
						  <img src="imagenes/flechaverde.gif" width="12" height="8" class="Texto" /> Buscar un n&uacute;mero <br /></div>
						<div class="Texto" style="margin-top:5px;  margin-left:20px;">
						  <img src="imagenes/flechaverde.gif" width="12" height="8" class="Texto" /> Reservar un n&uacute;mero <br /></div>
						<div class="Texto" style="margin-top:5px;  margin-left:20px;">
						  <img src="imagenes/flechaverde.gif" width="12" height="8" class="Texto" /> Comprar un n&uacute;mero <br /></div>
						<div class="Texto" style="margin-top:5px;  margin-left:20px;">
						  <img src="imagenes/flechaverde.gif" width="12" height="8" class="Texto" /> Cesta de la compra</div>				
		      </div>
			     <div id="derecha_abajo" style="height:244px;  padding-top:19px; padding-left:23px; background-color:#F7F7F7;">
				 		 <div class="Texto"><b>Informaci&oacute;n:</b></div>
						 <div class="Texto" style="line-height:15px; margin-top:7px; margin-bottom:22px;">Formas de envío<br />Formas de pago<br />Condiciones</div>
						 <div class="Texto"><b>Enlaces de inter&eacute;s:</b></div>
						 <div class="Texto" style="line-height:15px; margin-top:7px;">
				   enlace1<br />
				   enlace2<br />
				   enlace3<br />
				   enlace4<br />
				   enlace5</div>
			     </div>
			</div>	
				
		</div>		
			
		<div id="centro" style="height:415px; width:380px; float:left; padding-top:1px; padding-right:1px;"><img src="imagenes/center.jpg" width="380" height="415" /></div>	
		
		<div id="menu_rapido" style="height:30px; width:802px; position:relative; float:left; background-image:url(imagenes/bottom.gif)">
			<div class="Arial_11W" style="padding-top:8px; padding-right:4px; padding-left:360px;">Principal &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; Quienes somos &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; Participaciones &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; Donde estamos &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; Contactar</div>
		</div>
		
		<div id="Acerca_de" style="height:30px; width:802px; position:relative; float:left;">
	
		</div>
</div>
  #2 (permalink)  
Antiguo 22/07/2006, 10:53
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 1 mes
Puntos: 3
si tu quieres que se ajuste el al tamaño verticalmente no se pude, lo mejor que puedes hacer para eso es usar min-height para fire fox y hieght (con pixeles) para IE y le daras un tamaño fijo para que de ahy partan.

nota: las posicones absoultas no se agrandan. usa float, y clear para fijar
__________________
Saludos
FT.
www.fernando.com.mx
  #3 (permalink)  
Antiguo 22/07/2006, 11:28
 
Fecha de Ingreso: mayo-2006
Mensajes: 64
Antigüedad: 11 años, 7 meses
Puntos: 0
antes de nada gracias por la ayuda fer10. No entiendo porque dices que las posiciones absolutas no se agrandan. Si no le especifico una altura al contenedor, dependiendo del su contenido se harán mas o menos grandes no?

Otra cosa, aunque use min-height y height, si lo que quiero es una página con contenido actualizable que podrá tener una altura variable, eso no lo voy a poder controlar si no se alargan a la vez, se quedarán estancadas. He leido por ahí un truco de poner un fondo y encima toda la página, o sino hacerlo por javascript. Lo del fondo no puedo porque el pie de página me lo estropea, además parece una solución un poco cutre... y de javascript no se como hacerlo, podrías echarme una mano?
  #4 (permalink)  
Antiguo 22/07/2006, 14:22
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 1 mes
Puntos: 3
lo de las posiciones absolutas no es que no se agrande el contenedor mismo, sino cuando quieras usar un footer o pie de pagina , no vas a poder ya que si tu contenido es dinamico se te pondra arriba de las capas posicionadas impidientoe colocarlo justo donde termina el contenido a parte de que tienen varios busg ie con las posiciones absolutas, no creo que sea la manera correcta de implementar un sitio como te comento usar mejor float: left y float:rigth y para el footer clear:both y asi te queda bien.

te paso un manual de marquetarlos.
http://blog.html.it/layoutgala/
en los ejemplos puedes ver como aun que se agrege contenido (ahy de das click) siguen estirandose las divs...

ahy mas buscalos en este mismo foro.
__________________
Saludos
FT.
www.fernando.com.mx
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:15.