Foros del Web » Creando para Internet » CSS »

Problemas con listas y links

Estas en el tema de Problemas con listas y links en el foro de CSS en Foros del Web. Hola gente, soy nueva en este foro, llevo poco con html y css y me ha surgido ciertos problemas con unas listas. Me explico: Dispongo ...
  #1 (permalink)  
Antiguo 18/05/2011, 14:25
 
Fecha de Ingreso: mayo-2011
Mensajes: 2
Antigüedad: 6 años, 6 meses
Puntos: 0
Problemas con listas y links

Hola gente, soy nueva en este foro, llevo poco con html y css y me ha surgido ciertos problemas con unas listas. Me explico:

Dispongo de unas lista con el siguiente código
Código CSS:
Ver original
  1. .menuprincipal ol li {
  2.     list-style:none;
  3.     margin-bottom: 5px;
  4.     line-height: 10px;
  5.     background-color:#c8d8ef;
  6.     padding: 5px 5px 5px 5px;
  7.     width: 540px;
  8.  
  9. }
  10.  
  11. .menuprincipal ol li:hover {
  12.     background-color:#0067c1;
  13.     color:#FFF;
  14. }
  15.  
  16. .menuprincipal ol li a:hoover{
  17. color:#FFF;
  18. }


A la hora de aplicar las listas tengo el siguiente codigo:

Código HTML:
Ver original
  1. <ol>
  2. <li><a href="#">texto</a></li>
  3. <li><a href="#">texto</a></li>
  4. <li><a href="#">texto</a></li>
  5. <li><a href="#">texto</a></li>
  6. </ol>

La cuestión es: sin hoover lo tengo en color de fondo claro y texto negro. Cuando hago un hoover encima de link tengo el fondo de <li> oscuro y texto blanco. Pero si hago un hover dentro del <li> pero fuera del link se pone el fondo oscuro, el link sigue negro y por supuesto no es clikable..

Antes tenia puesto el <li> dentro del link, pero no me lo valida.
¿Existe alguna forma de hacer que el link sea igual de ancho como el <li> (esos 540px)? He provado con aplicarle un width pero no ha funcionado,

¿se puede hacer que la zona sin texto del <li> sea clikable?
Os adjunto unas imagenes de como esta y como me gustaria

como es ahora:


como me gustaria:



Muchas gracias!!!
  #2 (permalink)  
Antiguo 18/05/2011, 15:03
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Problemas con listas y links

cambia a esto
Cita:
.menuprincipal ol li:hover {
background-color:#0067c1;
}

.menuprincipal ol li:hover a{
color:#FFF;
}
  #3 (permalink)  
Antiguo 18/05/2011, 16:00
Avatar de edwines  
Fecha de Ingreso: mayo-2011
Mensajes: 21
Antigüedad: 6 años, 6 meses
Puntos: 3
Respuesta: Problemas con listas y links

Para que el link tenga el mismo ancho del li debes darle la propiedad display:block de esta manera el navegador lo mostrará como un bloque y así te permitirá cambiar su ancho. Así:

Código:
.menuprincipal ol li a {
  display:block;
  width:100%;
}

.menuprincipal ol li a:hoover{
  color:#FFF;
}
  #4 (permalink)  
Antiguo 20/05/2011, 04:00
 
Fecha de Ingreso: mayo-2011
Mensajes: 2
Antigüedad: 6 años, 6 meses
Puntos: 0
Respuesta: Problemas con listas y links

Perfecto!! Muchas gracias edwines me ha sido de gran utilidad!
He tenido que mover el padding de sitio porque sinó me hacia el link que ocupaba solo el alto de la tipografia. Pero ya esta solucionado.

Muchas gracias de nuevo!!

Etiquetas: links, listas
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 10:07.