a:active no funciona

[auri501]

Buenas tardes a todos,

Estoy creando un menú con este estilo:

Código PHP:

  <style type="text/css">
a.item_menu {
    float: left;
    width: auto;
    margin-left: 20px;
    height: 30px;
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
}
 
a.item_menu:hover {
    padding-top: 15px;
    padding-bottom: 4px;
    border-top-width: medium;
    border-right-width: medium;
    border-bottom-width: medium;
    border-left-width: medium;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-top-color: #FFF;
    border-right-color: #FFF;
    border-bottom-color: #FFF;
    border-left-color: #FFF;
}
a.item_menu:active {
    padding-top: 15px;
    padding-bottom: 4px;
    border-top-width: medium;
    border-right-width: medium;
    border-bottom-width: medium;
    border-left-width: medium;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-top-color: #FFF;
    border-right-color: #FFF;
    border-bottom-color: #FFF;
    border-left-color: #FFF;
}
 
-->
</style> 
   

y este es el menú:

Código PHP:

  <div id="menu">
            <a href="index.php" class="item_menu" >
                <span class="texto_blanco">INICIO</span>
           </a>
           <a href="#" class="item_menu" ><span class="texto_blanco">LA SASTRERIA</span>
           </a>
           <a href="#" class="item_menu" >
                <span class="texto_blanco">GALERIA FOTOGRAFICA</span>
           </a>
           <a href="#" class="item_menu" >
                <span class="texto_blanco">NOTICIAS</span>
           </a>
           <a href="#" class="item_menu" >
                <span class="texto_blanco">CATALOGO</span>
           </a>
           <a href="#" class="item_menu" >
                <span class="texto_blanco">CONTACTO</span>
           </a>
        </div> 
   

pero cuando pulso sobre el index el estilo active no aparece, quiero que cuando esté en el index se cargue un estilo predeterminado. Alguien sabe porqué no funciona? gracias.

[maycolalvarez]

la regla css es clara: a.item_menu:active elemento a de la clase item_menu, sin ningún span :

Código HTML:

<a href="index.php" class="item_menu" >
                <span class="texto_blanco">INICIO</span>
           </a>
 

puedes especificar otra regla más global como:

Código CSS:

a .item_menu:active {
/* todo elemento clase item_menu dentro de a*/
}
a.item_menu:active,
a span.item_menu:active
{ 
 
}
 

[PrendekZ]

Una forma más para hacerlo:

<div id="menu">
<a href="index.php" class="item_menu active" >
<span class="texto_blanco">INICIO</span>
</a>
<a href="#" class="item_menu" ><span class="texto_blanco">LA SASTRERIA</span>
</a>
<a href="#" class="item_menu" >
<span class="texto_blanco">GALERIA FOTOGRAFICA</span>
</a>
<a href="#" class="item_menu" >
<span class="texto_blanco">NOTICIAS</span>
</a>
<a href="#" class="item_menu" >
<span class="texto_blanco">CATALOGO</span>
</a>
<a href="#" class="item_menu" >
<span class="texto_blanco">CONTACTO</span>
</a>
</div>

CSS:

a.item_menu .active {
padding-top:15px 0 4px 0;
border-top:medium solid #fff;
border-bottom:medium solid #fff;
border-right:0;
border-left:0;
}

Hay tienes, pero también te mejoro todo el CSS:

a.item_menu {
float:left;
width:auto;
margin-left:20px;
height:30px;
padding-top: 20px 10px 0 10px;
}

a.item_menu:hover {
padding-top:15px 0 4px 0;
border-top:medium solid #000;
border-bottom:medium solid #000;
border-right:0;
border-left:0;
}
a.item_menu:active {
padding-top:15px 0 4px 0;
border-top:medium solid #000;
border-bottom:medium solid #000;
border-right:0;
border-left:0;
}

Saludos!

[auri501]

Gracias a los dos por vuestras respuestas!

pero sigo sin ver lo que yo quiero hacer, quizás no me he explicado bien.

Quisiera mantener el estilo de los dos bordes superior e inferior si se ha pulsado sobre inicio y estas en index.php. De esta forma solo aparece el borde superior e inferior cuando se pasa por encima el ratón.

Gracias otra vez!!

[sanxuan]

Si no te basta con a:visited que define la apariencia de un enlace ya visitado anteriormente, sólo te queda la posibilidad de usar programación, por ejemplo en JavaScript.
CSS no es un lenguaje de programación.

[auri501]

Si ya he visto que estaba equivocada con la funcionalidad de a:active.

Lo he solucionado usando un estilo especifico para el enlace activo.

Gracias a todos por vuestras aclaraciones.