Foros del Web » Creando para Internet » CSS »

Problemas con class="active"

Estas en el tema de Problemas con class="active" en el foro de CSS en Foros del Web. Hola! A ver si me pueden ayudar. Tengo dos menus en mi pagina, necesito que uno de los botones me muestre el estado "activo" ya ...
  #1 (permalink)  
Antiguo 12/06/2009, 14:48
Avatar de Submarina  
Fecha de Ingreso: septiembre-2008
Ubicación: Buenos Aires, Argentina
Mensajes: 6
Antigüedad: 9 años, 3 meses
Puntos: 2
Problemas con class="active"

Hola!
A ver si me pueden ayudar. Tengo dos menus en mi pagina, necesito que uno de los botones me muestre el estado "activo" ya que quiero mostrar al usuario que se encuentra en dicha sección del menu. En el menu principal funciona colocandole class="active" al link (en el código esta en la sección COLECCION) , pero cuando le aplico el mismo class al otro menu no me funciona! ¿Alguien me puede ayudar? Desde ya muchas gracias!

HTML

Código HTML:
 <!-- MENU -->
        <div id="menu_container">
        
            <ul id="menuholder"> 
                <li id="menu_coleccion"><a href="#" title="COLECCION" class="active">COLECCION</a></li> 
                <li id="menu_quienes"><a href="#" title="QUIENES?">QUIENES?</a></li> 
                <li id="menu_como"><a href="#" title="COMO?">COMO?</a></li> 
                <li id="menu_contacto"><a href="#" title="CONTACTENOS">CONTACTENOS</a></li> 
                <li id="menu_anteriores"><a href="#" title="ANTERIORES">ANTERIORES</a></li> 
            </ul> 
        
        </div>
        <!-- END MENU -->

        <!-- RIGHT MENU -->
        <div id="rightmenu_container">

            <hr class="black" />
            <img src="images/nav_menu/rightnavmenu_mas.jpg" alt="más" />
            <hr class="dotted" />

            <ul id="rightmenuholder"> 
                <li id="rightmenu_local"><a href="#" title="LOCAL">LOCAL</a><hr class="dotted" /></li>
                <li id="rightmenu_prensa"><a href="#" title="PRENSA">PRENSA</a><hr class="dotted" /></li>
                <li id="rightmenu_mayoristas"><a href="#" title="MAYORISTAS">MAYORISTAS</a><hr class="dotted" /></li>
                <li id="rightmenu_inicio"><a href="#" title="INICIO">INICIO</a></li> 
            </ul>
            
            <hr class="black" />
        
        </div>
        <!-- END RIGHT MENU --> 
CSS

Código:
/*
    MENU
*/

#menu_container {
    position: absolute;
    top: 177px;
    left: 50%;
    margin-left: -45px;    
}

#menuholder ul,li {
    list-style-type:none;
}

#menuholder li {
    float:left;
}

#menuholder a {
    background:url(../images/nav_menu/navmenu_btn.jpg);
    display:block; 
    height:27px; 
    text-indent:-9000%
}

/*ESTADO NORMAL*/
#menu_coleccion a {width:80px;}
#menu_quienes a {width:72px; background-position:-80px 0px;}
#menu_como a {width:72px; background-position:-152px 0px;}
#menu_contacto a {width:72px; background-position:-224px 0px;}
#menu_anteriores a {width:72px; background-position:-296px 0px;}

/*ESTADO ROLLOVER*/
#menu_coleccion a:hover {background-position:0px -27px;}
#menu_quienes a:hover{background-position:-80px -27px;}
#menu_como a:hover {background-position:-152px -27px;}
#menu_contacto a:hover {background-position:-224px -27px;}
#menu_anteriores a:hover {background-position:-296px -27px;}

/*ESTADO ACTIVO*/
#menu_coleccion a.active {background-position:0px -54px;}
#menu_quienes a.active {background-position:-80px -54px;}
#menu_como a.active {background-position:-152px -54px;}
#menu_contacto a.active {background-position:-224px -54px;}
#menu_anteriores a.active {background-position:-296px -54px;}

/*
    RIGHT MENU
*/

#rightmenu_container {
    position: absolute;
    top: 250px;
    left: 50%;
    margin-left: 180px;
}

#rightmenuholder ul,li {
    list-style-type:none;
}

#rightmenuholder a {
    background:url(../images/nav_menu/rightnavmenu_btn.jpg);
    display:block; 
    height:30px; 
    text-indent:-8000%
}

/*ESTADO NORMAL*/
#rightmenu_local a {width:140px;}
#rightmenu_prensa a {width:140px; background-position:0px 90px;}
#rightmenu_mayoristas a {width:140px; background-position:0px 60px;}
#rightmenu_inicio a {width:140px; background-position:0px 30px;}

/*ESTADO ROLLOVER*/
#rightmenu_local a:hover {background-position:-140px 0px;}
#rightmenu_prensa a:hover {background-position:-140px 90px;}
#rightmenu_mayoristas a:hover {background-position:-140px 60px;}
#rightmenu_inicio a:hover {background-position:-140px 30px;}

/*ESTADO ACTIVO*/
#rightmenu_local a.active {background-position:-280px 0px;}
#rightmenu_prensa a:active {background-position:-280px 90px;}
#rightmenu_mayoristas a:active {background-position:-280px 60px;}
#rightmenu_inicio a:active {background-position:-280px 30px;}
  #2 (permalink)  
Antiguo 12/06/2009, 15:13
Avatar de gioramies  
Fecha de Ingreso: febrero-2008
Ubicación: Colombia
Mensajes: 217
Antigüedad: 9 años, 9 meses
Puntos: 14
Respuesta: Problemas con class="active"

Hola:

Al parecer tienes un error aquí, colocaste dos puntos (:) en vez de uno (.)

CSS:

Código:
*ESTADO ACTIVO*/
#rightmenu_local a.active {background-position:-280px 0px;}
#rightmenu_prensa a:active {background-position:-280px 90px;}
#rightmenu_mayoristas a:active {background-position:-280px 60px;}
#rightmenu_inicio a:active {background-position:-280px 30px;}
  #3 (permalink)  
Antiguo 12/06/2009, 15:19
Avatar de Submarina  
Fecha de Ingreso: septiembre-2008
Ubicación: Buenos Aires, Argentina
Mensajes: 6
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: Problemas con class="active"

uuuh que idiota soy!
Muchas gracias gioramies! Gracias por el QA!!

Saludos!
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 06:40.