Hace unos meses hice algo similar (por no decir identico).
Te paso el ejemplo del menú al completo y ya comparas:
CSS:
ul {
margin: 0;
list-style-type: none;
}
ul li{
display: inline;
margin-right: 20px;
}
ul li a{
padding-bottom: 4px;
line-height: 28px;
text-decoration: none;
}
ul li a:link,
ul li a:visited,
ul li a:active{
color: #666;
font-weight: bold;
}
ul li a:hover{
border-bottom: 4px solid #333;
}
a#actual:link,
a#actual:visited,
a#actual:active,
a#hover{
color:CCC;
font-weight:bold;
border-bottom: 4px solid #999;
}
(X)HTML:
<ul>
<li><a href="index.html" id="actual" acceskey="1">Inicio</a></li>
<li><a href="laempresa.html" acceskey="2">La Empresa</a></li>
<li><a href="servicios.html" acceskey="3">Servicios</a></li>
<li><a href="contactar.html" acceskey="4">Contactar</a></li>
</ul>
Espero que te sirva :)
Un saludo,
Abel Domínguez
Dirección Creativa
E: [EMAIL PROTECTED]
W: www.nemografica.com
----- Original Message -----
From: <[EMAIL PROTECTED]>
To: <ovillo@lists.ovillo.org>
Sent: Tuesday, August 09, 2005 10:55 AM
Subject: [Ovillo] a:link.active EFECTO LINK ACTIVO
Hola, les escribo este post con la intención de aprender como onseguir el
efeceto ACTIVE deseado en una lista desorneada empleada con la función d
emenú,
cuando un elemento de la lista (menú) está activo.
Mi idea es colocar la lista de forma horizontal, al hacer hover se subraye
con
un borde inferior de color y que una vez sea activo tenga el mismo estilo,
subrayado con el mismo borde y mismo color.
Ahora tengo este código:
<ul id="nav">
<li><a href="#" class="active">A</a></li>
<li><a href="#" >B</a></li>
<li><a href="#" >C</a></li>
<li><a href="#" >D</a></li>
<li><a href="#" >E</a></li>
</ul>
Donde la CSS es esta:
#nav {position: relative; margin: 0px 0px 0 16px; padding: 0 0 0 10px;width:
712px; border: none;}
#nav li {margin: 0; padding: 0; display: inline; list-style-type: none;}
#nav a:link, #nav a:visited {float: left; font-size: 10px; line-height:
14px; font-weight: bold; margin: 4px 10px 0 10px; padding-bottom: 2px;
text-decoration: none; border: none; color: #666;}
#nav a:link.active, #nav a:visited.active, #nav a:hover {border-bottom: 4px
solid #0086da; padding-bottom: 2px; color: #000;}
Mediante este código html+css cosnigo el efecto pero de una forma errónea,
ya
que sólo tengoACTIVE la opción A, del menú ya que viene con la
clase="active"
ewn el link.
Qué debo cambiar, corregir o aprender para que este efecto deseado de ACTIVE
sea
cuando realmente debe ser, es decir cuando tienes seleccionado un elemento
del
menú.
Supono que la CSS estará bien pero me fallará el código (x)html, no?
Espero puedan ayudarme, saludos!!
Oscar
----------------------------------------------------------------
This message was sent using IMP, the Internet Messaging Program.
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
