Problema con a:hover en listas

kiM- · #1 (**permalink**) 27/03/2011, 18:17

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

ArturoGallegos · #2 (**permalink**) 27/03/2011, 18:58

prueba hacer este ajuste

Código CSS:

Ver original#menu_bar a{
font-size: 12px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
text-decoration: none;
font-weight: bold;
color: #333;
display:block;/*para que puedas especificarle una altura y la respete*/
float:left;/*para que tome el ancho de su contenido y no el 100%*/
height:30px;/*la altura que necesites tenga el elemento*/
}

kiM- · #3 (**permalink**) 29/03/2011, 14:28

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? :\

ArturoGallegos · #4 (**permalink**) 29/03/2011, 14:45

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#menu_bar a{
    font-size: 12px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    text-decoration: none;
    font-weight: bold;
    color: #333;
padding: 9px 0;
    }

kiM- · #5 (**permalink**) 29/03/2011, 16:11

Funciona de lujo, saludos y gracias^^