> Manuales > Manual de Maquetación CSS

Creamos el lateral de la página, donde se muestran varios recuadros con un buscador y acceso a otras informaciones.

En los pasos anteriores de este taller vimos cómo crear la cabecera y cuerpo de la página. Ahora vamos a ver cómo hacer el lateral derecho de la página.

La capa lateral

En el lateral derecho situamos una nueva capa, que ofrece acceso a servicios y otras informaciones.

<div id="lateral"> 
... contenido lateral... 
</div>

El contenido que vamos a situar dentro de esta capa lo veremos por partes, pues tiene bastantes detalles que destacar tranquilamente. Los estilos son los siguientes:

#lateral{ 
width: 200px; 
background-color: #EBF2FE; 
border-bottom : 1px solid #cccccc; 
border-left : 1px solid #cccccc; 
float:right; 
}

Se define una anchura, un color de fondo y bordes de color gris claro en la parte lateral izquierda y abajo, los otros dos lados no tendrán borde por estar en contacto con los bordes de otros elementos.

Además, con el atributo float:right, indicamos que este lateral debe "flotar" hacia la derecha. Así, el cuerpo flota a la izquierda y el lateral a la derecha, con lo que conseguimos una disposición en 2 columnas.

Veremos a continuación los elementos que vamos a colocar dentro de la capa lateral, en una especie de cajas independientes. Aunque, antes de ver esas cajas una a una, merece la pena conocer en líneas generales cómo van a crearse. Cada caja tendrá este código HTML, compuesto por un titulo y un contenido de la caja:

<h2 class="titlat">Titulo de la caja</h2> 
<div id="idunico" class="cuerpolateral"> 
Contenido de la caja 
</div>

El título lo incluimos con una etiqueta <h2> y la parte de la caja con el contenido, se define con un div. Cada uno de estos elementos tiene una clase, que se aplicará a los mismos elementos en cada una de las cajas, de modo que todos los elementos del lateral compartan un mismo estilo.

.titlat{ 
background-color:#68729E; 
color:#ffffff; 
font-size:8pt; 
text-transform : uppercase; 
padding: 7px 3px 7px 8px; 
font-weight : normal; 
letter-spacing : 2px; 
margin: 0px 0px 8px 0px; 
} 

.cuerpolateral{ 
padding: 5px 4px 13px 10px; 
}

El encabezado de nivel 2 utiliza la clase "titlat", que define un color de fondo, un color del texto, un tamaño de letra, un cambio a mayúsculas de las letras del título, unos márgenes internos, peso de letra normal (no negrita, como suelen ser los encabezamientos por defecto), un espaciado de letras de 2 pixel y un margen. Los titulares llevan asociado un salto de línea doble arriba y abajo, que deseamos evitar y para ello hemos definido un margen de 0 pixels, menos en la parte de abajo, que tendrá 8 pixel.

Las cajas laterales también tienen un estilo, que se aplica a todos los cuerpos de las cajas que hay en el lateral. Ese estilo simplemente define unos márgenes internos.

Caja de buscar

Uno de los elementos que vamos a colocar dentro del lateral es una caja de búsqueda, con un formulario para realizar búsquedas internas, dentro del sitio, y en todo el web.

Esa caja de búsqueda se coloca en un formulario. Hemos puesto diversos identificadotes a los elementos que hay dentro del fomulario, para poder aplicar estilos a cada componente por separado. Aunque algunos de estos selectores ni siquiera los hemos llegado a utilizar, pueden venir bien si queremos hacer en el futuro modificaciones de la hoja de estilos para actualizar el diseño del web.

<h2 class="titlat">Buscar</h2> 
<div id="fbuscar" class="cuerpolateral"> 
<form> 
<div id="campotexto"><input type="text" name="criterio"></div> 
<div id="botonbuscar"><input type=image src="images/go.gif" width="25" height="15"></div> 
<div class="radio"><input type="radio" name="op" value="1"> En la Web del invierno</div> 
<div class="radio"><input type="radio" name="op" value="2"> En toda la Web</div> 
</form> 
</div>

Los elementos que hemos definido en la hoja de estilos para este pequeño formulario son los siguientes:

INPUT { 
font-size : 8pt; 
}

Con ello definimos que los campos de texto tienen un tamaño de letra de 8 puntos.

#fbuscar form{ 
margin-bottom : 0px; 
margin-top : 0px; 
}

El formulario, que está situado dentro de la capa fbuscar, no debe tener márgenes, ni arriba ni abajo.

#campotexto{ 
float: left; 
}

La capa "campotexto", donde está el campo de texto, hemos definido que debe "flotar" a la izquerda.

#campotexto input{ 
width:100px; 
} 

El input que hay dentro de la capa campotexto debe tener 100 pixels de ancho. 

#botonbuscar { 
padding-top : 3px; 
padding-left: 106px; 
}

La capa donde está el botón de submit, que en este caso es una imagen de submitir (<input type="imagen">), tiene un margen interno de 3 pixels por arriba, y de 106 por el lado izquierdo. Los 106 pixels de ancho salen de los 100 que ocupa el campo de texto que hay a la izquierda, más 6 pixeles adicionales, que son el verdadero margen que habrá entre el campo de texto y la imagen de submitir.

#botonbuscar input{ 
border : 0px none; 
}

Con esta última definición estamos indicando que la imagen de submitir (el <input type="image"> que hay dentro de la capa botonbuscar) no tenga borde.

.radio{ 
clear:both; 
}

Esta clase, que afecta a las capas donde están los botones de radio, define que no deben haber elementos "flotando" ni a la izquierda ni a la derecha, de los botones de radio.

La caja de registro

En la siguiente caja del lateral aparece un pequeño texto invitando a registrarse al visitante.

<div id="registro" class="cuerpolateral"> 
<a href="#">Registrese con nosotros</a> y obtenga muchas ventajas. 
</div>

Esta capa no tiene ningún estilo específico, simplemente se comporta heredando los estilos de otras capas y con los que se han definido en las clases que se utilizan.

La caja de otras informaciones

Situaremos una última caja dentro del lateral, que contiene enlaces a otras informaciones. Dentro de la caja colocaremos varios enlaces dentro de una lista.

<h2 class="titlat">Otras informaciones</h2> 
<div id="otras" class="cuerpolateral"> 
<ul> 
<li><a href="#">Quienes somos</a> 
<li><a href="#">Nuestra misión</a> 
<li><a href="#">Agenda de eventos</a> 
</ul> 
</div>

Para personalizar el estilo de la lista de enlaces se utilizan los siguientes estilos.

#otras ul{ 
margin : 5px 10px 0px 0px; 
padding: 0px 0px 0px 4px; 
list-style: none; 
}

Por un lado tenemos el estilo definido para toda la lista de elementos. En este caso se eliminan los márgenes que este tipo de listas tienen implícitos. Se coloca también un margen interno 4 pixel a la izquierda y cero en el resto de las posiciones. Con "list-style:none" se indica que no se desea ninguna bolita a la izquierda de los elementos, puesto que la vamos a colocar a continuación nosotros manualmente como fondo de los <li>.

#otras li{ 
padding-left: 14px; 
background: transparent url("images/bullet.gif") 0 2px no-repeat; 
margin-bottom: 10px;	
}

Por otra parte, para cada uno de los elementos de la lista, de define un espacio de 14 pixel a la izquierda. Esos 14 pixel sirven para hacer espacio, para que quepan unas pequeñas imágenes que vamos a poner de fondo en las listas, que van a hacer las veces de bolita. También se define un fondo de los <li> que es la imagen con la bolita personalizada, a juego con nuestro diseño. También se define un margen en la parte inferior.

Después de integrar todo lo que hemos visto en este ejercicio para crear el lateral de la página, el diseño queda tal como se puede ver en esta página.

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online Escu...

Manual