Menu de pestañas invertidas

Este es el tipo de menú que usé durante mucho tiempo en El Escaparate y que podéis ver debajo de las etiquetas al pie del header.
Este menú esta sacado de Dynamic Drive, aunque con algunas modificaciones en cuanto a color, tipo de texto, etc. que pueden hacerse sin problemas en el código CSS del menú.
En Dynamic Drive, como podéis ver en la imagen, han usado dos colores: #8b0000 y #d50509, así que para cambiarlos solo tenéis que localizar esos códigos en el CSS del menú y sustituirlos por el código de vuestros colores.

[1] En primer lugar nos descargamos estas dos imágenes a nuestro PC (botón derecho del ratón, guardar como) y las subimos a nuestro propio alojamiento para más tarde usar su url en el código del menú:

Hacerlo así, y no copiéis la url de mis imágenes, pues no sería la primera vez que por problemas de ancho de banda he de trasladar imágenes a otro alojamiento y si eso pasase, el menú se desconfiguraría.

[2] Colocamos ahora el código CSS del menú justo antes de </head>:

<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
#invertedtabs{
margin-left: 4px;
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 5px;
}
#invertedtabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin:0;
margin-bottom: 1em; /*margin between menu and rest of content*/
padding:0;
list-style:none;
}
#invertedtabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
line-height: 1.5em;
}
#invertedtabs a{
float:left;
color: white;
background: #8b0000 url(media/color_tabs_left2.gif) no-repeat left bottom;
margin:0 2px 0 0;
padding:0 0 0 3px;
text-decoration:none;
letter-spacing: 1px;
}
#invertedtabs a span{
float:left;
display:block;
background: transparent url(media/color_tabs_right2.gif) no-repeat right bottom;
padding:3px 9px 3px 6px;
}
#invertedtabs a span{
float:none;
}
#invertedtabs a:hover{
background-color: #d50509;
}
#invertedtabs a:hover span{
background-color: #d50509;
}
#invertedtabs #current a, #invertedtabs #current span{ /*currently selected tab*/
background-color: #d50509;
}
#invertedtabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #8b0000;
border-bottom: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}
</style>

Es aquí donde tendremos que sustituir: media/color_tabs_left2.gif y media/color_tabs_right2.gif por la url de las imágenes que hemos descargado antes, fijaros que no es demasiado dificil saber en que lugar va cada una, pues la terminación de su url será la misma que la del ejemplo.

Cambiamos también aquí el código de los colores como ya os explicaba antes, por los vuestros.

[3] Colocamos ahora el código necesario para mostrar nuestro menú y donde vamos a construir los enlaces. Podemos ponerlo directamente en un nuevo elemento (Gadget) HTML y arrastrarlo a debajo de la cabecera o, como en mi caso, colocarlo en el "crosscol".

En la entrada "Aprovechando espacios en la plantilla (crosscol)", podéis ver como dar uso a la zona del "crosscol".

<div id="invertedtabsline"> </div>

<div id="invertedtabs">
<ul>
<li style="margin-left: 1px"><a href="http://elescaparatederosa.blogspot.com" title="Inicio"><span>Inicio</span></a></li>
<li><a href="mailto:lejaniaimposible@hotmail.com" title="Envia un email"><span>Contacto</span></a></li>
<li><a href="http://feeds.feedburner.com/blogspot/hnBy" title="Suscribete al Escaparate"><span>Suscribe Feed</span></a></li>
<li><a href="http://www.blogger.com/profile/06743611108067453905" title="Sobre mi"><span>Sobre mi</span></a></li>
<li><a href="http://elescaparatederosa.blogspot.com/search/label/?max-results=999" title="Ver todas las entradas"><span>Ver todas las entradas</span></a></li>
</ul>
</div>
<br style="clear: left"/>

Por supuesto tendréis que cambiar en este código mis datos (los he resaltado en negrita) por los vuestros.

ElHackerZ