Capitulo 12 - Layouts

Definición

Es el esquema (Boceto) de distribución, lógico
y ordenado de un sistema y es usado como
herramienta para optimizar procesos o
sistemas.

Diseño habitual
El diseño de las páginas web habituales se
divide en bloques: cabecera, menú,
contenidos y pie de página.

Ventajas CSS

Mantenimiento
Accesibilidad
Velocidad de carga
Semántica

Centrado Horizontal

Los navegadores alinean por defecto las páginas
web a la izquierda de la ventana.

Cuando la resolución de la pantalla es muy
grande, la mayoría de páginas de anchura fija
alineadas a la izquierda parecen muy estrechas y
provocan una sensación de vacío.

Código CSS
#contenedor {
width: 300px;
margin: 0 auto;
}
<body>
<div id="contenedor">
<h1>Lorem ipsum dolor sit amet</h1>
...
</div>
</body>

Centrado Vertical

La solución correcta para centrar verticalmente
una página web se basa en el posicionamiento
absoluto e implica realizar un cálculo matemático
sencillo.
A continuación se muestra el esquema gráfico de
los cuatro pasos necesarios para centrar una
página web en la ventana del
navegador:

Código CSS
#contenedor {
width: 500px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -250px; /* height/2 = 500px / 2 */
margin-left: -250px; /* width/2 = 500px / 2 */
}

Alturas / Anchuras
Maximas y Minimas
Cuando se diseña la estructura de una página
web, se debe tomar la decisión de optar por un
diseño de anchura fija o un diseño cuya anchura
se adapta a la anchura de la ventana del
navegador.

Sin embargo, la mayoría de las veces sería
conveniente una solución intermedia: que la
anchura de la página sea variable y se adapte a la
anchura de la ventana del navegador, pero
respetando ciertos límites.

Código CSS
De esta forma, para conseguir un diseño de
anchura variable pero controlada, se podrían
utilizar reglas CSS como la siguiente:

#contenedor {
min-width: 500px;
max-width: 900px;
}

Capitulo 12 - Layouts

Más contenido relacionado

Destacado (7)

Similar a Capitulo 12 - Layouts (20)

Capitulo 12 - Layouts