Hola, estoy haciendo una web, y ahora mismo tengo un problemilla al hacer un menu en js y css, el javascript ya funciona perfectamente, pero con el css tengo preblemas:
La lista es horizontal, y es una tabla en la que cada celda es una opción, la lista tiene un efecto pestaña, por lo que la imagen la carga primero de un lado y después del otro lado, para redondear las esquinas, os pongo el html:
<table class="title-width title-button-height" border="1" cellspacing="0" cellpadding="0">
<tr>
<td id="inicio" class="button-deactivated" onmouseover="highlight(this)" onmouseout="downlight(this)" onclick="activate(this.id, 'prensa.html')">prensa</td>
Y el css es este:
.button-deactivated {
padding-left: 2px;
padding-right: 2px;
padding-top: 0px;
padding-bottom: 0px;
margin: 0px;
text-align: center;
/* Fondo */
background: url(tab.png) no-repeat;
Imagen general muestra el lado derecho en color azul
font-size: 15px;
font-weight: normal;
color: rgb(51,51,51);
cursor: pointer;
}
.button-highlight {
padding-left: 2px;
padding-right: 2px;
padding-top: 0px;
padding-bottom: 0px;
margin: 0px;
text-align: center;
font-size: 15px;
font-weight: normal;
color: rgb(51,51,51);
/* Fondo */
background: url(tab.png) no-repeat;Imagen general
background-position: 100% -150px; /*lateral derecho blanco*/
font-size: 15px;
font-weight: normal;
color: rgb(51,51,51);
cursor: pointer;
}
.button-activated {
padding-left: 2px;
padding-right: 2px;
padding-top: 0px;
padding-bottom: 0px;
margin: 0px;
text-align: center;
/* Fondo */
background: url(tab.png) no-repeat;
background-position: 100% -150px; /*lateral derecho blanco*/
font-size: 11px;
font-weight: normal;
color: rgb(51,51,51);
cursor: pointer;
}
La imagen que uso se llama tab.png, y esos backgroundposition son las referencias para que se vea bien, pero como dije, sólohe conseguido que se me vea un lado redondeado a la vez. Este menu e sde un ejemplo que conseguí y le estoy adaptando, por eso tengo las otras referencias para los otros dos laterales que me quedan:
Lateral derecho azul(desactivado):
background-position: 100% -100px;/*lateral derecho azul*/
Lateral izquierdo blanco(activado):
padding-top: 7px;
background-position: 0 -50px;
Se que el problema es del css, y hay que hacer algo del tipo
.button-activated a xxx{}
pero no he dado con ello, y sólo he conseguido que me muestre un lado a la vez.
Espero no haberos aburrido. Muchas gracias por la ayuda.
