Tu web de informática

atras

1.9 Menú lateral y contenido

adelante

Crear la tabla contenedora

Una vez acabada toda la cabecera y nuestro menú de navegación nos toca hacer el menú de la izquierda y la capa de contenido. Esto lo haremos con una tabla que tiene una fila y dos columnas. En esta caso cada celda tiene un estilo, y los estilos se los tenemos que poner a los td.

Pues bien, vamos a crear nuestra tabla de dos columnas, borrando las frases esas de "Aquí va lo que se ve" y "Ésta es otra línea". Ahora vamos a indicar la siguientes cosas a cada td:

  1. Los td tienen por defecto que lo que hay dentro de ellos se alineen verticalmente en el centro. Nosotros queremos que tanto el menú como el contenido se pongan en la parte de arriba, para lo cual tenemos que poner en la etiqueta td un valign="top", de forma que las etiquetas td quedarían así: <td valign="top">.
  2. También queremos que el menú tenga un ancho determinado, por lo que a él le pondremos width="160px".
  3. Por último vamos a poner que el td del menú lea el estilo "menu" (que lo crearemos ahora), y que el td del contenido siga el estilo "contenido"

De esta forma nuestro body nos queda así:

<body>

<div id="fondo">
<div id="global">

<div id="cabecera">
<div id="logotipo">
 <img src="imagenes/site_logo.gif" alt="Tu web de informática">
</div>
<div id="banner"></div>
</div>

<div id="navegacion">
<table width="100%" border="0">
<tr>
<td width="25%" align="center"><a href="index.html">Índice</a></td>
<td width="25%" align="center"><a href="#">Sección 1</a></td>
<td width="25%" align="center"><a href="#">Sección 2</a></td>
<td width="25%" align="center"><a href="#">Sección 3</a></td>
</tr>
</table>
</div>

<table width="100%" border="0">
<tr>
<td width="160" valign="top" id="menu">
</td>
<td valign="top" id="contenido">
</td>
</tr>
</table>

</div>
</div>

</body>

Estilos del menú y el contenido

Ahora vamonos a la hoja de estilos. Vamos a crear primero los estilos de "menu", y le tenemos que indicar lo siguiente:

  1. Que el texto que haya dentro de él se centre, por lo que le ponemos un "text-align: center".
  2. Que tenga un padding de "padding: 10px 0px 15px 0px", para que el texto no se pegue ni arriba ni abajo.
  3. Por último que tenga de imagen de fondo la siguiente (guardadla como degradado2 en la carpeta objetos):
degradado para el menu

De esta forma habremos definido el menú en la hoja de estilos de la siguiente forma:

#menu {text-align:center; padding: 10px 0px 15px 0px;
background-image:url(objetos/degradado2.jpg)}

Ahora vamos a definir el contenido de la siguiente forma:

  1. No tiene nada de fondo, puesto que será el mismo que la capa que tiene detrás
  2. Debe de tener un padding de "padding: 10px 10px 10px 10px" para que el texto no se pegue a los bordes.
  3. El texto de dentro está justificado, por lo que ponemos "text-align: justify"
  4. Además, las primeras líneas de cada párrafo si os fijais están más metidas hacia dentro. Esto se hace con el text-indent. Pues vamos a ponerle 15 píxeles de text-indet: "text-indent: 15px".
  5. De esta forma habremos definido la capa contenido de la siguiente forma:
#contenido {padding: 10px 10px 10px 10px; text-indent: 15px; text-align: justify}

Por último definamos los enlaces de la capa menú, casi igual que los de la capa navegación, de forma que sólo tenemos que añadir lo siguiente en la hoja de estilos:

#menu a {color: #CCCCCC; display:block; text-decoration:none; background-color: #1C1C1C; margin: 1px}
#menu a:link {}
#menu a:visited {}
#menu a:hover {color: #FFFFFF; background-color:#000000}
#menu a:active {color: #99FFFF}

Creando el menú

Ahora vamos a crear el menú. Para ello primero agregamos un párrafo en que ponga la palabra "Menú". Lo que viene después si os fijais no son párrafos, puesto que están más juntos que los párrafos. Eso se llama lista, y la lista se crea de la siguiente forma:

  1. Se abre con la etiqueta <ul> y se cierra con </ul> (si queremos que sea una lista numerada usaremos <ol> y </ol>).
  2. Cada elemento de la lista se abre con <li> y se cierra con </li>.

De esta forma ponemos dentro de nuestro menú una lista con las distintas secciones:

<td width="160" valign="top" id="menu">
<p>Menú</p>
<ul>
<li><a href="#">Sección1</a></li>
<li><a href="#">Sección2</a></li>
<li><a href="#">Sección3</a></li>
</ul>
</td>

Si miramos nuestra lista previsualizando el index.html veremos que los enlaces no se ven bien, están metidos para dentro, y además si no tuvieramos el fondo negro veríamos que cada elemento de la lista tiene un puntito al principio. Todo esto se soluciona añadiendo el siguiente código en la hoja de estilos:

ul {margin: 0px; padding: 0px; list-style: none}

De esta forma ya veremos bien nuestro menú. Ahora agregamos el resto del menú poniendo la parte de enlace. De camino aprovecho para decir que agradeceríamos que pusierais un enlace hacia "Tu web de informática" en vuestras webs. De esta forma nuestro td del menú quedaría así:

<td width="160" valign="top" id="menu">
<p>Menú</p>
<ul>
<li><a href="#">Sección1</a></li>
<li><a href="#">Sección2</a></li>
<li><a href="#">Sección3</a></li>
</ul>
<p>Enlaces</p>
<ul>
<li><a href="http://www.tuwebdeinformatica.com" target="_blank">Tu web de informática</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
</ul>
</td>

Pues bien, en el siguiente capítulo ya terminaremos la página web. Ahora os muestro como nos había quedado nuestra hoja de estilos para evitar cualquier problema:

body {background-image: url(objetos/fondo.jpg); text-align: center}

#fondo {background-color:#FFFFFF; width: 820px; margin: 4px auto; padding: 6px 0px; text-align: center}

#global {margin: 0px auto; width: 800px}

#cabecera {background-image:url(objetos/degradado1.jpg); height: 120px; margin: 0px 0px 4px 0px}

#logotipo {float:left; padding:13px 0px 13px 10px}
#banner {float:right}

#navegacion {margin: 0px 0px 4px 0px; background-color: #000066}

#menu {text-align:center; padding: 10px 0px 15px 0px; background-image:url(objetos/degradado2.jpg)}
#contenido {padding: 10px 10px 10px 10px; text-indent: 15px; text-align: justify}

#navegacion a {color: #CCCCCC; display:block; text-decoration:none; margin: 1px; font-weight:bold}
#navegacion a:link {}
#navegacion a:hover {color: #FFFFFF; background-color:#000000}
#navegacion a:active {color: #99FFFF}
#navegacion a:visited {}

#menu a {color: #CCCCCC; display:block; text-decoration:none; background-color: #1C1C1C; margin: 1px}
#menu a:link {}
#menu a:visited {}
#menu a:hover {color: #FFFFFF; background-color:#000000}
#menu a:active {color: #99FFFF}

ul {margin: 0px; padding: 0px; list-style: none}

Nuestra página se tiene que ver en estos momentos así. Para cuaquier pregunta recordad que estamos a vuestra disposición en el foro.

atras
adelante

Volver a crear webs>>


Creada el 10/05/08 16:31
Copyright © - Todos los derechos reservados - Página creada por Juanma