Hola, sigo sin conseguirlo. Es un sistemad e navegacion por pestañas en el que cada pestaña es un <li>. He querido hacer 3 pestañas con diferente imagen de fondo porque son mas estrechas que las 3 primeras.
El problema es que ahora si que veo las 3 pestaña de la clase nav_corto2 pero detras de ellas se ve la imagen "pest_color.gif". Esta imagen es la que tiene la pestaña cuando estás en su pagina. Es de otro color para saber en cuál estás.
Automaticamente cuando no tiene un enlace una pestaña se pone la de otro color y si tiene un enlace se ve esta otra foto: "pest_off.gif".
También el problema que tengo aparte de que por debajo se siga viendo la otra foto, es que me sigue respetando el espacio entre <li> y <li> que tienen los <li> grandes, no me coge el del pequeño.
Este es el codigo:
Código:
#nav {width:994px; overflow:hidden; text-align:right;}
.miestilo #nav {background:url(fondo_nav.gif) left bottom repeat-x;}
#nav ul {float:left; height:33px;}
#navn li {float:left; width:120px; margin:0px 2px; text-align:center; display:block; font:normal 12px Arial, Helvetica, sans-serif; color:#FFF; height:29px; line-height:31px;}
.miestilo #nav li {background:url(pest_color.gif) 0 0 no-repeat;}
#nav li a {
background:url(pest_off.gif) 0 0 no-repeat;
text-align:center;
display:block;
font:normal 12px Arial, Helvetica, sans-serif;
color:#9D4A00;
text-decoration:none;
height:29px;
line-height:31px;
}
#nav li a:hover {
color:#000;
}
.nav_corto2 {
float:left;
width:78px;
text-align:center;
display:block;
font:normal 12px Arial, Helvetica, sans-serif;
color:#9D4A00;
background:url(pest_off_corta2.gif) 0 0 no-repeat;
text-align:center;
text-decoration:none;
height:29px;
line-height:31px;
margin-left: 2px;
margin-right: 2px;
}
.nav_corto2 a{
text-align:center;
display:block;
font:normal 12px Arial, Helvetica, sans-serif;
color:#9D4A00;
text-decoration:none;
height:29px;
line-height:31px;
}
.nav_corto2 a:hover {
color:#000;
}
Código:
<body class="miestilo">
<div id="nav">
<ul>
<li><a href="link1.php">Link1</a></li>
<li><a href="link2.php">Link2</a></li>
<li><a href="link3.php">Link3</a></li>
<li><a class="navegacion_corto2" href="link4.php">Link4</a></li>
<li><a class="navegacion_corto2" href="link5.php">Link5</a></li>
<li><a class="navegacion_corto2" href="link6.php">Link6</a></li>
</ul>
</div>