Pestaña Activa en Css

Estado
Cerrado para nuevas respuestas

abmptc

Nuevo Miembro
Miembro
Hola,

Estoy haciendo una página asp con pestañas. Para manejar las pestañas estoy usando un archivo Css con la siguiente codificación:

HTML:
#header 
{ 
    width: 100%; 
    height: 100px; 
    margin: 0 auto; 
    padding: 2px 0 0 0; 
    background: #FFFFFF url(../images/img01_peque.gif) repeat-x; 
} 

#menu 
{ 
    float: left; 
    padding: 0 0 0 0; 
    width: 603px; 
    height: 30px; 
} 

#menu ul 
{ 
    height: 30px; 
    margin: 0; 
    padding: 2px 0; 
    list-style: none; 
    width: 800px; 
} 

#menu li 
{ 
    display: inline; 
} 

#menu a 
{ 
    display: block; 
    float: left; 
    width: 120px; 
    height: 60px; 
    padding-top: 12px; 
    background: url(../images/img03.jpg) no-repeat; 
    text-align: center; 
    text-decoration: none; 
    letter-spacing: -1px; 
    font-size: 18px; 
    /* text-transform: lowercase; */ 
} 

#menu a:hover, #menu .active a 
{ 
    background-image: url(../images/img04.jpg); 
    color: #FFFFFF; 
} 

#menu #current a 
{ 
    background-image: blue; 
    color: red; 
}
Con esto código consigo que cuando pasamos el ratón por encima de una pestañas, esta cambie de color. ¿Hay algúna forma de configurar las pestañas con css para que cuando hagamos click con el ratón en una pestaña se quede con un color distinto, para así saber en que pestaña estamos en cada momento?

Muchas gracias de antemano y un saludo.
 

fonsi_18

Nuevo Miembro
Miembro
no recuerdo bien... se que lo hice en su dia...
pero ya te digo no recuerdo si es que había una forma de hacerlo con algún evento...
espera a que algún experto en programacion web te ayude
 

JPablo

Miembro Activo
Miembro
Bien, está bien el código. Lo que yo haría, si es HTML (si es PHP u otro lenguaje podrías trabajarlo) es agregar un id o class al link en cuestión.
Veo que habías empezado. Podrías dejarlo así.
Insertar CODE, HTML o PHP:
#menu a#current 
{ 
color: red; 
}
Entonces, suponemos un código html común para la página Inicio
HTML:
<div id="menu">
<ul>
<li><a href="index.html" id="current">Inicio</a></li>
<li><a href="ejemplo.html">Ejemplo</a></li>
</ul>
</div>
Y ahora para la página Ejemplo.
HTML:
<div id="menu">
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="ejemplo.html" id="current">Ejemplo</a></li>
</ul>
</div>
Espero quede claro.
Igual si es PHP podrías trabajarlo y evitar eso.

Seguro te sirve.
Saludos.

PD: Si alguien es tan amable de mover el hilo a Webmaster ;)
 

osava

Nuevo Miembro
Miembro
En el codigo html a cada enlace colocale una clase diferente y luego en el codigo ccs a esas clases le das hover con su respectivo color y así obtines un buen diseño de pagina web
 
Estado
Cerrado para nuevas respuestas
Arriba Pie