Hola a todos/as:
Por si alguien estaba pensando en esto. Acabo de reducir el código a lo mínimo sin perder nada de lo que había conseguido, pero sigo sin dar con el truco para mantener la pestaña "pulsada" con el borde integrado en el elemento de debajo como si fuera una ficha. No me hace caso con los border-color ni con nada
.
¿Alguien tiene alguna idea?
El código reducido:
HTML
Código HTML:
<div id="Pestanas">
<ul>
<li><a href="#" rel="1" class="button">Perfil</a></li>
<li><a href="#" rel="2" class="button">Referencias</a></li>
<li><a href="#" rel="3" class="button">Documentos</a></li>
</ul>
</div>
el CSS
Código HTML:
/*Menus de pestaña*/
#Pestanas{margin-left: 4px;padding: 0px;width: 100%;padding-left: 5px;}
#Pestanas ul{font: bold 11px Arial, Verdana, sans-serif;margin:0;padding:5px;list-style:none;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
#Pestanas li{display:inline;margin:0 2px 0 0;padding:5px;border:1px; border-color:FireBrick;line-height: 1.5em;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
#Pestanas a{float:left;color: white;background-color: FireBrick;border:1px; border-color:FireBrick;margin:0 2px 0 0;padding:5px;text-decoration:none;letter-spacing: 1px;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
#Pestanas a:hover{background-color: #d50509;border-color:FireBrick;}
#Pestanas a:active{background:#e9e9e9;border-color:FireBrick ;color:#666 }
/*Contenido página formularios página central*/
#contenido { float:left;padding:0; margin:0; border:1px Solid #8b0000;}
El DIV Contenido esta pegado a los botones dando la apariencia de que estos son las pestañas de las fichas lo que contiene es lo que cambia cuando se pincha la pestaña.
No se lo que falta por añadir para conseguir el efecto. Conceptualmente lo que quiero es que la pestaña cambie de color eliminando cambiando el color de la linea que coincide con el DIV contenido y lo mantenga mientras el usuario esté en esa pestaña creando el "efecto ficha" como en las pestañas de los exploradores, por ejemplo
.
Muchas gracias a todos por la paciencia
