Sigo con problemas con las imágenes cambiantes. Ahora tengo el siguiente problema:
al usar para una cabecera básicamente consistente en una foto que cambia al pasar el cursor utilizo el siguiente código
Código:
<html>
<head>
<title>Ejemplo</title>
<style type="text/css">
ul {
list-style-type: none;
}
.cabecera li {
float: left;
}
.cabecera a {
margin: 0 2px;
width:633px;
height: 187px;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background:url(/fotoarribapastelpinc.jpg);
}
.cabecera a:hover {
background:url(/fotoarribatododistorsion.jpg);
border: 1px solid gray;
}
</style>
</head>
<body>
<div id="cabecera" style="position:absolute; width:506px; height:115px; z-index:1; left: 158px; top: 79px">
<ul class="cabecera">
<li><a href=""></a></li>
</ul>
</ul></div>
</body>
</html>
Tenía grandes problemas para maquetarlo centrándolo con otras capas abajo y creo que el problema es que al usar listas, la foto, que sería el primer elemento de la lista se desplaza a la derecha. He estado buscando pero no se me ocurre como hacer para que esto no suceda, que la foto ocupe el lugar exacto(dándole las mismas dimensiones) que la capa, sin desplazarse. Gracias por anticipado.