Maquetando con DIV’s (ejemplo III)

17 04 2007

Este es el tercer ejemplo que publico, utilizando maquetación con DIV’s. Al igual que el artículo anterior, este ejemplo utiliza el método de dibujado del panel derecho, antes que el izquierdo. Aún sigo analizando el por que de este comportamiento, pero sin duda, sea cual sea la respuesta, permite un dibujado más limpio, optimizado y profesional.

 

<div style = "display: table; width: 500px;">
    <div style = "float: left; height: 250px; width: 78px;"></div>
    <div style = "float: right; height: 70px; width: 413px;"></div>
    <div style = "float: right; height: 173px; width: 150px;"></div>
    <div style = "float: right; height: 50px; width: 255px;"></div>
    <div style = "float: right; height: 115px; width: 255px;"></div>
</div>

Articulos Relacionados:


Acciones

Information

7 responses

26 04 2007
Juan Jose Vazquez

Muchisimas gracias mi estimado. Me haz sacado de un super problema con estos tips tan que das.

Gracias Bro.

1 10 2007
Jonatan

Quisiera saber porque si el objetivo es optimizar el codigo utilizas “style” en vez de armar todo eso en una “id” dentro de un CSS?
Yo estoy tomando tus ejemplos para aprender como usarlos, pero creo que a la larga me va a resultar poco comodo si tengo que armar despues el CSS con todo esto creado con los style.

Saludos igual y gracias por la info

1 10 2007
Juan Manuel Lemus

Bien Jonatan. Ante todo, muchas gracias por tomar mi serie de articulos, como ejemplo de desarrollo.

En respuesta a tu pregunta, lo que sucede es que, como verás, el blog está en WordPress.com, el cual, no deja editar la plantilla CSS, por lo que no he podido crear las clases, teniendo que hacerlo directamente, desde el body.

Cada ejemplo, tiene indicado el HTML que la generó. Le he colocado por eso mismo, no por que esté promoviendo el uso de STYLE para ello.

27 03 2008
josekont

Que excelente ejemplo, una maravilla. Actualmente quiero profundizar en el aprendizaje de CSS y esta clase de tutoriales ayuda muchísimo.

saludos!

20 04 2010
Marcela

Muchas gracias, para los que nos estamos iniciando en esto vienen excelente tus ejemplos porque no tienen grado de dificultad; se te entiende muy bien!!!!!! Felicitaciones!

19 07 2010
CRISTIAN BERTELEGNI

MUY BUENO, GRACIAS!

20 11 2010
Jesus

Creo que dibuja primero el derecho que los izquierdos por la siguiente razon.
El lenguaje interpreta que tiene que dibujar eso a la derecha y lo primero que encuentra (en este caso, ) lo envia al final del todo a la derecha y despues mete “”.

Es como si tubieras un cajon y metieras algo al fondo y despues metieras otra cosa (tambien hacia el fondo). Se chocaria con lo que has metido primero y por eso quedaria mas cerca.

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: