Foros del Web » Creando para Internet » CSS »

Estructura..

Estas en el tema de Estructura.. en el foro de CSS en Foros del Web. Hola a todos, nose como maquetar esto: tengo un div donde meto todo: -un top con un background -a los laterales dos divs con distinto ...
  #1 (permalink)  
Antiguo 04/02/2010, 17:51
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 8 años, 1 mes
Puntos: 34
Estructura..

Hola a todos, nose como maquetar esto:
tengo un div donde meto todo:
-un top con un background
-a los laterales dos divs con distinto backgruon
-al pie otro div con otro background
-en el centro de todo es donde esta mi web.

los laterales estan puesto q se repita el fondo en y. y el height esta en auto.
el centro (donde esta la web) el height esta en auto tambien.

------------
Lo que quiero es que al escribir en el centro, aumenta el height, pues aumente el height de los div's laterales. No se si me explico.
  #2 (permalink)  
Antiguo 04/02/2010, 18:25
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.739
Antigüedad: 9 años, 3 meses
Puntos: 2112
Respuesta: Estructura..

Busca "Columnas equilibradas" en www.araudi.net, todo lo que tienes que hacer es ver el codigo fuente, guardarlo y adaptarlo a tus necesidades.
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 06/02/2010, 08:53
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 8 años, 1 mes
Puntos: 34
Respuesta: Estructura..

Wow, funciona¡¡
el problema es que yo tengo tres columnas y no se como adaptarlo,
Alguien me ayuda¿?
Gracias,
  #4 (permalink)  
Antiguo 06/02/2010, 17:46
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.739
Antigüedad: 9 años, 3 meses
Puntos: 2112
Respuesta: Estructura..

Revisaste el "Diseño liquido de 3 columnas"?, es muy similar a lo que quieres, solo tienes que adaptarlo.
__________________
- León, Guanajuato
- GV-Foto
  #5 (permalink)  
Antiguo 06/02/2010, 18:13
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 8 años, 1 mes
Puntos: 34
Respuesta: Estructura..

Uhhh¡ nuse q ago mal pero ahora esta peor, mira...

marcre.awardspace.com
  #6 (permalink)  
Antiguo 06/02/2010, 21:19
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Estructura..

Si el ancho es estático, ¿No sería más sencillo hacer un fondo que ocupe todo el largo para el div central? De esa forma te dejarías de preocupar por algunos problemas de este tipo.
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #7 (permalink)  
Antiguo 07/02/2010, 16:16
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 8 años, 1 mes
Puntos: 34
Respuesta: Estructura..

Ya, pero el problema esq no sera estatico en el futuro...
  #8 (permalink)  
Antiguo 07/02/2010, 19:53
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Estructura..

Encontré el problema: Ni left ni right tienen altura, por lo cual sin contenido, la altura por defecto es 0.
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #9 (permalink)  
Antiguo 07/02/2010, 20:20
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Estructura..

Y... En tiempo récord de 20 minutos, encontré la solución a tu problema.

Cambia el HTML de esta forma:

Código HTML:
<DIV class="left">
<DIV class="right">
<DIV class="middle">
  <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat quam at magna dignissim dignissim. Maecenas porta ligula non nisl iaculis commodo. Curabitur lacinia urna sed magna tincidunt sit amet dignissim elit lobortis. Phasellus vitae massa libero, sed sagittis justo. Praesent eu dolor ipsum. Praesent risus dui, auctor nec tempor nec, adipiscing mollis erat. Cras a ultrices mi. Vestibulum bibendum venenatis convallis. Suspendisse lobortis consectetur velit ac egestas. Ut enim lacus, elementum id scelerisque id, venenatis nec odio. Aliquam pulvinar tempus consequat. Maecenas vulputate enim sit amet justo rhoncus vitae consectetur diam tincidunt. Sed ultricies quam molestie justo accumsan blandit. Mauris quis orci at libero euismod porta non quis leo. Duis eu purus vitae nisl porttitor iaculis quis in nunc. Mauris dui dui, porta quis dictum non, tempus vitae libero.</P>
</DIV></DIV></DIV> 
Y el CSS correspondiente así:

Código:
.left {background:url(images/izq.png) repeat-y top left;}
.right {background:url(images/derecha.png) repeat-y top right;}			 
.middle {width:896px;
	background:#fff;
	margin:0 auto;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px
}
Espero te sirva. Solo una pregunta... Si posteriormente no va a ser estático... ¿Cómo arreglarás lo que son imágenes superior e inferior?
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #10 (permalink)  
Antiguo 08/02/2010, 09:09
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 8 años, 1 mes
Puntos: 34
Respuesta: Estructura..

Ohhhhh....
WooooW¡
Muchiiiiisimas gracias....
  #11 (permalink)  
Antiguo 08/02/2010, 09:11
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 8 años, 1 mes
Puntos: 34
Respuesta: Estructura..

Cita:
Iniciado por daPhyre Ver Mensaje
Espero te sirva. Solo una pregunta... Si posteriormente no va a ser estático... ¿Cómo arreglarás lo que son imágenes superior e inferior?
Pues adaptare esto al horizonta....

Un saludo¡
  #12 (permalink)  
Antiguo 08/02/2010, 09:28
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 8 años, 1 mes
Puntos: 34
Respuesta: Estructura..

Lo que no entiendo es que el middle no se cambie el widht...
y sigue teniendo el mismo tamaño
qiero decir, antes era:
-left + middle + right

y ahora es:
-left
--right
---middle
  #13 (permalink)  
Antiguo 08/02/2010, 15:51
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Estructura..

Por eso el margin:0 auto, deja margen de ambos lados para que se vean los fondos.
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #14 (permalink)  
Antiguo 08/02/2010, 15:58
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 8 años, 1 mes
Puntos: 34
Respuesta: Estructura..

Gracias....

Etiquetas: estructura
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 20:23.