Layouts con CSS


Hay 3 cosas que toda página HTML debe tener:

  1. Adaptarse a diferentes tamaños de letra
  2. Adaptarse al tamaño de ventana y resolución que el usuario use
  3. Estar hecha con DIVs y CSS

Para ello hay muchas técnicas y no todas logran buenos resultados. He aquí un ejemplo de layout con CSS que conserva las 3 propiedades.

Consiste de una barra de título o encabezado, una barra de links a la derecha, una barra de links a la derecha (que pueden ser otra cosa como banners o texto). Las barras de links se adaptan al tamaño de la fuente que se quiera.

En el centro el conenido principal que fluqye hasta ocupar todo el espacio que quede libre.

Al final un pie.

Ejemplo de Layout CSS

El HTML

<body>
<div id=”arriba”>
<h1><img src=”http://www.w3.org/Icons/w3c_main”/&gt; Título Principal</h1></div>
<div id=”links”>
<pre>
#links{
float: left;
width: 10em;
margin-right:1em;
background-color:
lightblue;
}
</pre>
<ul>
<li><a href=”link1.html”>Link 1</a></li>
<li><a href=”link1.html”>Vínculo 2</a></li>
<li><a href=”link1.html”>Hipervínculo 3</a></li>
<li><a href=”link1.html”>Hyperlink 4</a></li>
<li><a href=”link1.html”>Enlace 5</a></li>
<li><a href=”link1.html”>Hiperenlace 6</a></li>
</ul>
</div>

<div id=”links2″>
<pre>
#links2{
float: right;
width: 10em;
color: white;
background-color:
red;
}
</pre>
<ul>
<li><a href=”link1.html”>Link 1</a></li>
<li><a href=”link1.html”>Vínculo 2</a></li>
<li><a href=”link1.html”>Hipervínculo 3</a></li>
<li><a href=”link1.html”>Hyperlink 4</a></li>
<li><a href=”link1.html”>Enlace 5</a></li>
<li><a href=”link1.html”>Hiperenlace 6</a></li>
</ul>
</div>

<div id=”content”>
<pre>
#content{
padding-left: 1em;
background-color: snow;
margin-left: 10.2em;
margin-right: 10.2em;
padding-left: 1em;
padding-right: 1em;
}
</pre>
</div>

<div id=”pie”>
<p>
#pie{background-color: yellow;border-style:dotted;border-color: lightgray;border-width:2px;}
</p>
</div>

</body>

El CSS

body{
font-size: 100%;
background-color: snow;
}

#links2{
float: right;
width: 10em;
background-color: orange;
}

#links{
float: left;
width: 10em;
margin-right:1em;
background-color: lightblue;
}
#content{
padding-left: 1em;
background-color: snow;
margin-left: 10.2em;
margin-right: 10.2em;
padding-left: 1em;
padding-right: 1em;
}
img{margin-right:1em;}

#pie{
background-color: yellow;
border-style:dotted;
border-color: lightgray;
border-width:2px;
}

Anuncios

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