Menú horizontal

Para poner un menú horizontal con los enlaces que nos interesen.


1- Antes de ]]></b:skin> en el HTML de nuestra plantilla, colocamos esta porción de CSS:

#navcontainer ul
{
text-align: center;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 0;
margin-top: 0;
/* cancels gap caused by top padding in Opera 7.54 */
margin-left: 0;
background-color: #C0C0C0;
color: white;
width: 100%;
font-family: Arial,Helvetica,sans-serif;
line-height: 18px;
/* fixes Firefox 0.9.3 */

}

#navcontainer ul li
{
display: inline;
padding-left: 0;
padding-right: 0;
padding-bottom: 5px;
/* matches link padding except for left and right */
padding-top: 5px;
background-color: #333399;
}

#navcontainer ul li a
{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
color: white;
text-decoration: none;
border-right: 1px solid #fff;
}

#navcontainer ul li a:hover
{
background-color: #CC3300;
color: white;

}

#navcontainer #active { border-left: 1px solid #fff;
}


Aquí es donde podemos cambiar los colores de nuestro menú, el tamaño del texto, la separación, etc.

2- Buscamos en nuestra plantilla esta línea de código:

<div id='content-wrapper'>

Y justo a continuación añadimos la parte del código que mostrará nuestro menú debajo de la cabecera del blog:

<div id='navcontainer'>
<ul id='navlist'>
<li id='active'><a href='http://jesgopru23.blogspot.com' id='current'>Inicio</a></li>
<li><a href='mailto:jesgo999@gmail.com'>Contacto</a></li>

</ul></div>

Sin comentarios

» Escribe tu comentario aquí:


Si quieres hacer alguna consulta sobre tu blog habilita tu perfil o deja un enlace a tu blog:
<a href="url-de-la-página">Texto enlace</a>

» O utiliza el antiguo formulario


Los comentarios están siendo moderados y publicados lo antes posible.



jesgo23 ©2008/2009 | Plantilla Blogger | Diseño jesgo Creative Commons License