Maquetando con DIV’s (ejemplo II)

17 04 2007

Ahora, que ya hemos visto un ejemplo práctico del funcionamiento de la maquetación con DIV’s, veremos un ejemplo de un grado de complejidad más alto. Lo que, trataremos de dibujar es una estructura con un panel lateral a la derecha, dos subpaneles a la izquierda: uno debajo de otro y un panel de footer.

Muchos, podrián sugerir que para los subpaneles, se dibujase un contenedor. La verdad, antes de hacer este ejemplo, pensaba sugerirles eso, pero mientras lo realizaba me di cuenta de ciertos aspectos realmente interesantes. Por ejemplo, la lógica sería dibujar primero el primer subpanel de la izquierda. Pero, en este ejemplo en particular, decidi dibujar primero el panel de la derecha. Con esto, dibujar el primer subpanel de la izquierda, no sería complicado. Luego, dibuje el segundo subpanel y para mi sorpresa quedo debajo del primero y ajustado sin afectar su posición, ni la del panel de la derecha. Este mismo ejemplo, lo convine con otro subpanel a la derecha, despues del segundo subpanel y me a funcionado sin ningun problema. Con esto, se demuestra que la estructura de maquetación con DIV’s, realmente es dinámica.

<div style = "display: table; width: 500px;">
    <div style = "float: right; height: 160px; width: 78px;"></div>
    <div style = "float: left; height: 50px; width: 413px;"></div>
    <div style = "float: left; height: 103px; width: 413px;"></div>
    <div style = "float: left; height: 103px; width: 498px;"></div>
</div>

Articulos Relacionados:


Acciones

Information

2 responses

27 10 2008
fáv

Hola, José Manuel:
Me encanta tu blog y te tengo como referencia para el tema de diseño con DIVs. Me he dado cuenta que tiene un fallo el no haber incluido un DIV más: si añades al estilo un borde de 1 píxel todo se descuadra (lo he observado en IE7 y en FF3)
Felicidades por la Web.

27 10 2008
Juan Manuel Lemus

Gracias @fav. Si, en el diseño con DIV’s corres ese riesgo. Es una ventaja y desventaja al mismo tiempo. Te espero en el nuevo DotPress (http://www.dotpress.net), donde hay nuevos artículos y un excelente diseño.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s




A %d blogueros les gusta esto: