diseños de ancho fijo son comunes, pero tienen un aspecto un poco extraño si el navegador no es el ancho especificado en el CSS3. Si el navegador es demasiado estrecho, el diseño no va a funcionar, y la segunda columna (por lo general) bajar a la línea siguiente.

Si el navegador es demasiado ancha, la página parece estar arrugada en el margen izquierdo con una gran cantidad de espacio en blanco a la derecha.

La solución natural es para hacer un diseño de ancho fijo relativamente estrecha que está centrada en el interior de toda la página.

Video: Como hacer un menú "Responsive" con HTML5 - CSS3

Algunos han llamado a este tipo de diseño (ancho fijo flotante centrado en el navegador) una gelatina diseño, porque no es bastante fluida y no es fijo.

Haciendo un cuerpo sustituto con un todo div

En cualquier caso, el código HTML requiere sólo un elemento nuevo, una todas div que envuelve todo lo demás en el interior del cuerpo:

Centrado fijo diseño de ancho
Columna izquierda
Columna derecha
Pie de página

Los contenidos de las páginas enteras están encapsulados en un div especial. Esta div será redimensionada a una anchura estándar (típicamente 640 o 800 píxeles). los todas elemento estará centrado en el cuerpo, y los otros elementos se coloca dentro de todas como si fuera el cuerpo:

Video: Curso de CSS Básico- Avanzado #20- Propiedad Visibility

#all {width: 800px; altura: 600px; margin-left: auto-margin-right: auto-frontera: 1px sólido de color gris -} # encabezado {background-color: # e2e393-border-bottom: 3px sólido negro-texto- alinear: centro-width: 800px; altura: 100px; padding-top: 1 em -} # izquierda {float: left; anchura: 200 píxeles; claro: a la izquierda; border-right: 1px sólido negro-height: 400px; padding-derecha: .5em -} # derecha {float: left; ancho: 580px; altura: 400px; padding-left: .5em -} # pie de página {width: 800px; altura: 60px; text-align: center-background-color: # e2e393 -border-top: 3px doble negro-padding-bottom: 1 em-claro: ambos-}

Cómo funciona el diseño de gelatina

Este código es muy similar al estilo, pero tiene algunas novedades importantes:

• los todas elemento tiene un ancho fijo. anchura de este elemento determinará la anchura de la parte fija de la página.

• todas También necesita una altura fija. Si no se especifica una altura, todas será de 0 píxeles de alto porque todos los elementos dentro de él están flotando.

• Centrar. Recuerde, para centrar divs (o cualquier otro elemento a nivel de bloque) se establece margin-left y margin-right tanto a auto.

• Hacer no flotador todas. los margen: auto truco no funciona en los elementos flotantes. todas no debe tener una flotador conjunto de atributos.

• Asegúrese de que las anchuras interiores suman todas‘Anchura s. Si todas tiene una anchura de 800 píxeles, estar seguro de que las anchuras, bordes y márgenes de todos los elementos dentro de todas den exactamente 800 píxeles. Si usted va incluso más de un píxel, algo va a extenderse y estropear el efecto. Es posible que tenga que jugar con los anchos para que todo funcione.

• Ajustar las alturas: Si su diseño tiene una altura fija, también tenga que jugar con las alturas de conseguir que todo se vea exactamente correcto. Los cálculos tendrán que cerrar, pero que por lo general va a necesitar para pasar un momento agradable jugando con mediciones exactas para hacer todo correcto.

Las limitaciones del diseño de gelatina

diseños de gelatina representan un compromiso entre los diseños fijos y fluidos, pero que no son perfectos:

• anchura mínima implícita: navegadores muy estrechos (como teléfonos móviles) no pueden hacer que el diseño de la forma que desee. Afortunadamente, el contenido seguirá siendo visible, pero no en el formato exacto que quería.

• espacio en la pantalla desperdiciado: Si usted hace la parte de la página prestado estrecha, una gran cantidad de espacio no se utiliza en los navegadores de mayor resolución. Esto puede ser frustrante.

• Complejidad: Aunque esta técnica de diseño es mucho más simple que los diseños basados ​​en tablas, es todavía un poco involucrados. Usted tiene que planificar su divs para hacer este tipo de trabajo de diseño.