Foros del Web » Creando para Internet » CSS »

Como cambiar el color de un link activo

Estas en el tema de Como cambiar el color de un link activo en el foro de CSS en Foros del Web. Hola, me gustaría saber en un menú de mi web que cuando un link esté en activo que se quede en un color en concreto. ...
  #1 (permalink)  
Antiguo 26/05/2013, 05:37
Avatar de Scape  
Fecha de Ingreso: octubre-2006
Mensajes: 626
Antigüedad: 17 años, 8 meses
Puntos: 7
Como cambiar el color de un link activo

Hola, me gustaría saber en un menú de mi web que cuando un link esté en activo que se quede en un color en concreto.

Pensé que era así a:active pero no funciona. se tiene que añadir algo más?

Gracias
  #2 (permalink)  
Antiguo 26/05/2013, 05:53
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años
Puntos: 2114
Respuesta: Como cambiar el color de un link activo

Los enlaces activos no son aquellos que se están visitando, sino aquellos es los que se está haciendo click. Luego la pseudo-clase active no es para lo que quieres hacer.

Tendrías que crear una nueva clase en CSS y definir el color u otros estilos que necesites, y luego mediante programación de lado servidor añades en caso de que se esté visitando esa página. No es posible hacerlo puramente mediante CSS. A menos que sean enlaces en la misma página, que seguramente no sea tu caso.
  #3 (permalink)  
Antiguo 26/05/2013, 06:18
Avatar de Scape  
Fecha de Ingreso: octubre-2006
Mensajes: 626
Antigüedad: 17 años, 8 meses
Puntos: 7
Respuesta: Como cambiar el color de un link activo

Son enlaces dentro de mi web. Pensé que si era posible hacerlo,

Es complicado?
  #4 (permalink)  
Antiguo 26/05/2013, 06:53
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años
Puntos: 2114
Respuesta: Como cambiar el color de un link activo

Es posible si son enlaces en la misma página, no en la misma web.

Complicado no es. ¿Qué lenguaje de servidor usas?
  #5 (permalink)  
Antiguo 26/05/2013, 07:11
Avatar de Scape  
Fecha de Ingreso: octubre-2006
Mensajes: 626
Antigüedad: 17 años, 8 meses
Puntos: 7
Respuesta: Como cambiar el color de un link activo

Cita:
Iniciado por pzin Ver Mensaje
Es posible si son enlaces en la misma página, no en la misma web.

Complicado no es. ¿Qué lenguaje de servidor usas?
Mira es este menú

http://www.prot-on.com/proteger-documentos-o-fotografias
  #6 (permalink)  
Antiguo 26/05/2013, 07:16
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años
Puntos: 2114
Respuesta: Como cambiar el color de un link activo

Si, en esa página añaden mediante el lenguaje de servidor una clase en HTML:

Código HTML:
Ver original
  1. <span class="active-organizaciones">Organizaciones</span>

Y luego tienen en el CSS esa clase referenciada para poner un color al enlace:

Código CSS:
Ver original
  1. .active-organizaciones {
  2.   color: #F15312;
  3.   font-weight: normal;
  4. }

Es lo que te decía en el primer mensaje. Tienes que poner una clase en el HTML al elemento del menú que está activo.
  #7 (permalink)  
Antiguo 26/05/2013, 08:08
Avatar de Scape  
Fecha de Ingreso: octubre-2006
Mensajes: 626
Antigüedad: 17 años, 8 meses
Puntos: 7
Respuesta: Como cambiar el color de un link activo

Cita:
Iniciado por pzin Ver Mensaje
Si, en esa página añaden mediante el lenguaje de servidor una clase en HTML:

Código HTML:
Ver original
  1. <span class="active-organizaciones">Organizaciones</span>

Y luego tienen en el CSS esa clase referenciada para poner un color al enlace:

Código CSS:
Ver original
  1. .active-organizaciones {
  2.   color: #F15312;
  3.   font-weight: normal;
  4. }

Es lo que te decía en el primer mensaje. Tienes que poner una clase en el HTML al elemento del menú que está activo.

Buf entonces se me complica porque es de un widget y ni la menor idea de como meterlo en el html.

Gracias
  #8 (permalink)  
Antiguo 26/05/2013, 08:09
Avatar de Scape  
Fecha de Ingreso: octubre-2006
Mensajes: 626
Antigüedad: 17 años, 8 meses
Puntos: 7
Respuesta: Como cambiar el color de un link activo

[QUOTE=Scape;4437229]Mira es este menú
  #9 (permalink)  
Antiguo 26/05/2013, 10:39
Avatar de Scape  
Fecha de Ingreso: octubre-2006
Mensajes: 626
Antigüedad: 17 años, 8 meses
Puntos: 7
Respuesta: Como cambiar el color de un link activo

Cita:
Iniciado por pzin Ver Mensaje
Si, en esa página añaden mediante el lenguaje de servidor una clase en HTML:

Código HTML:
Ver original
  1. <span class="active-organizaciones">Organizaciones</span>

Y luego tienen en el CSS esa clase referenciada para poner un color al enlace:

Código CSS:
Ver original
  1. .active-organizaciones {
  2.   color: #F15312;
  3.   font-weight: normal;
  4. }

Es lo que te decía en el primer mensaje. Tienes que poner una clase en el HTML al elemento del menú que está activo.
Ya está, pero nada, no se queda activado el color, me debe de faltar algo.
  #10 (permalink)  
Antiguo 26/05/2013, 11:41
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años
Puntos: 2114
Respuesta: Como cambiar el color de un link activo

Pues pon el código que hiciste, sin eso poco se te puede decir.
  #11 (permalink)  
Antiguo 26/05/2013, 13:08
Avatar de Scape  
Fecha de Ingreso: octubre-2006
Mensajes: 626
Antigüedad: 17 años, 8 meses
Puntos: 7
Respuesta: Como cambiar el color de un link activo

a:hover a.active-profesionales {color:#184B6A;}
  #12 (permalink)  
Antiguo 26/05/2013, 16:52
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años
Puntos: 2114
Respuesta: Como cambiar el color de un link activo

¿Y en el HTML pusiste la clase .active-profesionales en algún sitio?
  #13 (permalink)  
Antiguo 27/05/2013, 02:25
Avatar de Scape  
Fecha de Ingreso: octubre-2006
Mensajes: 626
Antigüedad: 17 años, 8 meses
Puntos: 7
Respuesta: Como cambiar el color de un link activo

Cita:
Iniciado por pzin Ver Mensaje
¿Y en el HTML pusiste la clase .active-profesionales en algún sitio?
Si en el link ese está puesta esa clase en el html.
  #14 (permalink)  
Antiguo 27/05/2013, 04:35
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años
Puntos: 2114
Respuesta: Como cambiar el color de un link activo

Prueba así:

Código CSS:
Ver original
  1. a.active-profesionales:visited {
  2.   color: #184B6A;
  3. }
  #15 (permalink)  
Antiguo 27/05/2013, 05:02
Avatar de agunet  
Fecha de Ingreso: mayo-2013
Mensajes: 4
Antigüedad: 11 años, 1 mes
Puntos: 0
Respuesta: Como cambiar el color de un link activo

Codigo CSS

Código CSS:
Ver original
  1. a:link.categoria{color:black;text-decoration:none;}
  2.     a:visited.categoria{color:black;background:#ffb258;text-decoration:none;}
  3.     a:hover.categoria{color:black;background:#ffb258;text-decoration:none;}
  4.     a:active.categoria{color:black;background:#ffb258;text-decoration:none;}

Códgido PHP:
Código PHP:
Ver original
  1. echo "<a class='categoria' href='index.php?cat_id=$cat_id&accion=c&ca=$ca'>$descripcion</a> \n";

Lo que quiero es que muestre el mismo color cuando el moue pasa por arriba del enlace, cuando se haceclick en el enlace y cuao el el elnace esta acivo.

Lo queno me anda es lo ultimo. Al hacer click enuna cateogria, no queda pintada,

Veo que aca hay istas per no me sirve ninguna por ahora :(
  #16 (permalink)  
Antiguo 27/05/2013, 06:38
Avatar de Scape  
Fecha de Ingreso: octubre-2006
Mensajes: 626
Antigüedad: 17 años, 8 meses
Puntos: 7
Respuesta: Como cambiar el color de un link activo

Cita:
Iniciado por pzin Ver Mensaje
¿Y en el HTML pusiste la clase .active-profesionales en algún sitio?

No, a mi tampoco me funciona, jooooerrr
  #17 (permalink)  
Antiguo 27/05/2013, 07:50
Avatar de Scape  
Fecha de Ingreso: octubre-2006
Mensajes: 626
Antigüedad: 17 años, 8 meses
Puntos: 7
Respuesta: Como cambiar el color de un link activo

Este es mi código html

<div class="contenido">
<div id="secondary" class="widget-area secundarioLateral" role="complementary">
<div class="primerospasos">
<aside id="iclw-2" class="widget widget_iclw">
<h3 class="widget-title">Menú Primeros Pasos</h3>
<ul>
<li class="active">
<li class="active">
<li class="active">
<a href="http://www.prot-on.com/proteger-documentos-o-fotografias">3. Como proteger archivos</a>
</li>

Como tendría que ser mi css para poder hacer que el link activo se quede en azul.

.secundarioLateral .primerospasos a {font-size:1.0em; color:#636363; line-height: 0.5; padding-right: 5px; }
.secundarioLateral .primerospasos a:visited {color:#979797;}

y ahora?
  #18 (permalink)  
Antiguo 27/05/2013, 08:58
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 16 años, 6 meses
Puntos: 181
Respuesta: Como cambiar el color de un link activo

Hola,


Un link "activo" es simplemente una clase aplicada a un link para darle los estilos deseados igual como lo harías con a cualquier otro elemento.


Por ejemplo si tienes 2 paginas.


Pagina 1:

<a class="pagina-activa" href="">pagina 1</a>
<a href="">pagina 2</a>


Pagina 2:

<a href="">pagina 1</a>
<a class="pagina-activa" href="">pagina 2</a>

CSS:
a.pagina-activa {color:red;}




Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #19 (permalink)  
Antiguo 27/05/2013, 09:09
Avatar de Scape  
Fecha de Ingreso: octubre-2006
Mensajes: 626
Antigüedad: 17 años, 8 meses
Puntos: 7
Respuesta: Como cambiar el color de un link activo

Cita:
Iniciado por pitufoweb Ver Mensaje
Hola,


Un link "activo" es simplemente una clase aplicada a un link para darle los estilos deseados igual como lo harías con a cualquier otro elemento.


Por ejemplo si tienes 2 paginas.


Pagina 1:

<a class="pagina-activa" href="">pagina 1</a>
<a href="">pagina 2</a>


Pagina 2:

<a href="">pagina 1</a>
<a class="pagina-activa" href="">pagina 2</a>

CSS:
a.pagina-activa {color:red;}




Saludos
Sí, la teoría está muy bien, pero la práctica...
  #20 (permalink)  
Antiguo 27/05/2013, 09:31
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 16 años, 6 meses
Puntos: 181
Respuesta: Como cambiar el color de un link activo

Cita:
Iniciado por Scape Ver Mensaje
Sí, la teoría está muy bien, pero la práctica...

La practica?


Que tal con este ejemplo?

http://s335454326.onlinehome.us/demo/pagina1.html





Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #21 (permalink)  
Antiguo 27/05/2013, 09:46
Avatar de Scape  
Fecha de Ingreso: octubre-2006
Mensajes: 626
Antigüedad: 17 años, 8 meses
Puntos: 7
Respuesta: Como cambiar el color de un link activo

Cita:
Iniciado por pitufoweb Ver Mensaje
La practica?


Que tal con este ejemplo?

http://s335454326.onlinehome.us/demo/pagina1.html





Saludos
No entiendo por qué a mi se activa ese color sin hacer clic en el link, mira.

http://www.prot-on.com/proteger-docu...-o-fotografias

menú de la izquierda
  #22 (permalink)  
Antiguo 27/05/2013, 10:02
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 16 años, 6 meses
Puntos: 181
Respuesta: Como cambiar el color de un link activo

Cita:
Iniciado por Scape Ver Mensaje
No entiendo por qué a mi se activa ese color sin hacer clic en el link, mira.

http://www.prot-on.com/proteger-docu...-o-fotografias

menú de la izquierda
Hola,

No se si te tomaste la molestia de analizar el ejemplo que deje...Solo son 2 lineas de código. Tomate 5 minutos y mira como funciona...es muy sencillo.

El "click" NO tiene nada que ver...Da lo mismo si haces click o no...Lo que hace que funcione es la clase. Si entras en la "pagina 2" del ejemplo ( http://s335454326.onlinehome.us/demo/pagina2.html ) veras que aun así funciona, sin darle "click"

En tu web todos los enlaces tienes la clase de .active...Es normal que todos tengan el mismo estilo.


Siento ser un poquito "duro" pero aveces solo así se aprende



Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #23 (permalink)  
Antiguo 27/05/2013, 10:18
Avatar de Scape  
Fecha de Ingreso: octubre-2006
Mensajes: 626
Antigüedad: 17 años, 8 meses
Puntos: 7
Respuesta: Como cambiar el color de un link activo

Cita:
Iniciado por pitufoweb Ver Mensaje
Hola,

No se si te tomaste la molestia de analizar el ejemplo que deje...Solo son 2 lineas de código. Tomate 5 minutos y mira como funciona...es muy sencillo.

El "click" NO tiene nada que ver...Da lo mismo si haces click o no...Lo que hace que funcione es la clase. Si entras en la "pagina 2" del ejemplo ( http://s335454326.onlinehome.us/demo/pagina2.html ) veras que aun así funciona, sin darle "click"

En tu web todos los enlaces tienes la clase de .active...Es normal que todos tengan el mismo estilo.


Siento ser un poquito "duro" pero aveces solo así se aprende



Saludos
Pues nada que lo dejo como está que no tengo ni idea de como se hace.

Sabes si puedo eliminar las urls que puse aquí?

Etiquetas: activo, color, link
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 22:00.