Buenas,
Estoy haciendo un men� con rollover per� tengo algunos problemas. Cuando
hago el rollover sobre los botones del menu aparece una imagen pero la
capa que tengo debajo del men� se desplaza toda hacia abajo ya que la
imagen tiene un tama�o de altura mayor al de la imagen inicial del
bot�n, yo quisiera que la capa que hay debajo no se desplaze si no que
la imagen del rollover aparezca por encima, como lo podria hacer?
Os copio como tengo los estilos y el codigo. Gracias de antemano y saludos.
Primero el codigo:
...
<!-- contenidor -->
<div id="contenidor">
<!-- cap�alera -->
<div id="cap">
<h1><a href="#"><img src="img/logo.gif"></a></h1>
<h2><img src="img/cap1.gif"></h2>
<h3><img src="img/cap2.gif"></h3>
</div>
<!-- / cap�alera -->
<!-- menu principal -->
<div id="menuprincipal">
<ul>
<li><a href="#" title="Serveis"><img
src="img/b_serveis.gif"></a></li>
<li><a href="#" title="Grups"><img
src="img/b_grups.gif"></a></li>
<li><a href="#" title="Agenda"class="agenda"><img
src="img/b_agenda_b.gif"></a></li>
<li><a href="#" title="Representats"><img
src="img/b_representats.gif"></a></li>
<li><a href="#" title="Contacte"><img
src="img/b_contacte.gif"></a></li>
</ul>
</div>
<!-- / menu principal -->
<!-- cos -->
<div id="cos">
<!-- cercador -->
<div id="cercador">cercador</div>
<!-- / cercador -->
<!-- pestanya agenda -->
<div id="pestanya"><h1></h1></div>
<!-- / pestanya agenda -->
<!-- resultats -->
<div id="resultats">resultats</div>
<!-- / resultats -->
</div>
<!-- / cos -->
...
Y aqu� los estilos:
...
/* Men� principal */
div#menuprincipal {
position: relative;
height: 78px;
z-index: auto;
}
div#menuprincipal ul {
list-style: none;
margin: 0 0 0 0;
padding: 0;
float: left;
background-color: #fff;
border: 0px solid #fff;
border-bottom: 0;
}
div#menuprincipal ul li {
margin: 0;
padding: 0;
float: left;
}
div#menuprincipal ul li a.serveis:hover {
background-image: url(../img/p_serveis_b.gif);
padding : 0 0 0 0;
height: 365px;
top: 50px;
}
div#menuprincipal ul li a.grups:hover {
background-image: url(../img/p_grups_b.gif);
padding : 0 0 0 0;
height: 365px;
top: 50px;
}
div#menuprincipal ul li a.agenda:hover {
background-image: url(../img/p_agenda_b.gif);
padding : 0 0 0 0;
height: 385px;
top: 50px;
}
div#menuprincipal ul li a.representats:hover {
background-image: url(../img/p_representats_b.gif);
padding : 0 0 0 0;
height: 365px;
top: 50px;
}
div#menuprincipal ul li a.contacte:hover {
background-image: url(../img/p_contacte_b.gif);
padding : 0 0 0 0;
height: 365px;
top: 50px;
}
/* / Men� principal */
/* Cos */
div#cos {
background-color: #ffcccb;
border: 0;
border-bottom: 0;
position: relative;
width: 750px;
top: 0px;
margin: 0 0 0 0;
padding-bottom: 10px;
}
...
_______________________________________________
Lista de distribuci�n Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente direcci�n:
http://ovillo.org/mailman/listinfo/ovillo
