Foros del Web » Creando para Internet » CSS »

Problema con fondo y a:hover en listas

Estas en el tema de Problema con fondo y a:hover en listas en el foro de CSS en Foros del Web. 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á ...
  #1 (permalink)  
Antiguo 27/03/2011, 12:33
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 9 años, 6 meses
Puntos: 2
Problema con fondo y a:hover en listas

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!

Etiquetas: fondo, 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 13:53.