Merci de me filer ton code type fuzzyline, je m'apprêtais à le copier pour y adapter mon site, mais j'ai eu la flemme (moi aussi), de tout refaire, et puis je préférais trouver mon erreur, ce qui est fait.
Je viens donc d'apprendre que les balises de type block ne prennent pas les propriétés du "block parent" mais les propriété par défaut qu'il faut modifier à chaque nouvelle utilisation, sauf Firefox.
En clair, rappelez-vous, voici le schéma de mon menu :
<div id="bordure">
<p id="menu">
<?php
echo '<a href="index.php?nompage=info_joueur"><div class="'.$bouton1.'"></div></a><br />';
echo '<a href="index.php?nompage=arme"><div class="'.$bouton2.'"></div></a><br />';
echo '<a href="index.php?nompage=troupe"><div class="'.$bouton3.'"></div></a><br />';
echo '<a href="index.php?nompage=siege"><div class="'.$bouton4.'"></div></a><br />';
echo '<a href="index.php?nompage=autre"><div class="'.$bouton5.'"></div></a><br />';
?>
</p>
</div>
Et j'avais donc mis #menu en float left, ce qui était bien pris en compte, mais à la première balise div, celle-ci repassait en dessous.
Il y aurait alors fallu remettre chaque div en float:left, mais je pense qu'il est plus simple de remplacer le div par un span.
La balise span n'étant pas de type block, elle ne change bien évidemment pas la disposition des autres block, par contre, ayant besoin de définir une hauteur et une largeur pour mettre l'image de fond, j'ai du rajouter la propriété display: block, comme indiqué au début du topic.
Néanmoins, pour simplifier, j'ai enlevé le span pour mettre directement le class dans le lien, comme ceci (j'ai mis le php à l'intérieur pour plus de lisibilité seulement) :
<div id="bordure">
<p id="menu">
<a href="index.php?nompage=info_joueur" class="<?php echo $bouton1; ?>"></a><br />
<a href="index.php?nompage=arme" class="<?php echo $bouton2; ?>"></a><br />
<a href="index.php?nompage=troupe" class="<?php echo $bouton3; ?>"></a><br />
<a href="index.php?nompage=siege" class="<?php echo $bouton4; ?>"></a><br />
<a href="index.php?nompage=autre" class="<?php echo $bouton5; ?>"></a><br />
</p>
</div>
Et le css qui va avec, répété pour chaque bouton ($bouton1 prend les valeurs info_joueur_fonce ou info_joeur_clair) :
.info_joueur_fonce
{
display: block;
background: url("images/info_joueur_fonce.png");
background-repeat : no-repeat;
height : 130px;
width : 130px;
margin-top : -20px;
}
.info_joueur_fonce:hover
{
display: block;
background: url("images/info_joueur_clair.gif");
margin-left : 29px;
}
.info_joueur_clair
{
display: block;
background: url("images/info_joueur_clair.png");
margin-left : 29px;
background-repeat : no-repeat;
height : 130px;
width : 130px;
margin-top : -20px;
}
J'en ai profité pour rajouter google chrome et netscape à mon contingent de navigateur qui fonctionnent bien.
Il me reste un problème, utilisant ovh démo en hébergement, il n'est pas rapide du tout, et le fait qu'il faille charger une image différente en passant sur les boutons du menu, parfois l'image n'a pas le temps de se charger avant que l'on enlève la souris, ce qui la fait planter et elle n'apparait plus du tout. Chaque image est en gif et ne fait que 10ko, je ne vois pas comment la réduire plus.
J'ai déja mis également la meme image en png une fois cliqué pour qu'elle apparaisse après avoir cliqué.
Est-ce que quelqu'un pourrait me rappeler comment mettre un texte en dessous du pointeur quand la souris est sur un lien.
Et est-ce qu'il est possible de mettre un texte alternatif si l'image ne s'affiche pas, dans du css ?
lol 
