Pués bueno, resulta que yo hacía botones usando divs, a cada div le daba redondeado, estilo de letra, fondo, etc... y ponía a dicho div un hipervínculo, en a:hover ponía otra imagen para que se sustituyera. En listas es diferente, no puedo poner un a:hover porque no me sale del todo al pasar el ratón por encima..
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>Documento sin título</title>
</head>
<body>
<div id="cont_global">
<div id="header">
<div id="cont_buttons">Colocar aquí el contenido para id "cont_buttons"
<div id="buttons">
<ul>
<li><a href="#">Contacto</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Información</a></li>
<li><a href="#">Foros</a></li>
<li><a href="#">Noticias</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
Cita: body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#cont_global {
width: 1007px;
}
#header {
background-image: url(images/logo.png);
height: 196px;
width: 1007px;
}
#cont_buttons {
height: 196px;
width: 1007px;
overflow: hidden;
}
#cont_buttons ul li {
float: right;
padding-left: 10px;
list-style-type: none;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
font-size: 14px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #FFF;
font-weight: bold;
padding-top: 3px;
padding-right: 7px;
padding-bottom: 3px;
background-image: url(images/button_nav_a.png);
margin-right: 5px;
margin-top: 137px;
}
#cont_buttons a:hover {
background-image: url(images/button_nav_hover.png);
}
Cómo podeis comprobar tengo el cont_buttons a:hover con una imagen de fondo, la cuál quiero que ocupe el botón entero de las lists, pero no puedo, he probado a poner en cont_buttons ul li a añadirle una a "cont_buttons ul li a" pero nada se me desordena y no funciona. Lo único que quiero es que al pasar el ratón por encima del botón (con hipervínculo incluido) se cambie totalmente la imagen como ocurre con los divs.
Saludos y gracias, espero haberme explicado bien