Una de las tendencias actuales debido a la variedad de resoluciones de pantalla de los usuarios es realizar una maquetación que busque adaptarse a todas ellas, una de las alternativas es la maquetación liquida de todo la estructura, de manera que siempre la página ocupe el 100% de la pantalla, el inconveniente es la parte del contenido en resoluciones mayores, (las líneas de texto son muy extensas) y dificultan la lectura.
Por lo cual se opta por una maquetación mixta (liquida y fija).Es decir, que la cabecera(PARTE LIQUIDA) ocupe siempre todo el ancho de la pantalla independientemente de la resolución que este tenga.
Mientras que el contenido(MEDIDA FIJA) adoptara un ancho fijo de aproximadamente 760px para ver el contenido sin scroll horizontal en la resolución más pequeña de 800x600 y en resoluciones mayores 1024x768, 1280x800, o más el contenido permanecera en el centro.
La página web estará compuesto por
<body> <div id="cabecera"> <h1>Nombre de la Web</h1> <h3>Slogan del sitio web.</h3> <div id="menu"> <div id="menu_left"> <a href="#">Portada</a> <a href="#">Servicios</a> <a href="#">Foro</a> </div> <div id="menu_right"> <a href="#">Contacto</a> <a href="#">Registrarse</a> </div> </div> </div> <div id="contenido"> <h2>Bienvenido!</h2> <p>Parrafo ... </p> </div> <div id="pie"> Pie de pagina... </div> </body>
* {margin:0;padding:0;}
body {font-family: Arial, Helvetica, sans-serif;}
h1,h3{margin-left:10px;}
#cabecera {height:75px;color:#fff;background:#036;}
#menu {background:#eee;height:30px;}
#menu a{color:#00376F;padding:2px 10px;font-weight: bold;}
#menu_left {float:left;}
#menu_right {float:right;}
#contenido {width:770px;
margin:0 auto;
text-align:justify;
}
#pie {text-align:center;
border-top:1px solid #eee;
margin-top:20px;}
De este modo, con un único monitor y sin necesidad de cambiar la resolución real de tu monitor, podras ver como se estira la cabecera liquida.
Maquetación con CSS, HTML flotar bloques, layout o cajas. Diseño web estandar, colores CSS, ancho, alto.
Ver más »Códigos CSS para imágenes, casos prácticos, ejemplos.
Ver más »Volumen de letras, fuentes, tipografía, interlineado, tamaño de texto, subrayado, efectos de texto:
Ver más »Aprenderemos a estructurar y diseñar todo tipo de menus con CSS mediante ejemplos y casos prácticos.