Problema con fondo y a:hover en listas

kiM- · #1 (**permalink**) 27/03/2011, 11:33

Pués resulta que yo tengo una web en 1007px de ancho, el logo también es de 1007px de ancho y el menú horizontal que está justo debajo también, o al menos eso intento. vereis lo que intento es que el menú de abajo tenga el fondo bg_menu_bar ocupando todo el ancho del mismo (los 1007px), he usado listas encima en float:left para que el menú quede horizontal y no en vertical, pero tengo un problema y es que no puedo hacer para que el fondo bg_menu_bar ocupe todo el ancho si lo pongo en las listas, tengo que ponelo en el div que contiene las listas, me ocurre algo parecido en el a:hover y es que lo pongo con la imagen bg_menu_bar_hover y al pasar el ratón por encima si cambia pero no del todo, solo un trozo, como que no ocupa todo el alto y ancho. Por último tengo otro problema que no consigo resolver y es que no consigo centrar las listas, lo he intando centrando el div e incluso las listas con margin-left & right en auto y nada :\...

Os dejo el css y html a ver si me podeis ayudar:

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 {
float: left;
width: 1007px;
margin-right: auto;
margin-left: auto;
}
#buttons_bar {
float: left;
margin-right: auto;
margin-left: auto;
background-image: url(images/bg_menu_bar.png);
}
#buttons_bar ul {
float: left;
text-align: center;
margin: 0px;
list-style-type: none;
padding: 0px;
width: 1007px;
}
#buttons_bar ul li {
text-align: center;
float: left;
list-style-type: none;
margin: 0px;
}
#buttons_bar ul li a {
text-decoration: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFF;
margin-right: 2px;
margin-left: 2px;
}
#buttons_bar a:hover {
background-image: url(images/bg_menu_bar_hover.png);
padding: 2px;
}

HTML:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EE</title>
</head>

<body>
<div id="global">
<div id="logo"></div>
<div id="menu_bar">
<div id="buttons_bar">
<ul>
<li><a href="#">Noticias</a></li>
<li><a href="#">Información</a></li>
<li><a href="#">Chat</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Foros</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Menú</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

Saludos y gracias!