Problema con "Active" en CSS

GidHarvey · #1 (**permalink**) 11/11/2009, 14:24

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

zerokilled · #2 (**permalink**) 11/11/2009, 14:45

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;
}

GidHarvey · #3 (**permalink**) 11/11/2009, 14:48

Hola zerokilled (como estas) no entendi mucho tu ejemplo

puedes hacerlo un poco mas detallado porfavor, muchas gracias amigo.

Un saludo.

ATTe Gidharvey.

zerokilled · #4 (**permalink**) 11/11/2009, 14:55

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?

GidHarvey · #5 (**permalink**) 11/11/2009, 15:06

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

zerokilled · #6 (**permalink**) 11/11/2009, 15:13

actualiza el documento que tienes en la web para comprobarlo. por otro lado, ¿como estas haciendo para "activar" el enlace?

GidHarvey · #7 (**permalink**) 11/11/2009, 15:18

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.

zerokilled · #8 (**permalink**) 11/11/2009, 15:32

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 */
}

GidHarvey · #9 (**permalink**) 11/11/2009, 15:56

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?

zerokilled · #10 (**permalink**) 11/11/2009, 16:21

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.

GidHarvey · #11 (**permalink**) 11/11/2009, 16:43

muchas gracias zerokilled, saludos y cuidate.

GidHarvey · #12 (**permalink**) 11/11/2009, 17:42

me surgio una duda, por ejemplo yo quiero ponerle un submenu al boton home, es posible hacerlo solo con CSS? en este mismo codigo?

zerokilled · #13 (**permalink**) 11/11/2009, 17:55

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...

GidHarvey · #14 (**permalink**) 11/11/2009, 17:59

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.

zerokilled · #15 (**permalink**) 11/11/2009, 18:14

¿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/.

GidHarvey · #16 (**permalink**) 11/11/2009, 18:27

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

deirdre · #17 (**permalink**) 11/11/2009, 19:04

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

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

zerokilled · #18 (**permalink**) 11/11/2009, 19:20

@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...

GidHarvey · #19 (**permalink**) 12/11/2009, 08:00

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