Foros del Web » Creando para Internet » CSS »

Problema con a:hover en listas

Estas en el tema de Problema con a:hover en listas en el foro de CSS en Foros del Web. Pués resulta que he hecho unas listas y les he añadido <a> y <a:hover> con sus respectivas imágenes de sustitución en a:hover, pero resulta que ...
  #1 (permalink)  
Antiguo 27/03/2011, 19:17
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 9 años, 6 meses
Puntos: 2
Problema con a:hover en listas

Pués resulta que he hecho unas listas y les he añadido <a> y <a:hover> con sus respectivas imágenes de sustitución en a:hover, pero resulta que el a:hover no me coge todo el alto de las listas o del div (menu_bar) y no sé como arreglarlo, he probado poníendole altura y nada :\ alguien sabe?

CSS:
Cita:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

#global {
width: 1007px;
margin-right: auto;
margin-left: auto;
}
#logo {
background-image: url(images/logo.png);
height: 200px;
width: 1007px;
}
#menu_bar {
width: 1007px;
background-image: url(images/bg_menu_bar.png);
text-align: center;
}
#menu_bar ul {
display:inline;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin: 0px;
}
#menu_bar ul li {
list-style-type: none;
margin-left: 2px;
margin-right: 2px;
display:inline;
padding: 0px;
}
#menu_bar a{
font-size: 12px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
text-decoration: none;
font-weight: bold;
color: #333;
}
#menu_bar a:hover {
background-image: url(images/bg_menu_bar_hover.png);
height: 100px;
width: 100px;
}
HTML:
Cita:
</head>

<body>
<div id="global">
<div id="logo"></div>
<div id="menu_bar">
<ul>
<li><a href="#">Noticias</a></li>
<li><a href="#">Descargas</a></li>
<li><a href="#">Noticias</a></li>
<li><a href="#">Foros</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Chat</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
</div>
</body>
</html>
Saludos y graaacias
  #2 (permalink)  
Antiguo 27/03/2011, 19:58
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Problema con a:hover en listas

prueba hacer este ajuste

Código CSS:
Ver original
  1. #menu_bar a{
  2. font-size: 12px;
  3. font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  4. text-decoration: none;
  5. font-weight: bold;
  6. color: #333;
  7. display:block;/*para que puedas especificarle una altura y la respete*/
  8. float:left;/*para que tome el ancho de su contenido y no el 100%*/
  9. height:30px;/*la altura que necesites tenga el elemento*/
  10. }
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 29/03/2011, 15:28
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: Problema con a:hover en listas

No me es posible usar el display:block ya que uso el display:inline para que se quede horizontal, evito usar float:left & right porque sino no puedo alinear el texto en el centro, no hay alguna otra forma? :\
  #4 (permalink)  
Antiguo 29/03/2011, 15:45
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Problema con a:hover en listas

buen puento se me paso desapercibido el que debe estar centrado... siendo asi yo optaria por usar un padding en el enlace... por ejemplo, si necesitas que tu link tenga una altura de 30px y tu texto ya cubre 12px colocamos un padding de (30-12)/2 = 9px

Código CSS:
Ver original
  1. #menu_bar a{
  2.     font-size: 12px;
  3.     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  4.     text-decoration: none;
  5.     font-weight: bold;
  6.     color: #333;
  7. padding: 9px 0;
  8.     }
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #5 (permalink)  
Antiguo 29/03/2011, 17:11
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: Problema con a:hover en listas

Funciona de lujo, saludos y gracias^^

Etiquetas: 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 20:26.