MENU en CSS !!

J'essaye de créer un menu principal dans mon thème mais géré par CSS,
or il m'arrive un phénomène visuel étonnant sur :
http://www.petitbain.com[/url]

Il faut amener la souris dans la zone orange où il y a les 6 trous sur l'eau, et je voudrais faire apparaitre un poussin à travers le trou lorsque la souris passe dessus ! Le problème, c'est que j'ai des moitié de poussins qui apparaissent.
Je ne vois vraiment pas d'où ça vient ?

CSS

.bouton-poussin1
{
padding-top: 53px;
padding-left: 21px;
}
.bouton-poussin1 a
{
padding-top: 53px;
padding-left: 21px;
}
.bouton-poussin1 a:hover
{
padding-top: 53px;
padding-left: 21px;
background-image: url('images/bouton_poussin.jpg');
background-repeat: no-repeat;
}

.bouton-poussin2
{
padding-top: 13px;
padding-left: 115px;
}
.bouton-poussin2 a
{
padding-top: 13px;
padding-left: 115px;
}
.bouton-poussin2 a:hover
{
width: 56px;
height: 56px;
padding-top: 13px;
padding-left: 115px;
background-image: url('images/bouton_poussin.jpg');
background-repeat: no-repeat;
}

THEME

<td width="650" height="200"><table width="650" height="2
00" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="135" height="200" rowspan="3">&nbsp;</td>
<td width="515" height="110"><div class="bouton-poussin1"><a href="">&nbsp;</a>
<div class="bouton-poussin2"><a href="">&nbsp;</a></div></div></td>
</tr>
<tr>
<td width="515" height="60" align="center" id="banner"><{$xoops_banner}></td>
</tr>
<tr>

Hello et bienvenue

Ton URL ne fonctionne malheureusement pas, tu l'as rédigée sans tenir compte des explications données dans l'Aide du forum et dans la FAQ

Le problème est qu'une structure sous forme de tableau ne facilite vraiment pas la représentation et donc l'aide qu'on peut te donner (en clair : pour moi, ton code HTML ne signifie rien, je ne sais pas à quoi correspond quoi entre les td, tr, rowspan et autres caractères insécables ;-/)

Pourquoi ne pas structurer plus logiquement ce menu sous forme de liste de liens (ul, li) ? On s'y retrouvera bien plus facilement... et toi aussi
Tu trouveras de nombreux tutoriels ici-même, et même une Galerie de menus en CSS où puiser ton inspiration

Ce qui est sûr, c'est que tu te heurtes à de gros problèmes de compatibilité si tu mélanges les padding-top (ou bottom) avec des height sur le même élément.
Modifié par Raphael (11 Jul 2006 - 18:03)

Bonjour,

je veux bien abandonner mes padding-top et bottom mais j'aurais besoin d'aide pour utiliser les ul et li.
Si je comprends bien, Je dois mettre une partie dans ma feuille de style mais dans ma page html le menu doit être contenu dans un espace de 515x110px.
mon image (a) est : bouton-vide.jpg et image (a:hover) est bouton-poussin.jpg


http://www.petitbain.com