Foros del Web » Creando para Internet » CSS »

como se hace un a:active¿?¿?¿?

Estas en el tema de como se hace un a:active¿?¿?¿? en el foro de CSS en Foros del Web. Hola. Esto es una cosa que he visto en un monton de paginas pero yo no consigo hacerlo funcionar. Cuando paso el cursor por encima ...
  #1 (permalink)  
Antiguo 11/11/2006, 12:26
Avatar de irezumi  
Fecha de Ingreso: octubre-2006
Mensajes: 17
Antigüedad: 17 años, 5 meses
Puntos: 0
como se hace un a:active¿?¿?¿?

Hola. Esto es una cosa que he visto en un monton de paginas pero yo no consigo hacerlo funcionar.

Cuando paso el cursor por encima del enlace, se pone como se ve en la imagen (lado izq). quiero q cuando haga click y se abra el archivo html correspondiente, el enlace se ponga como el del lado derecho y permanezca asi durante el tiempo que este abierto el archivo.

h t t p://img295.imageshack.us/img295/2461/sinttulo3copiahx2.jpg

este es el css del menu:

Código:
/* menu lateral */

#menulat{
font : 10pt Georgia;
color: #515151;
font-style: oblique;
width: 180px;
padding-left: 20px;
text-align: left;
float:right;
margin: 30px 0px 0px 0px;
border-left: 1px solid #515151;
}

#menulat ul {
margin: 0 0 0 0;
padding: 0 0 0 0;
border: 0;
list-style: none;
}

#menulat ul li {
text-align: left;
border-bottom:
1px dotted #515151;
padding-right: 0px;
}

#menulat a {
display : block;
_width: 180px;
margin : 0px;
padding: 8px 5px 8px 10px;
text-decoration: none;
color: #666666;
}

#menulat a:hover {
display : block;
background: #484848;
color: #ffffff;
border-right: 4px solid #801F36;
}

#menulat a:active {
display : block;
background: #484848;
border-right: 4px solid #ffffff;
color : #ffffff;
}
el a:active solo funciona mientras tengo pulsado el boton del raton, cuando lo suelto, vuelve al aspecto normal.
  #2 (permalink)  
Antiguo 11/11/2006, 12:38
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 22 años, 1 mes
Puntos: 998
Cita:
Iniciado por irezumi Ver Mensaje
el a:active solo funciona mientras tengo pulsado el boton del raton, cuando lo suelto, vuelve al aspecto normal.
y si.. esa es la función de la pseduo clase :active

Cita:
se abra el archivo html correspondiente
Depende de como lo queras abrir.. si es tipo popup... creo que no se puede hacer. No tenés forma con CSS de saber cuando se abre o cierra una ventana. Quizás investigando con js.. pero sería algo rebuscado también.

Si a lo que te referís es a lo que podés ver como ejemplo en la web de mi firma, eso se hace adjudicando al body y al botón del menu un id, y luego en tu css sería algo como esto:

Código:
#body1 #boton1{color:#fff}
#body2 #boton2{color:#fff}
#body3 #boton3{color:#fff}
#body4 #boton4{color:#fff}
y tu html
Código HTML:
<body id="body1">

<ul>
<li id="boton1">Portada</li>
<li id="boton2">Servicios</li>
<li id="boton3">Nosotros</li>
<li id="boton4">Contacto</li>
</ul> 
espero que se entienda
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 11/11/2006, 12:48
Avatar de irezumi  
Fecha de Ingreso: octubre-2006
Mensajes: 17
Antigüedad: 17 años, 5 meses
Puntos: 0
si, eso es, lo que tienes en tu pagina, en el menu queda resaltado el enlace de la pagina que esta abierta.

bonita web y gracias por la ayuda. si no me sale, volvere XD



si, eso es, lo que tienes en tu pagina, en el menu queda resaltado el enlace de la pagina que esta abierta.

bonita web y gracias por la ayuda. si no me sale, volvere XD

<-----EDITADO----->

no me funciona... no se como se hace. vamos a ver:

yo inserto esto en mi hoja de estilos:

Código:
/* menu lateral */

#menu{
font : 10pt Georgia;
color: #515151;
font-style: oblique;
width: 180px;
padding-left: 20px;
text-align: left;
float:right;
margin: 30px 0px 0px 0px;
border-left: 1px solid #515151;
}

#menu .nav{
margin: 0 0 0 0;
padding: 0 0 0 0;
border: 0;
list-style: none;
}
#menu .nav li{
text-align: left;
border-bottom:
1px dotted #515151;
padding-right: 0px;
}
#menu .nav li a{
display : block;
_width: 180px;
margin : 0px;
padding: 8px 5px 8px 10px;
text-decoration: none;
color: #666666;
}
#menu .nav li a:hover{
display : block;
background: #484848;
color: #ffffff;
border-right: 4px solid #801F36;
}

#seccion1 #b1 a,

#seccion2 #b2 a,

#seccion3 #b3 a,

#seccion4 #b4 a,

#seccion5 #b5 a,
#seccion6 #b6 a,
#seccion7 #b7 a  {

background: #484848;
color: #ffffff;
border-right: 4px solid #ffffff;
}
lo he copiado de tu pagina para ver si me funcionaba tu codigo.

luego en el html inserto esto en cada una de los archivos html que componen mi web (uno es index y luego hay 8 paginas con la misma estructura pero distinto contenido):

Código:
<div id="menu">
	<ul class="nav">
		<li id="b1"><a href="delegacion.htm" accesskey="1">Delegación</a></li>
		<li id="b2"><a href="h t t p://w w w.medicinasevilla.foro.st" accesskey="2">Foro</a></li>
		<li id="b3"><a href="defensa.htm" accesskey="3">Defensa del alumnos</a></li>
		<li id="b4"><a href="nagana.htm" accesskey="4">Revista Nagana</a></li>
		<li id="b5"><a href="becas.htm" accesskey="5">Información sobre becas</a></li>
		<li id="b6"><a href="cultura.htm" accesskey="6">Aula de Cultura</a></li>
		<li id="b7"><a href="tuna.htm" accesskey="7">Tuna de Medicina</a></li>
	</ul>
</div>

y no funciona. quiero que quede exactamente como el menu que tienes en tu pagina "Plataforma Anti DRM" (aunque con otros colores, fuentes...), pero la idea es esa. ¿conseguire poner el menu asi? en el proximo capitulo...

Última edición por irezumi; 11/11/2006 a las 13:30
  #4 (permalink)  
Antiguo 15/11/2006, 13:46
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 1 mes
Puntos: 772
Hola webosiris

Refloto este tema porque se me olvidó agradecerte el código que pusiste. Sencillo pero muy efectivo He aprovechado para utilizarlo en mi paginilla y ahorrarme algunas líneas de código JavaScript.

Saludos,
  #5 (permalink)  
Antiguo 21/11/2006, 12:23
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 22 años, 1 mes
Puntos: 998
Cita:
Iniciado por irezumi
no funciona.
¿le pusistes el id al body?
el body te tiene que quedar así:
Página Delegación
Código HTML:
<body id="seccion1"> 
Página Foro
Código HTML:
<body id="seccion2"> 
etc.

Cita:
Iniciado por JavierB Ver Mensaje
Refloto este tema porque se me olvidó agradecerte el código que pusiste. Sencillo pero muy efectivo He aprovechado para utilizarlo en mi paginilla y ahorrarme algunas líneas de código JavaScript.
Un placer
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #6 (permalink)  
Antiguo 10/09/2007, 15:16
Avatar de jimadri  
Fecha de Ingreso: julio-2006
Ubicación: Buenos Aires
Mensajes: 487
Antigüedad: 17 años, 8 meses
Puntos: 1
Re: como se hace un a:active¿?¿?¿?

Les dejo este link que es un poco viejo y lo he probado. Mi pregunta es la siguiente: este tipo de active funciona con webs basadas en plantillas?????
Que manera hay de hacerlo???
  #7 (permalink)  
Antiguo 07/04/2008, 06:53
 
Fecha de Ingreso: marzo-2004
Ubicación: Sureste
Mensajes: 186
Antigüedad: 20 años
Puntos: 0
Re: como se hace un a:active¿?¿?¿?

Hola a todos,

Avivo este tema, porque me ha parecido muy buena solución, aunque al ir a implementarlo en un sitio web no funciona. La cuestión es que el menú está en un include y no sé si esto puede ser la causa de que no funcione.

El body tiene puesto su id correspondiente, y los botones del menú también. El css se quedaría así:

Código PHP:
#empresa #botones-empresa #b-empresa a,
#body-noticias #botones-empresa #b-noticias a,
#diseno #botones-empresa #b-diseno a,
#calidad #botones-empresa #b-calidad a,
#novedades #botones-empresa #b-novedades a,
#contacto #botones-empresa #b-contacto a{
background-color#8a7655;
color#FFFFFF; 
donde #empresa es el id del body, #botones-empresa el id de la capa menú, y #b-empresa (etc) son los id de los botones:

Código PHP:
<div id="botones-empresa">
    <
span><a id="b-empresa" href="empresa.php?opcion=empresa">Empresa</a></span>
    <
span><a id="b-calidad" href="calidad.php?opcion=calidad">Calidad</a></span>    
    <
span><a id="b-diseno" href="diseno.php?opcion=diseno">Dise&ntilde;o</a></span>    
    <
span><a id="b-novedades" href="novedades.php?opcion=novedades">Novedades</a></span>    
    <
span><a id="b-noticias" href="noticias.php?opcion=noticias">Noticias</a></span>
    <
span><a id="b-contacto" href="contacto.php?opcion=contacto">Contacto</a></span>
</
div
Gracias!!!
Kailea.
  #8 (permalink)  
Antiguo 07/04/2008, 09:17
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Re: como se hace un a:active¿?¿?¿?

Es una bonita solución, pero en mi humilde opinión, a mi me parece un poco enrevesado. Quiero decir: ya que en cada página hay que cambiar el id del body, yo optaría por dar a todos los vínculos una clase, digamos "inactivo", y al que va a estar iluminado la clase "activo". Por ejemplo:

<a href="#" class="activo">Uno</a>
<a href="#" class="inactivo">Dos</a>
<a href="#" class="inactivo">Tres</a>
<a href="#" class="inactivo">Cuatro</a>

para la página Uno.

<a href="#" class="inactivo">Uno</a>
<a href="#" class="activo">Dos</a>
<a href="#" class="inactivo">Tres</a>
<a href="#" class="inactivo">Cuatro</a>

para la página 2, etc.

Y en la css

.inactivo {background-color: #000;}
.activo {background-color: #f00;}

que viene a ser lo mismo, pero actuando sobre los elementos del menú, no sobre el body, que podría resultar algo más peligroso. Como de costumbre, igual no he entendido bien lo que se quiere hacer (he leido todo el hilo), pero según lo que interpreto, esta solución es muy sencilla y con pocas posibilidades de error.

Mikel.
  #9 (permalink)  
Antiguo 09/04/2008, 03:31
 
Fecha de Ingreso: marzo-2004
Ubicación: Sureste
Mensajes: 186
Antigüedad: 20 años
Puntos: 0
Re: como se hace un a:active¿?¿?¿?

La cuestión es que el menú lo tengo en un include, porque me resulta más fácil gestionarlo, así que no puedo cambiar los enlaces manualmente en cada uno de los archivos como propones.

El controlarlo por el body me resulta más sencillo porque sí puedo darle el nombre de forma sencilla en cada uno de los archivos.

Lo que no llego a comprender es por qué no funciona, si el id del body es correcto y los id del menú también. ¿Es algún problema de IE7?

Gracias,
Kailea.
  #10 (permalink)  
Antiguo 09/04/2008, 04:08
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Re: como se hace un a:active¿?¿?¿?

Ah, vale, pues en el caso de un include está claro.
O no lo habías especificado o no lo leí bien.

Y no te funciona porque no lo estás poniendo bien. Tu código

Cita:
#empresa #botones-empresa #b-empresa a,
#body-noticias #botones-empresa #b-noticias a,
#diseno #botones-empresa #b-diseno a,
#calidad #botones-empresa #b-calidad a,
#novedades #botones-empresa #b-novedades a,
#contacto #botones-empresa #b-contacto a{
background-color: #8a7655;
color: #FFFFFF;
Si miras tus enlaces:

<span><a id="b-empresa" href="empresa.php?opcion=empresa">Empresa</a></span>
<span><a id="b-calidad" href="calidad.php?opcion=calidad">Calidad</a></span>

verás que quien tiene el id b-empresa, por ejemplo, es el elemento "a", y con la css le estás diciendo que lo aplique a un "a" que esté dentro del id b-empresa.

Corrígelo así:

#empresa #botones-empresa #b-empresa,
#body-noticias #botones-empresa #b-noticias,
#diseno #botones-empresa #b-diseno,
#calidad #botones-empresa #b-calidad,
#novedades #botones-empresa #b-novedades,
#contacto #botones-empresa #b-contacto{
background-color: #8a7655;
color: #FFFFFF;

Es decir, elimina las "a" finales y creo que te funconará.

Mikel.
  #11 (permalink)  
Antiguo 09/04/2008, 04:30
 
Fecha de Ingreso: marzo-2004
Ubicación: Sureste
Mensajes: 186
Antigüedad: 20 años
Puntos: 0
Re: como se hace un a:active¿?¿?¿?

¡¡¡Mil millones de gracias!!! ¡¡¡Funciona!!!

La verdad es que no me había dado cuenta de ese error en el código, tenía mal asimilado el concepto del id de los enlaces. Esto me servirá, además, para pulir mis códigos, muchas gracias por la explicación!!!

Besos!
Kailea.
  #12 (permalink)  
Antiguo 27/04/2008, 06:30
 
Fecha de Ingreso: abril-2007
Mensajes: 48
Antigüedad: 16 años, 11 meses
Puntos: 0
Re: como se hace un a:active¿?¿?¿?

Hola Webosiris
Espero puedas ayudarme
Estube mirando como hiciero y trate de hacer lo mio y no lo logro.
Aca te pongo el codigo del CSS

#cont1 #boton1{background-color: #2586d7}
#cont2 #boton2{background-color: #CC0099}
#cont3 #boton3{background-color: #FFFF00}
#cont4 #boton4{background-color: #CC3333}
#cont5 #boton5{background-color: #FF00FF}

#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#button li {
border-bottom: 1px solid #90bade;
margin: 0;
}

#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #button li a {
width: auto;
}

#button li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
este es el html

<div id="button">
<ul>
<li id="boton1"><a href="index.php">Home</a></li>
<li id="boton2"><a href="servicios.php">Servicios</a></li>
<li id="boton3"><a href="faq.php">Preguntas Frecuentes</a></li>
<li id="boton4"><a href="acerca.php">Acerca de IMxM</a></li>
<li id="boton5"><a href="contactenos.php">Contactenos</a></li>
</ul>
</div>

El cont1, cont2, etc seria lo que vos pusiste como body

Pero no me cambia cuando estoy en home o servicos
que estoy haciendo mal?
Gracias
Iván
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.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 02:26.