En este ejemplo, veremos la forma en que se puede realizar una maquetación con DIV’s de una estructura de página bastante sencilla. El ejemplo consiste en una área de encabezando, un panel izquierdo, el área para contenido y un footer. Los elementos que describiremos a detalle, en este artículo serán:
- Centrado horizontal de un elemento DIV
- Estructuras más dinámicas con DIV’s
- Cuidando los anchos y altos
Aunque parezca algo extraño, los elementos DIV pueden centrarse utilizando los atributos margin-left: auto; margin-right: auto;. En cierto sentido, es compresible pensar es esta forma, como una forma lógica de centrar los elementos horizontalmente, dado que el valor auto para ambos lo empuja hacia el centro.
Nada extraordinario, ocurre cuando dibujamos los elementos en su forma por defecto. Pero cuando, colocamos al elemento que representa al panel izquierdo y le asignamos float: left, el siguiente elemento, se corre a su lado. Podemos notar en el código que el panel tiene el atributo hacia la izquierda y el contenido hacia la derecha. Esto causa que uno este pegado hacia ese margen para el contenedor, por lo que se restamos el ancho de cualquiera de los dos, podriamos apreciar que queda un espacio vació en el centro.
Ahora, vemos la parte más delicada de la maquetación. El dibujado de la página puede no verse como se esperaba. Debemos considerar que cuando un elemento sobrepasara el ancho de su contenedor y es flotante, caerá a la linea siguiente. Aunque puede ocurrir que si el elemento tiene una orientación hacia la izquierda y el que sobrepasa el tamaño la tiene hacia la derecha, este último dejará una porción de su contenido por debajo del anterior. Debemos cuidar, sobre todo los anchos totales de los elementos por linea. Recordemos que cuando aplicamos valores a los margenes, el explorador suma el ancho fijo más el margen; igual que con el padding. Para ello, si deberemos hechar mano de una calcularadora, por que cualquier valor adicional, sea de margenes, padding, bordes, etc. aumentara el tamaño fijo del objeto.
No hay comentarios:
Publicar un comentario