Comunidad de diseño web y desarrollo en internet online

Barra de navegacion

Foros de discusión > CSS y HTML

Citar            
MensajeEscrito el 30 Nov 2013 04:47 am
Hola amigos quisieran que meayuden ya que he investigado pero no encuentro la informacionsuficiente estoy haciendo una barra de navegacion con css y html pero cuando quiero agregar los estados a:active y a:visited no me permiten hacerlo osea cuando lo publico en el navegador no funcioanan solo el a:link y el a:hover aca le mando el codigo para que me puedan entender mejor, gracias.

estilos.css

body {
background-color:aqua;
}
#menuhorizontal {
float:left;
width:100%;
padding:0px;
margin:0px;
list-style-type:none;
}
#menuhorizontal a {
float:left;
width:100px;
text-decoration:none;
text-align:center;
color:#ff0000;
background-color:#f7f8e8;
padding:3px 5px;
border-right:1px solid green;
}

#menuhorizontal a:hover {
background-color:#336699;
}
#menuhorizontal li {
display:inline;
}
el codigo html es este:

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<ul id="menuhorizontal">
<li><a href="index.html" target="_self">nosotros</a></li>
<li><a href="productos.html" target="_self">productos</a></li>
<li><a href="clientes.html" target="_self">clientes</a></li>
<li><a href="contactenos.html" target="_self">contactenos</a></li>
</ul>

Nosotros...
</body>
</html>

Por jarvi22

22 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 02 Dic 2013 01:12 am
Como lo intentaste hacer? Por que solo tenes que agregar este codigo a tu CSS y esta listo, solo cámbiale las propiedades

Código CSS :

#menuhorizontal a:active{
   background:red;
}

#menuhorizontal a:visited{
   background:orange;
}

Por Chitin

3 de clabLevel



Genero:Masculino  

Envíale un mensaje privado     Web

chrome
Citar            
MensajeEscrito el 03 Dic 2013 02:09 am
Hola amigo gracias bueno me resulto pero a medias porque al darle el active la barrita de navegacion no queda del mismo fondo y color del link del hover y solo se activa el visited aca te dejo el codigo haber si puedes ayudarme, gracias.

#menuhorizontal a {
float:left;
width:139px;
height:20px;
text-decoration:none;
text-align:center;
color:red;
background-color:#f7f8e8;
padding:3px 5px;
border-right:1px solid green;
}
#menuhorizontal a:active
{
background-color:green;
color:#f7f8e8;
}
#menuhorizontal a:visited
{
background-color:#f7f8e8;
color:red;
}

#menuhorizontal a:hover
{
background-color:red;
color:#f7f8e8;

Por jarvi22

22 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 03 Dic 2013 03:49 pm
pon las reglas en este orden

:link
:visited
:focus
:hover
:active

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Envíale un mensaje privado    

Web Developer

chrome
Citar            
MensajeEscrito el 03 Dic 2013 11:37 pm
Hola graciaas bueno puse como me lo escribistes pero nada no sale lo que yo quiero mira asi lo puse:

#menuhorizontal a {
float:left;
width:139px;
height:20px;
text-decoration:none;
text-align:center;
color:red;
background-color:#f7f8e8;
padding:3px 5px;
border-right:1px solid green;
}
#menuhorizontal a:visited
{
background-color:#f7f8e8;
color:red;
}
#menuhorizontal a:focus
{
background-color:#f7f8e8;
color:red;
}
#menuhorizontal a:hover
{
background-color:red;
color:#f7f8e8;
}
#menuhorizontal a:active
{
background-color:red;
color:#f7f8e8;
}

Por jarvi22

22 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 03 Dic 2013 11:46 pm
Hola amigo gracias pero asi como me lo indicastes no sigue saliendo nada. Acs te mando el codifçgo como le puse
#menuhorizontal a {
float:left;
width:139px;
height:20px;
text-decoration:none;
text-align:center;
color:red;
background-color:#f7f8e8;
padding:3px 5px;
border-right:1px solid green;
}
#menuhorizontal a:visited
{
background-color:#f7f8e8;
color:red;
}
#menuhorizontal a:focus
{
background-color:#f7f8e8;
color:red;
}
#menuhorizontal a:hover
{
background-color:red;
color:#f7f8e8;
}
#menuhorizontal a:active
{
background-color:red;
color:#f7f8e8;
}

Por jarvi22

22 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 04 Dic 2013 12:10 am
Tal vez tienes los colores al revés

Código CSS :

#menuhorizontal a:visited
{
background-color:red;
color:#f7f8e8;
}
#menuhorizontal a:focus
{
color:#000;
}
#menuhorizontal a:hover 
{
color:#000;
}

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Envíale un mensaje privado    

Web Developer

chrome
Citar            
MensajeEscrito el 16 Dic 2013 01:28 am
Hola Nacho bueno y nada no resulta aca te envio el codigo uqe modifique ya, gracias.

body {
background-color:aqua;
}
#menuhorizontal {
float:left;
width:100%;
padding:0px;
margin:0px;
list-style-type:none;
}
#menuhorizontal a {
float:left;
width:100px;
text-decoration:none;
text-align:center;
color:#ff0000;
background-color:#f7f8e8;
padding:3px 5px;
border-right:1px solid green;
}
#menuhorizontal a:visited {
color:#ff0000;
background-color:#f7f8e8;
}
#menuhorizontal a:focus {
background-color:#ff0000;
color:#f7f8e8;
}

#menuhorizontal a:hover {
background-color:#ff0000;
color:#f7f8e8;
}
#menuhorizontal a:active {
background-color:#ff0000;
color:#f7f8e8;
}
#menuhorizontal li {
display:inline;
}

Por jarvi22

22 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 16 Dic 2013 05:44 pm
Está haciendo lo que el estas diciendo...

:link --------------- links que no han sido visitados
:visited ----------- links visidatos
:focus ------------ seleccionados
:hover ------------ cursor (sobre)
:active ----------- cursor (click)

les estás diciendo según tus reglas:
a los links sin ningún estado (por deflaut :link) y los visitados tendrán
color:#ff0000;
background-color:#f7f8e8;

cuando los seleccionas (:focus), pones el cursor sobre (:hover) y presionas (:active)
background-color:#ff0000;
color:#f7f8e8;

si quieres que el estilo de tu link cuando ya fue visitado (:visited) sea el mismo que cuando pones el cursor sobre (:hover), entonces pon

Código CSS :

#menuhorizontal a:visited {
color:#f7f8e8;
background-color:#ff0000;
}


y ... usa las etiquetas [c s s] y [/c s s] sin espacios

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Envíale un mensaje privado    

Web Developer

chrome
Citar            
MensajeEscrito el 16 Dic 2013 08:56 pm
y si justo es estoy poniendo pero no me sale #menuhorizontal a {
float:left;
width:100px;
text-decoration:none;
text-align:center;
color:#ff0000;
background-color:#f7f8e8;
padding:3px 5px;
border-right:1px solid green;
}
#menuhorizontal a:visited {
color:#ff0000;
background-color:#f7f8e8;
}
#menuhorizontal a:focus {
background-color:#ff0000;
color:#f7f8e8;
}

#menuhorizontal a:hover {
background-color:#ff0000;
color:#f7f8e8;
}
#menuhorizontal a:active {
background-color:#ff0000;
color:#f7f8e8;
}

Por jarvi22

22 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 16 Dic 2013 09:53 pm
Cuando los links ya fueron visitados, cómo quieres que se vean?

Algo así?
http://jsfiddle.net/KXrY9/

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Envíale un mensaje privado    

Web Developer

chrome
Citar            
MensajeEscrito el 16 Dic 2013 11:31 pm
mire amigo nacho fijese en esta pagina fijese en la barra de navegacion yo quiero algo asi cuando ya haya visitado el link aca le dejo la direccion, gracais
http://www.buscoempresas.com/empresa/joyerias-sanchez-2243/

Por jarvi22

22 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 17 Dic 2013 12:41 am
Lo que quieres es, que esté seleccionado el link de la sección que estás viendo en ese momento, cierto?


http://jsfiddle.net/KXrY9/1/

Crea una clase para darle un estilo al link seleccionado. (En el ejemplo le puse current)

No son necesarios los pseudo-elementos :visited ni :active

En cada html, mueves la clase current al li correspondiente

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Envíale un mensaje privado    

Web Developer

chrome
Citar            
MensajeEscrito el 17 Dic 2013 02:40 am
explicame mejor osea en cada .html le pongo la clase peero si tendria que poner el a.hover ese si verdad

Por jarvi22

22 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 17 Dic 2013 02:42 am
osea en producto.html le pongo el current en contactos.html le pongo current es asi?

Por jarvi22

22 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 17 Dic 2013 03:45 pm
así es, en producto.html pones la clase current en el li de producto.
en contacto.html pones la calse current en el li de contacto, y lo borras de producto, que solo esté esa clase en el li de la sección

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Envíale un mensaje privado    

Web Developer

chrome
Foros de discusión > CSS y HTML

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.