Foros del Web » Creando para Internet » CSS »

Lista de tabs

Estas en el tema de Lista de tabs en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/11/2007, 06:29
 
Fecha de Ingreso: mayo-2005
Mensajes: 18
Antigüedad: 12 años, 7 meses
Puntos: 1
Lista de tabs

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.

Última edición por farelo; 27/11/2007 a las 06:36
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:56.