Problème positionnement images dans une div [résolu]

Bonjour, tout d'abord je tiens à préciser que je suis nouveau tant dans la création de site web que sur votre forum, je vous prie donc de m'excuser si par aventure je commetais quelque erreurs.

Je vous explique mon souci :
J'ai fait un photo montage sous Gimp devant être mon menu principal. Voulant avoir un menu original, j'ai utilisé une police spéciale laquelle a été déformée pour coller au mieux à mon idée. Le résultat global étant satisfaisant, j'ai souhaité pourvoir utiliser des focus/hover/onclick sur mes liens.
J'ai donc découpé mon image afin que le survol des liens soient le plus précis possible mais également que je n'ai pas à modifier l'image dans sa totalité pour faire mes effets visuels.

Je me heurte malheureusement à un positionnement d'images, lesquelles ne s'assemblent pas pour reformer mon image totale.
Voici le lien du site sur lequel vous verrez le problème et la partie html et css du menu.

http://spyrot.knah-tsaeb.org/index.php?c=page_d_accueil[/url]

<div id="menu">
<div class="menu-image-01">
<img src="images/menu-01.gif">
</div>
<div class="menu-image-02">
<img src="images/menu-02.gif">
</div>
<div class="menu-image-03">
<img src="images/menu-03.gif">
</div>
<div class="menu-image-04-accueil">
<a href="index.php&#063;c=page_d_accueil"><img src="images/menu-04-accueil.gif"/></a>
</div>
<div class="menu-image-05">
<img src="images/menu-05.gif"/>
</div>
<div class="menu-image-06">
<img src="images/menu-06.gif"/>
</div>
<div class="menu-image-07">
<img src="images/menu-07.gif"/>
</div>
<div class="menu-image-08-gallerie">
<a href="index.php&#063;c=gallerie"><img src="images/menu-08-gallerie.gif"/></a>
</div>
<div class="menu-image-09">
<img src="images/menu-09.gif"/>
</div>
<div class="menu-image-10">
<img src="images/menu-10.gif"/>
</div>
<div class="menu-image-11">
<img src="images/menu-11.gif"/>
</div>
<div class="menu-image-12-artiste">
<a href="index.php&#063;c=artiste"><img src="images/menu-12-artiste.gif"/></a>
</div>
<div class="menu-image-13">
<img src="images/menu-13.gif"/>
</div>
<div class="menu-image-14">
<img src="images/menu-14.gif"/>
</div>
<div class="menu-image-15">
<img src="images/menu-15.gif"/>
</div>
<div class="menu-image-16-contact">
<a href="index.php&#063;c=contact"><img src="images/menu-16-contact.gif"/></a>
</div>
<div class="menu-image-17">
<img src="images/menu-17.gif"/>
</div>
<div class="menu-image-18">
<img src="images/menu-18.gif"/>
</div>
</div>

#menu{
width:215px;
height:352px;
float:right;
position:relative; /*placer le menu à droite correctement urgent hihihi*/
}

#menu-image-01{
width:56px;
height:34px;
position:absolute;
top:0px;
right:159px;
left:0px;
margin: 0px; 
padding:0px;
border:none;
}
#menu-image-02{
width:159;
height:34px;
position:absolute;
top:0px;
right:0px;
left:56px;
margin:none; 
padding:none;
border:none;
}
#menu-image-03{
margin: 0px; padding:0px;
}
#menu-image-04-accueil{
margin: 0px; padding:0px;
}
#menu-image-05{
}
#menu-image-06{
}
#menu-image-07{
}
#menu-image-08-gallerie{
}
#menu-image-09{
}
#menu-image-10{
}
#menu-image-11{
}
#menu-image-12-artiste{
}
#menu-image-13{
}
#menu-image-14{
}
#menu-image-15{
}
#menu-image-16-contact{
}
#menu-image-17{
}
#menu-image-18{
}

Je n'ai pas trouvé sur le net de réponses s'adaptant à ma situation, et j'ai déjà essayé plusieurs façon d'opérer notamment les <li> ou plusieures valeurs de positionnement.
Je précise que certaines images sont vides et n'ont été crées que pour avoir un ensemble de 215/352px et les images sont parfaitement découpées en taille.
D'avance merci de votre aide.
Modifié par M0rbidAngel (10 Aug 2007 - 04:09)

Bonjour,

Sur le net peut-être, mais ici, y'atouskifo (-;

Tu peux faire ça dans des <li>.
Mais tu t'y es peut-être mal pris lors du découpage en petites images.
Toutes doivent avoir la largeur la plus grande. Les petits bouts doivent rester à gauche ou à droite des morceaux qui en ont besoins (la boîte du bas).
Comme elles sont en .gif, je suppose que tu utilises la transparence, donc pas de problème.

Et puis tu aurais pu éviter de les découper et utiliser des portes coulissantes.
Celui-là, il n'est pas mal, non ?
Regarde l'image. Tu comprends ?



+ “#menu-image-01” est correct, mais correspond à “id="menu-image-01” pas à “class="menu-image-01”. Il est unique.
 
Modifié par Gihef (10 Aug 2007 - 02:08)

Merci, je n'ai pas bien saisi, mais je vais plutot passer avec un méthode background-image et d'autres images en lien, effectivement cela semble plus simple.
Je m'y attaque dans les prochains jours.