Cuando estaba codificando el diseño de metal.ize se me ocurrió la idea de hacerlo líquido. Obviamente, esto lo quería lograr sin el uso de tablas y quería que fuera compatible con la mayor cantidad de navegadores posible. Debo decir que fue bastante complicado encontrar un método fiable, fácil y que no requiriera de hacks. Es por eso que quiero compartir con ustedes la técnica que usé.
Columna derecha fija, contenido líquido
En este ejemplo crearemos un layout que tenga una columna derecha de ancho fijo (200px) a la derecha, mientras que la columna de la izquierda es fluida (esto quiere decir que se ajustará al tamaño de la ventana del usuario).
Primero que nada, crearemos el html de nuestro layout. Como apreciamos en la imagen, necesitamos 4 divs diferentes: el header (gris oscuro), el contenido (blanco), el menú (verde) y el footer (negro).
Como siempre, gracias. Ya tengo la parte más importante de mi layout líquido terminada gracias a este tutorial. Muy bien explicado.
Creo que te amo ;_; Excelente tutorial.
Ya podes ver como quedo mi layout, te lo paso por acá porque últimamente no te puedo encontrar en el msn.
¿Como haces para sacar ese fabuloso efecto en las línea de código que nos muestras? ¿Es una función desarrollada por ti?
Me refiero a que salgan coloreadas y que se pueda elegir entre código "resaltado" y texto plano.
Unos artículos excelentes, gracias por compartirlos.
Realmente está muy bien explicado. Mi consulta viene para el caso de un menú a la izquiera. Me imagino que ahí ya no haría falta el margin -200px de la clase menu, pero habría que agregar el margin de 200px a la izquiera del contenido, cierto? Saludos.
Lord Tinchen: Para un menú a la izquierda es necesario flotar el menu y no el contenido. El menu iría flotando a la izquierda, y seguiría necesitando su margen de -200px pero esta vez a la derecha. El contenido también requiere de sus 200px de margen, pero esta vez a la izquierda.
Intentalo y dime cómo va.
Y sin darnos cuenta podemos hacer cosas aun mas grandiosas usando simplemente la lógica, haciendo pruebas (siempre haciendo backups), y pueden lograr hacer cosas como este sitio, realmente grandioso metal.orgy, me gusta bastante, sigue asi!
Thanks
como hago mi layout
che, sumamente útil, y buena la explicación, gracias por el material!
Como quisiera poder colaborar así tambien.
de lujo tus tutoriales no se que haria sin ellos gracias por todo ... por fin tengo mi layout liquido
Me encantaria que pusieras un tutorial de un layout simple como comienzo
es que me llama la antecion esto de hacerlos eh visto varios blogs con excelentes diseños por lo que decidi intentarlo pero por mas que busque tutoriales no encuentro uno que me sea util en verdad o estan a medias o son muy complicados por eso te pido si tienes un tutorial de un layout simple de 2 columbas maximo =)
bueno te agradeceria mucho si pudieras subirlo
excelente la web !!