Maquetar una página con CSS IV

  • Por
  • 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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

jesus

17/9/2006
A ver, no se si lo habeis probado pero en firefox no se ve bien.

En explorer pinta todo blanco, en firefox la capa del centro deja un hueco a la derecha e izquierda.... vamos, que sigo con tablas que va con todo

alan

09/1/2007
Muchísimas gracias, me ha sido muy muy útil éste tutorial para aprender algo más de CSS. Lo seguí paso por paso y no hubo problema. Seguid asi ;)

(Pato)²

28/1/2007
Falto colocar el titulo en la segunda caja lateral.

Suerte!

Protfinder

29/5/2007
El tutorial está bárbaro. Hace rato que estoy tratando de entender CSS, y aunque las uso no las entiendo. En ese sentido las aclaraciones de por qué es mejor o no determinado margen, etc. ayudan mucho.
En cuanto al primer comentario yo ya me estoy pasando a css, no voy a volver a las tablas, pero me molesta ver que es muy cierto.
Confío en que los navegadores se compatibilicen de una vez.

Protfinder

29/5/2007
También faltó un contenedor borde para toda la página. Con eso se completan los bordes que faltan y el fondo del cuerpo queda blanco tanto para IE como Firefox.

salu2

Ismael

11/12/2007
Muy muy bueno este paso a paso del uso de CSS. Llevo unos dias estudiando el diseño de webs y no comprendia como se posicionaban los elementos para conseguir una web elegante. Estos 4 capitulos me han servido de punto de partido para entender el tema de la maquetacion.

Un saludo y muchisimas gracias!!

JamesM

07/2/2008
Saludos.

Como aporte personal recomiendo no utilizar la propiedad list-style: none; por que si se trabaja en accesibilidad y usabilidad esta propiedad desactiva un comportamiento útil para los discapacitados.

En vez de esto sugiero que se utilice la propiedad list-style-image y se obtiene el mismo resultado sin necesidad del background para los elementos li.

paolo

07/1/2009
Hola, el tutorial muy bueno y llevadero, aunque me surgio un problema a la hora de generar la columna a la drecha, esta en el firefox queda por debajo de todo y en el explorer una celda mas arriba nada mas, no queda al lado del texto.

paolo

07/1/2009
retiro lo dicho, es-pec-ta-cu-lar, muy bien 10, me anduvo al pelo. gracias. ;)

elyvaras

20/6/2009
muy buen tutorial
se agradece la voluntad de querer enseñar.

cacaroto5a

19/9/2009
Saludo
Gracias por el tutorial es muy bueno para principiantes como yo pero me gustaria un ejercicio mas complejo...
No tenes uno?

chapatin

14/10/2009
#fbuscar form{....
brother si fueras tan amable. Cual es la diferencia entre #fbuscar { y #fbuscar form{. Es acaso form un comando aparte de la capa que queremos crear? Gracias. El resto esta chevere

aemr

14/10/2009
Excelente tutorial
Excelente tutorial me ayudo muchisimo a entender como maquetar con css y los div gracias men por la ayuda ojala siga asi y tambien pueda ayudar despues en todo esto de la web

Chuibaca

16/10/2009
#otras ul{ acaso es una sola capa
hola choche....mira en que parte de tus manuales puedo encontrar ese tipo de definiciones. Lo que no entiendo es que le pones un espacio entre #otras y ul, no se supone que es una sola capa...bueno suerte y adios. ah... pero ademas ul es undefined list entonces cual es la jerarquia, no va entonces un punto en lugar del espacio...bueno adios.

Chuibaca

16/10/2009
#otras ul{ acaso es una sola capa
hola choche....mira en que parte de tus manuales puedo encontrar ese tipo de definiciones. Lo que no entiendo es que le pones un espacio entre #otras y ul, no se supone que es una sola capa...bueno suerte y adios. ah... pero ademas ul es undefined list entonces cual es la jerarquia, no va entonces un punto en lugar del espacio...bueno adios.

Eduardo

19/8/2010
intento
yo hice el ejercicio sin seguir los tutoriales y guiandome por la imagen del principio y descargue las imagenes mi codigo me salio asi:

<html>
<head>
<style type="text/css">
body {background: url(pack-imagenes/fondo.gif);
text-align: center;
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;}

#container {border: 5px gray;
text-align:left;
width:700px;
background:white;}
#nav_bar {background: url(pack-imagenes/fondonav.gif);
color: gray;
padding: 5px 0 5px 0 ;
font-size: 9pt;}
A#nav_bar {text-decoration: none;
color: gray;}
#lat_bar {float:right;
width: 24%;
background: #eef4ff;}

.lat_bartitle {background: #66a;
color: #fff;
font-size: 14px;
text: plain;
padding: 5px 0px 5px 0px;}

#principal{float:right;
width:73%;
background:white;
padding-left:10px;
padding-right:10px;}

#campotexto {width:120px;
margin: 15px 0px 0px 10px;
border: solid 1px #66a}
.radio{margin: 5px 0 0 10px;}
.margin{margin: 15px 0px 15px 10px;}
</style>
</head>

<body>
<div id="container">

<div id="header">
<img src="pack-imagenes/cabecera.jpg">
</div>
<div id="nav_bar">
<a herf=" ">&nbsp;&nbsp;Portada</a> |
<a herf=" ">Invierno</a> |
<a herf=" ">Diciembre a marzo</a> |
<a herf=" ">La chimenea</a> |
<a herf=" ">Deportes de invierno</a> |
<a herf=" ">Contacto</a>



</div>
<div id="lat_bar">
<div class="lat_bartitle">&nbsp;&nbsp;Buscar</div>
<form>
<input type="text" name="criterio" id="campotexto">
<input type=image src="pack-imagenes/go.gif" width="25" height="15" id="botonbuscar"></br>
<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 class="lat_bartitle">&nbsp;&nbsp;Registro</div>

<div class="margin"> <a herf="www.edusoccer.es.tl">Registrese con nosotros</a> y obtenga muchas ventajas.</div>
<div class="lat_bartitle">&nbsp;&nbsp;Informaci&oacute;n</div>
<div class="margin">
<img src="pack-imagenes/bullet.gif" herf="">&nbsp;Quienes somas</br>
<img src="pack-imagenes/bullet.gif" herf="">&nbsp;Nuestra misi&oacute;n</br>
<img src="pack-imagenes/bullet.gif" herf="">&nbsp;Agenda de eventos</br>
</div>
</div>
<div id="principal">
<h1>T&iacute;tulo de la p&aacute;gina</h1>
En este art&iacute;culo vamos a conocer la maquetaci&oacute;n de paginas utilizando Hojas de estilos en cascada (CSS). Veremos c&oacute;mo realizar este tipo de maquetaci&oacute;n, junto con algunas ventajas e inconvenientes. Para muchos ser&aacute; todav&iacute;­a un campo por explorar.</br> Aunque no vamos a entrar en grandes detalles, vamos a intentar dar a conocer la maquetaci&oacute;n con CSS para que cubrir la posible laguna por parte del lector. En cap&iacute;tulos sucesivos ampliaremos la informaci&oacute;n y ofreceremos tutoriales m&aacute;s pr&aacute;cticos.</br>
Como se ha podido aprender en el Manual de CSS, las hojas de estilo en cascada ayudan a separar el contenido de la forma, es decir, los elementos que componen una p&aacute;gina de la forma con la que se muestran. Adem&aacute;s, CSS ayuda en gran medida a la definici&oacute;n de estilos en la p&aacute;gina, ya que permite ajustar de una manera mucho m&aacute;s precisa cualquier aspecto de cualquier elemento de la p&aacute;gina.</br>
La maquetaci&oacute;n con CSS lleva la utilizaci&oacute;n de las hojas de estilo a su grado m&aacute;ximo, de manera que cualquier definici&oacute;n del aspecto de la p&aacute;gina se realiza en la declaraci&oacute;n CSS que enlazamos con el documento HTML. Para definir la situaci&oacute;n de los elementos en la p&aacute;gina se utilizan las capas, a las que se aplica un posicionamiento a trav&eacute;s tambi&eacute;n de las hojas de estilo.</br>
Para crear las capas se utilizan etiquetas <-DIV->, en las que se introducen los elementos que queramos que aparezcan en la p&aacute;gina. Los elementos dentro de los <-DIV-> tambi&eacute;n se pueden anidar, para heredar las propiedades y posicionamiento de las capas padre.</br>
En la maquetaci&oacute;n por capas se definen &uacute;nicamente etiquetas <-DIV-> y las tablas s&oacute;lo se utilizan para mostrar informaci&oacute;n tabulada, es decir, mostrada en filas y columnas. Cabe senalar que en la maquetaci&oacute;n tradicional se utilizan las tablas para ajustar la posici&oacute;n.

</br>
</br>
<div style="color:#0a0;" font="bold">

<a herf=" ">Portada</a> |
<a herf=" ">Volver</a> |
<a herf=" ">Mapa del sitio</a>

</div>

</div>

</body>
<html>

Alexis Advance

09/9/2010
Estilos del botón (imagen) de submit
Los estilos que en el manual se le dan al botón de submit son los siguientes:

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

Sugiero que en lugar de asignarle un «padding-left: 106px;» se le asigne un «float: left» y luego un «padding-left: 6px;». Me parece que es lo correcto.

jejabe

01/3/2013
Desroden
hola gracias por el tuto,
lo he realizado paso a paso pero al final me quedo desordenado... :( la partes del formulario oque va después del input queda situada debajo del cuerpo de la pagina...
si me pueden ayudar les agradezco mucho..