Menu en Css

arkang31 · #1 (**permalink**) 06/04/2009, 07:41

Bueno tengo un menu horizontal y no encuentro ni se como hacer para que el item activo tenga un color blanco de fondo es desir si estoy en el item 1 este quede con fondo blanco y los demas en negro y si estoy en el 2 fondo blanco y los demas en fondo negro. espero que me entiendan lo e intentado con

Código:

a:active {
	background:#FFFFFF;
}

pero solo pasa cuando preciono soble el link y luego se quita su color

xurxinho · #2 (**permalink**) 06/04/2009, 07:46

Lo mismo se me pasa mí. Al refrescar la página piereda la opción de active.
Ayuda please !!!!!!!!!!!!!!!!

posman · #3 (**permalink**) 06/04/2009, 08:15

Al parecer :active unicamente resalta el elemento cuando se esta activando. No significa que se quede activo todo el tiempo

http://www.w3.org/TR/CSS21/selector....pseudo-classes

Para dejarlo con otro color de fondo tendrias que asignarle otra clase

Código HTML:

<style>
a { background: #000 }
a.active { background: #fff }
</style>
<body>
<a href="#">link 1</a>
<a href="#" class="active">link 1</a>
</body>

willyfc · #4 (**permalink**) 06/04/2009, 08:27

no entiendo bien lo que quieres hacer, si lo que quieres es que obtenga un color cuando estes sobre el tendrías que declararlo de esta manera:

Código html:

Ver original<!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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
.contenedor{width:300px; height:200px; border:1px solid #333;}
.contenedor a{color:#666; text-decoration:none;}
.contenedor a:hover{color:#990000; text-decoration:underline;}
.contenedor a:focus{color:#990000; text-decoration:underline;}
.contenedor a:active{color:#990000; text-decoration:underline;}/*explorer*/
</style>
</head>
 
<body>
<div class="contenedor">
    <a href="#">vinculo 1</a><br />
    <a href="#">vinculo 2</a><br />
    <a href="#">vinculo 3</a><br />
</div>
</body>
</html>

de esta manera resaltará cuando hagas o click o cuando adquiera el foco(puedes probarlo navegando con tab).

la otra posible opción que entiendo es que quieres que resalte cuando estes en esa sección:

Código:

<style type="text/css">
.contenedor{width:300px; height:200px; border:1px solid #333;}
.contenedor a{color:#666; text-decoration:none;}
.contenedor a:hover{color:#990000; text-decoration:underline;}
.contenedor a:focus{color:#990000; text-decoration:underline;}
.contenedor a:active{color:#990000; text-decoration:underline;}/*explorer*/
.contenedor a.current{color:#336699; text-decoration:none;}
</style>

<a href="#" class="current">vinculo 1</a><br />

y sucesivamente asignas la clase current a la sección donde estes navegando, la siguiente sección sería:

Código:

<a href="#" class="current">vinculo 2</a><br />

y se la quitarías al vínculo 1 y así sucesivamente, solo un vínculo a la vez tendría que tener la clase current dependiento de la sección donde estes