Foros del Web » Creando para Internet » CSS »

Problema con "Active" en CSS

Estas en el tema de Problema con "Active" en CSS en el foro de CSS en Foros del Web. Buenas Tardes Amigos de FDW. Tengo un problema con el active de mi barra de navegacion, resulta que estoy haciendo mi menu y quiero ponerle ...
  #1 (permalink)  
Antiguo 11/11/2009, 14:24
Avatar de GidHarvey  
Fecha de Ingreso: mayo-2009
Mensajes: 190
Antigüedad: 8 años, 7 meses
Puntos: 1
Problema con "Active" en CSS

Buenas Tardes Amigos de FDW.
Tengo un problema con el active de mi barra de navegacion, resulta que estoy haciendo mi menu y quiero ponerle el active en el hover, pero no funciona, tengo puesto las imagenes y todo pero no hace la funcion "active" que estoy haciendo mal, de momento solo tengo puesto el boton home para ir provando, el boton default seria de color negro, y cuando pasa el mouse por encima seria gris, y luego el active tambien seria gris, lo estoy haciendo con imagenes por la font, como puedo arreglar mi problema?

aqui pongo el codigo:

Código HTML:
<!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>Documento sin título</title>
</head>
<style>
ul#topnav {
	margin: 0; padding: 0;
	list-style: none;
	float: left;
	width: 486px;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
}
/*--CSS Sprites - Default State--*/
ul#topnav a {
	float: left;
	display: block;
	height: 40px; /*--Specify height of navigation--*/
	text-indent: -99999px; /*--Shoot the text off the page--*/
	background-position: left top;
}
/*--CSS Sprites - Hover State--*/
ul#topnav a:hover {
	background-position: left -80px;
}
/*--Assign an image and width to each link--*/
ul#topnav li.home a {
	background-image: url(images/home_a.jpg);
	width: 68px;
}
ul#topnav li.about a {
	background-image: url(about_a.jpg);
	width: 86px;
}
ul#topnav li.gallery a {
	background-image: url(gallery_a.jpg);
	width: 93px;
}
ul#topnav li.services a {
	background-image: url(services_a.jpg);
	width: 101px;
}
ul#topnav li.shop a {
	background-image: url(shop_a.jpg);
	width: 69px;
}
ul#topnav li.contact a {
	background-image: url(contact_a.jpg);
	width: 69px;
}
#home li.home a, /*--Home Page > Home Link--*/
#about li.about a, /*--About Page > About Link--*/
#services li.gallery a, /*--Services Page > Services Link--*/
#portfolio li.services a, /*--Portfolio Page > Portfolio Link--*/
#contact li.shop a, /*--Contact Page > Contact Link--*/
#blog li.contact a /*--Blog Page > Blog Link--*/
{
	background-position: left bottom;
}
</style>
<body>
<ul id="topnav">
	<li class="home"><a href="home.html">Home</a></li>
	<li class="about"><a href="about.html">About</a></li>
	<li class="gallery"><a href="gallery.html">Gallery</a></li>
	<li class="services"><a href="services.html">Services</a></li>
	<li class="shop"><a href="shop.html">Shop</a></li>
    <li class="contact"><a href="contact.html">Contact</a></li>
</ul>
</body>
</html> 
aqui tengo subido el navegador para que vean que no hace la funcion "active"

ejemplo
__________________
La mayoría prefiere pagar por entretenerse que por instruirse.
  #2 (permalink)  
Antiguo 11/11/2009, 14:45
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Problema con "Active" en CSS

añadele un selector mas donde tienes definido :hover. el mismo selector pero con :active. o sea, agrupa los selectores. cada agrupacion se separa por una coma.
Código:
elemento_1 elemento_2:hover, elemento_1 elemento_2:active{
propiedades css;
}
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #3 (permalink)  
Antiguo 11/11/2009, 14:48
Avatar de GidHarvey  
Fecha de Ingreso: mayo-2009
Mensajes: 190
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: Problema con "Active" en CSS

Hola zerokilled (como estas) no entendi mucho tu ejemplo puedes hacerlo un poco mas detallado porfavor, muchas gracias amigo.

Un saludo.

ATTe Gidharvey.
__________________
La mayoría prefiere pagar por entretenerse que por instruirse.
  #4 (permalink)  
Antiguo 11/11/2009, 14:55
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Problema con "Active" en CSS

comparalo con el ejemplo inicial,
Código:
ul#topnav a:hover, ul#topnav a:active {
background-position: left -80px;
}
elemento_1 y element_2 eran ejemplos de selectores. que podria decirse que corresponden a ul#topnav y a:hover. ¿que tan dificil pudo haber sido?
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #5 (permalink)  
Antiguo 11/11/2009, 15:06
Avatar de GidHarvey  
Fecha de Ingreso: mayo-2009
Mensajes: 190
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: Problema con "Active" en CSS

hola zerokilled, eso no me funciono, queda con el mismo efecto.

Edito**
Segui al pie del ingles este tutorial pero no se en que parte fallo, la imagen con las 3 imagenes juntas mide 40x120px y el boton que tengo puesto mide 68x40
__________________
La mayoría prefiere pagar por entretenerse que por instruirse.

Última edición por GidHarvey; 11/11/2009 a las 15:13
  #6 (permalink)  
Antiguo 11/11/2009, 15:13
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Problema con "Active" en CSS

actualiza el documento que tienes en la web para comprobarlo. por otro lado, ¿como estas haciendo para "activar" el enlace?
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #7 (permalink)  
Antiguo 11/11/2009, 15:18
Avatar de GidHarvey  
Fecha de Ingreso: mayo-2009
Mensajes: 190
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: Problema con "Active" en CSS

lo estoy haciendo siguiendo el tutorial que puse en el post de arriba, hay le puse el selector pero con :active y actualize el documento.

Edito**

Hay le puse al <body> lo que dice en el tutorial que seria <body id="home"> para que se active el enlace, pero ahora me lo deja de color gris, por que sucede esto, no hace el cambio de imagen tampoco.
__________________
La mayoría prefiere pagar por entretenerse que por instruirse.
  #8 (permalink)  
Antiguo 11/11/2009, 15:32
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Problema con "Active" en CSS

ahora veo donde esta tu problema, cuando dices active no te refieres a la pseudo-clase :active. si lo hubieras aclarado desde un principio no nos hubieramos enredado tanto. el tutorial se refiere a active en el sentido del documento actual que el usuario esta viendo.

aplicado a tu caso, es bastante sencillo, lo que tienes que hacer es copiar tal cual tienes el selector :hover con sus propiedades css. eliminas la pseudo-clase :hover, y al principio del selector le añades el ID de body. de modo que te queda asi,
Código:
#home ul#topnav a{ /* sin pseudo-clase :hover */
background-position: left 40px; /* mismas propiedad que :hover */
}
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #9 (permalink)  
Antiguo 11/11/2009, 15:56
Avatar de GidHarvey  
Fecha de Ingreso: mayo-2009
Mensajes: 190
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: Problema con "Active" en CSS

sigue el problema no hace el cambio ni el active ahora...la imagen que estoy usando es esta

Edito** ya probe todas las posibilidades, incluso cambiando la imagen el default al medio y no pasa nada, que sera?
__________________
La mayoría prefiere pagar por entretenerse que por instruirse.

Última edición por GidHarvey; 11/11/2009 a las 16:11
  #10 (permalink)  
Antiguo 11/11/2009, 16:21
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Problema con "Active" en CSS

a continuacion un ejemplo bastante reducido de tu codigo. solo muestra un enlace y los estilos necesarios para dicho enlace. copialo tal cual lo vez y compruebalo. notaras que esta en estado original y cuando pasas el raton se cambia a gris. luego, agregale el ID "home" a body y comprueba que este cambia a estado activo.
Código:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test Development</title>

<style type='text/css'>
ul#topnav {
	margin: 0; padding: 0;
	list-style: none;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
}
/*--CSS Sprites - Default State--*/
ul#topnav a {
	display: block;
	height: 40px; /*--Specify height of navigation--*/
	text-indent: -99999px; /*--Shoot the text off the page--*/
	background-position: left top;
}
/*--CSS Sprites - Hover State--*/
ul#topnav a:hover {
	background-position: left bottom;
}
/*--Assign an image and width to each link--*/
ul#topnav li.home a {
	background-image: url(/images/home_a.jpg);
	width: 68px;
}

/*-- actives pages --*/
#home li.home a{
background-position: left 40px;
}
</style>
</head>

<body> <!-- fijate que no tiene ID -->
<ul id="topnav">
	<li class="home"><a href="home.html">Home</a></li>
</ul>
</body></html>
por cierto, creo que te viene bien comprender la especificidad de las reglas y como este afecta a tu documento, http://www.w3.org/TR/CSS2/cascade.html#specificity. creo que es ahi donde estas teniendo problema.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #11 (permalink)  
Antiguo 11/11/2009, 16:43
Avatar de GidHarvey  
Fecha de Ingreso: mayo-2009
Mensajes: 190
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: Problema con "Active" en CSS

muchas gracias zerokilled, saludos y cuidate.
__________________
La mayoría prefiere pagar por entretenerse que por instruirse.
  #12 (permalink)  
Antiguo 11/11/2009, 17:42
Avatar de GidHarvey  
Fecha de Ingreso: mayo-2009
Mensajes: 190
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: Problema con "Active" en CSS

me surgio una duda, por ejemplo yo quiero ponerle un submenu al boton home, es posible hacerlo solo con CSS? en este mismo codigo?
__________________
La mayoría prefiere pagar por entretenerse que por instruirse.
  #13 (permalink)  
Antiguo 11/11/2009, 17:55
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Problema con "Active" en CSS

tengo muy cerca de ti, http://www.araudi.net/ejemplos/menus...ables_CSS.html. no he visto toda la web, y las veces muy pero muy pocas veces que la he visitado a sido para ver algun ejemplo aleatorio. la web la conoci aqui en FDW. y si, se puede hacer teniendo el menu con imagenes pero creo que la pagina un ejemplo asi como lo quieres. metele cabeza...
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #14 (permalink)  
Antiguo 11/11/2009, 17:59
Avatar de GidHarvey  
Fecha de Ingreso: mayo-2009
Mensajes: 190
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: Problema con "Active" en CSS

ese estaba viendo lo encontre hace un rato aqui en fdw, pero como solo muestra el ejemplo ya realizado, tengo que meterme en ver codigo fuente, entonces como soy principiante todavia me cuesta entenderlo bien. me vendria bien un tutorial que explique algo, pero sigo viendo ese que me mandaste, ya que lo esta revisando, saludos.
__________________
La mayoría prefiere pagar por entretenerse que por instruirse.
  #15 (permalink)  
Antiguo 11/11/2009, 18:14
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Problema con "Active" en CSS

¿por qué no comienzas como es debido? ¿quiere decir que en todo este tiempo has estado comiendo pescado sin pescar? visto los temas anteriores que has hecho, veo que tus recursos son los tutoriales pero poco te detienes a pensar. un tutorial explica de una forma objetiva como conseguir algo. son buenos para ver ejemplos de las capacidades o limitaciones de la aplicacion que se utiliza. un manual te instruye y te explica la teoria, que hace cada cosa y como afectan. con un tutorial se aprende y no se aprende, por lo que debes complementar tus problemas con un buen manual. seguro que ya lo has visto en FDW, http://www.librosweb.es/.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #16 (permalink)  
Antiguo 11/11/2009, 18:27
Avatar de GidHarvey  
Fecha de Ingreso: mayo-2009
Mensajes: 190
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: Problema con "Active" en CSS

hola zerokilled, ya tengo la solucion, muchas gracias por tu comentario, ya lei los libros Diseño web de la pagina librosweb.es.

Lo unico que queria saber eran las diferentes formas que tengo para realizar esto, no queria ningun tutorial ni nada, pero aveces prefiero preguntar para tener mas ideas y no quedar como ignorante y seguir aprendiendo de la gente.

Pero si hay problemas en dar conocimientos a los demas que preguntan, prefiero que esa gente que tiene esos problemas no me ayude con comentarios que no sirven.
lo ideal seria compartir y no dejar a los que preguntan como gente ignorate, en fin.

Bueno aqui encontre una forma que me sirve para lo que yo necesito menus desplegables

Un saludo y muchas gracias

ATTe Gidharvey
__________________
La mayoría prefiere pagar por entretenerse que por instruirse.
  #17 (permalink)  
Antiguo 11/11/2009, 19:04
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 7 meses
Puntos: 44
Respuesta: Problema con "Active" en CSS

Eso no es así, GidHarvey.

¿Has visto el tiempo y ganas que te ha dedicado zerokilled para ayudarte? y vas y te despides con ese feo comentario:

Cita:
Iniciado por GidHarvey Ver Mensaje
Pero si hay problemas en dar conocimientos a los demas que preguntan, prefiero que esa gente que tiene esos problemas no me ayude con comentarios que no sirven.
lo ideal seria compartir y no dejar a los que preguntan como gente ignorate, en fin.
Yo sólo veo en zerokilled, en este caso y en otros mil, ganas de ayudar.

Bye
  #18 (permalink)  
Antiguo 11/11/2009, 19:20
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Problema con "Active" en CSS

@GidHarvey,
¿quieres más recursos porque librosweb.es no te son suficientes? http://docstore.mik.ua/orelly/web2/css/index.htm creo que es la primera vez que publico este enlace y no se si me corro el riesgo de ser sansionado por los moderadores porque el material que presenta el enlace tiene copyright de un tercero que no le pertenece al sitio web. y aun asi lo presento para ayudarte...
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #19 (permalink)  
Antiguo 12/11/2009, 08:00
Avatar de GidHarvey  
Fecha de Ingreso: mayo-2009
Mensajes: 190
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: Problema con "Active" en CSS

Hola creo que mi comentario no se entendio , deidre yo no estoy diciendo nada en contra de mi amigo zerokilled al contrario...

zerokilled muchas gracias por ese link, lo voy a leer cuando tenga algo de tiempo ya que estoy con esto de los menu como te explique mas arriba, pero poniendoles submenu, asi practico algo nuevo y muchas gracias nuevamente.

PD: ojala no te sansionen

Un saludo ATTe Gidharvey
__________________
La mayoría prefiere pagar por entretenerse que por instruirse.
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 02:29.