Foros del Web » Creando para Internet » CSS »

CSS a:active no funciona

Estas en el tema de CSS a:active no funciona en el foro de CSS en Foros del Web. Buenas, tengo n problema con mi código css, por más que doy vueltas “a:active” no me funcina. Hover funciona a la perfección, pero cuando le ...
  #1 (permalink)  
Antiguo 17/07/2009, 18:45
 
Fecha de Ingreso: diciembre-2007
Mensajes: 31
Antigüedad: 10 años
Puntos: 0
De acuerdo CSS a:active no funciona

Buenas, tengo n problema con mi código css, por más que doy vueltas “a:active” no me funcina.

Hover funciona a la perfección, pero cuando le doy clic al botón y actualiza o abre la url vuelve a su estado normal.


Lo que quiero es que se mantenga en el fondo y color activo “azul” del link activo, pero cuando quito el cursor vuelve a gris, el color del link no activo.


El código css que estoy utilizando es el siguiente:

Código:
/*-------columna derecha---------*/

#rightcol ul li
{list-style:none; padding:0px 15px 0px 5px; position:relative;}

#rightcol ul li a
{
text-decoration:none;
padding-left:20px;
padding-top:5px;
background: url(../images/sidenavup.png) no-repeat left center;
display:block;
font: Arial, Helvetica, sans-serif;
color:#666666;
width:150px;
}
/*Sidenav Links*/
#rightcol ul li a:hover
{
text-decoration:none;
padding-left:20px;
padding-top:5px;
background:url(../images/sidenavover.png) no-repeat left center;
display:block;
font: Arial, Helvetica, sans-serif;
color:#0081BF;
}

#rightcol a:active {
text-decoration:none;
padding-left:30px;
padding-top:5px;
padding-bottom:3px;
background: url(../images/sidenavover.png) no-repeat 0px 5px;
border-bottom: 1px solid #cacaca;
display:block;
font: Arial, Helvetica, sans-serif;
color:#666666;
margin:0;
width:150px;
}

#rightcol a.mainlevel:active, #rightcol a.mainlevel-sidenav:active {
text-decoration:none;
padding-left:30px;
padding-top:5px;
padding-bottom:3px;
background:url(../images/sidenavover.png) no-repeat 0px 5px;
display:block;
font: Arial, Helvetica, sans-serif;
color:#0081BF;
width:150px;
}

#rightcol a.mainlevel#active_menu, #rightcol a.mainlevel-sidenav#active_menu-sidenav {
text-decoration:none;
padding-left:30px;
padding-top:1px;
padding-bottom:3px;
background:url(../images/sidenavover.png) no-repeat 0px 5px;
display:block;
font: Arial, Helvetica, sans-serif;
color:#0081BF;
}

#rightcol a.#active_menu:hover, #rightcol a.mainlevel-sidenav#active_menu-sidenav:hover {
text-decoration:none;
padding-left:10px;
padding-top:30px;
padding-bottom:3px;
background: url(../images/sidenavup.png) no-repeat 0px 5px;
border-bottom: 1px solid #cacaca;
display:block;
font: Arial, Helvetica, sans-serif;
color:#666666;
margin:0;
width:150px;

}

#rightcol .inside {
	width:209px;
	padding:0;
	margin:0px 30px 5px 30px;
	position: relative;
}

td#rightcol {
	width:200px;
	margin: 0px;
	padding: 0px;
	background-image: url(../images/modulefade2.png);
	background-repeat: no-repeat;
	background-position: left top;
}

td#rightshadow {
	background-image: url(../images/wrapright.png);
	background-repeat: repeat-y;
	background-position: right bottom;
	margin: 0px;
	padding: 0px;
	width: 5px;
	vertical-align: top;
}
Muchas gracias de antemano.

  #2 (permalink)  
Antiguo 17/07/2009, 19:20
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 9 años, 4 meses
Puntos: 1530
Respuesta: CSS a:active no funciona

active es para cuando lo tienes activo: presionado con el botón o tiene el FOCO
visited es lo que necesitas para los enlaces ya visitados
  #3 (permalink)  
Antiguo 17/07/2009, 20:09
 
Fecha de Ingreso: diciembre-2007
Mensajes: 31
Antigüedad: 10 años
Puntos: 0
Respuesta: CSS a:active no funciona

entiendo, pero lo que necesito es que este de color el enlace en el que se esta en el momento,

es decir, al enlace del menu que se le dio clic que se quede de ese color hasta que se le de clic a otro
  #4 (permalink)  
Antiguo 17/07/2009, 20:22
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: CSS a:active no funciona

juand210 eso tendrias que hacerlo dinamicamente, con php, que al estar en dicha zona cambie la clase, para dar ese efecto. solo con css esto no se puede, pero si tienes un sitio estatico, y con HTML independientes, podrias asignarle una clase y cambiarla en el documento correspondiente... chao!...
  #5 (permalink)  
Antiguo 18/07/2009, 14:13
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: CSS a:active no funciona

Hola:

Cita:
Iniciado por juand210 Ver Mensaje

Código:
#rightcol ul li a:hover
{
text-decoration:none;
padding-left:20px;
padding-top:5px;
background:url(../images/sidenavover.png) no-repeat left center;
display:block;
font: Arial, Helvetica, sans-serif;
color:#0081BF;
}

#rightcol a:active {
text-decoration:none;
padding-left:30px;
padding-top:5px;
padding-bottom:3px;
background: url(../images/sidenavover.png) no-repeat 0px 5px;
border-bottom: 1px solid #cacaca;
display:block;
font: Arial, Helvetica, sans-serif;
color:#666666;
margin:0;
width:150px;
}
Igual me equivoco, pero fíjate en la diferencia entre los dos selectores que te marco en rojo (uno lo declaras directamente, a:active, y el otro ul li a:hover).

El orden de las pseudoclases es :

Código:
a:link
a:visited
a:hover
a:active
Y no veo necesario para nada hacerlo con php. Tienes este ejemplo hecho con CSS por Mikmoro, posiblemente te sirva.

Saludos.

  #6 (permalink)  
Antiguo 18/07/2009, 16:33
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: CSS a:active no funciona

el "a:focus" le podria servir pero no lo sugeri, por que no anda en opera y en crhome... chao y suerte!... en safari y crhome en opera si...

Última edición por alexk; 18/07/2009 a las 16:34 Razón: ups
  #7 (permalink)  
Antiguo 18/07/2009, 17:25
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: CSS a:active no funciona

Pienso que la forma sería esta:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vinculos activos</title>
<style type="text/css">
body{font-family:Verdana, Arial, Helvetica, sans-serif;}
#menu{width:700px; height:2em; margin:0 auto; border:1px solid #CCC; background:#069; overflow:hidden;}
#menu ul{width:400px; margin:0 auto; list-style:none;}
#menu ul li{float:left;}
#menu a{ font-size:0.8em; font-weight:bold;color:#FFF; text-decoration:none;padding:8px 10px 8px 10px; display:block; border-left:1px solid #333;border-right:1px solid #333;}
#menu a:hover,#menu a:focus,#menu a:active{color:#CCC; text-decoration:underline; display:block;}
#menu a.current{color:#CCC; text-decoration:underline; display:block;}
</style>
</head>

<body>
<div id="menu">
	<ul>
    	<li><a href="#">Menu 1</a></li>
        <li><a href="#" class="current">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
        <li><a href="#">Menu 5</a></li>
    </ul>
</div>
</body>
</html>
Si estas haciendo una web plana, solo html+css esto te servirá, colocas la clase current en el que tenga que estar activo en ese momento.

Si la web es dinámica necesitaras ayuda de php o asp o lo que estes utilizando para programarla.

Como te digo, todo depende de como este hecha la web, ya nos contarás.
__________________
WFC
codigo82

Última edición por willyfc; 18/07/2009 a las 17:33
  #8 (permalink)  
Antiguo 18/07/2009, 17:47
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: CSS a:active no funciona

Hola:

Cita:
Iniciado por alexk Ver Mensaje
el "a:focus" le podria servir pero no lo sugeri, por que no anda en opera y en crhome... chao y suerte!... en safari y crhome en opera si...
y el a:hover no funciona en IE6.

Saludos.

  #9 (permalink)  
Antiguo 18/07/2009, 20:16
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.460
Antigüedad: 15 años, 4 meses
Puntos: 2097
Respuesta: CSS a:active no funciona

Cita:
Iniciado por jomaruro Ver Mensaje
Hola:



y el a:hover no funciona en IE6.

Saludos.

¿Seguro? Según recuerdo yo, que seguramente recuerdo mal, en IE6 la pseudoclase :hover no la reconoce si no es en un elemento A. Es decir, a:hover si lo reconoce, pero div:hover o #algo:hover no.
  #10 (permalink)  
Antiguo 28/06/2010, 16:41
 
Fecha de Ingreso: diciembre-2009
Mensajes: 24
Antigüedad: 8 años
Puntos: 1
Respuesta: CSS a:active no funciona

Ya paso 12 meses desde la pregunta, pero tengo una solución amigo:

Supongamos que tienes la pagina empresa.html y dentro el enlace del menu que dice empresa debe estar marcado, verdad, entonces hacemos lo siguiente

en nuestro html de la pagina empresa.html,

en la etiqueta body
<body id="pagEmpresa"> --- esto exclusivamente en la pagina empresa.html

en la opcion de nuestro menu
<a href="empresa.html" id="btnEmpresa">La empresa</a>

en nuestro css:

pondiamos lo siguiente:

body#pagEmpresa a#btnEmpresa{.....las propiedades y valores.....}

entonces estarías condicionando el estilo solo a la opcion empresa dentro de la pagina de la empresa.

Espero les sirva,
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 08:32.