a:active no funciona

auri501 · #1 (**permalink**) 17/01/2011, 10:00

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 · #2 (**permalink**) 17/01/2011, 10:32

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

Código HTML:

Ver original<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:

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

PrendekZ · #3 (**permalink**) 17/01/2011, 11:43

Una forma más para hacerlo:

Cita:

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

CSS:

Cita:

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:

Cita:

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 · #4 (**permalink**) 18/01/2011, 03:08

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 · #5 (**permalink**) 18/01/2011, 05:56

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 · #6 (**permalink**) 18/01/2011, 06:06

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.