Menu CSS: 1/Humain: 0[résolu]

Tout d'abord bonjour. Je ne sais pas si vous allez pouvoir me comprendre et encore moins me donner une réponse, cependant je me lance quand même^^

Voilà je vous explique mon problème..

J'aimerais que les titres de mes sous menus (qui sont sous forme d'images png), restent dans l'optique d'un design extensible. En effet, ces petites images ont décidé de me pourrir ma vie de webmaster amateur et je ne trouve pas de solutions...

Je vous propose une première capture de 1440 * 900: http://www.casimages.com/img.php?i=081218034831227848.jpg

et une capture de 1280 * 768: http://www.casimages.com/img.php?i=081218035121214678.jpg

Et voici le morceau du code CSS concerné..

.centre_bouton_detente
{
   position: absolute;
   left: 16.8%;
   top: 16.7%;
}

.centre_bouton_apprendre
{
   position: absolute;
   left: 16.8%;
   top: 33.8%;
}

.centre_bouton_mesProjets
{
   position: absolute;
   left: 16.8%;
   top: 54.1%;
}

.centre_bouton_meContacter
{
   position: absolute;
   left: 16.8%;
   top: 71.2%;
}

Et du xHTML:

<div id="menu">     
	       
              <div class="element_menu">

                 <h4 class="cache">Détente</h4>                   
                 <img class="centre_bouton_detente" src="css/images/bouton_detente_site.png" alt="Detente" />
                 <ul>
                 <li><a href="http://www.hordes.fr" title="Jeu online sur navigateur">Hordes</a></li>
                 <li><a href="http://www.ogame.fr" title="Jeu online sur navigateur">Ogame</a></li>				 
                 </ul>

			  </div>  
 
              <div class="element_menu">
			     
				 <h4 class="cache">Apprendre</h4>
                                 <img class="centre_bouton_apprendre" src="css/images/bouton_apprendre_site.png" alt="Apprendre" />
			     <ul>
                 <li><a href="http://www.siteduzero.com" title="Tutoriels très simples à comprendre">Site du Zéro</a></li>				 
				 <li><a href="http://www.developpez.com" title="Tutoriels plus complets mais aussi plus complexes">Developpez</a></li>
				 <li><a href="http://css.alsacreations.com/" title="Tutoriels HTML, CSS et standards web">Alsacréations</a></li>
                 </ul> 				 
          	  </div>	  
		   
	          <div class="element_menu">

                 <h4 class="cache">Mes projets</h4>
                 <img class="centre_bouton_mesProjets" src="css/images/bouton_mesProjets_site.png" alt="Mes projets" />
                 <ul>
                 <li><a href="Langage_C.html" title="Programmes en C">Langage C</a></li>
				 <li><a href="java.html" title="Programmes en Java">Java</a></li>
			    </ul>
				
              </div>
			  
	          <div class="element_menu">
		  
			     <h4 class="cache">Me contacter</h4>
                             <img class="centre_bouton_meContacter" src="css/images/bouton_meContacter_site.png" alt="Me contacter" />
			     <ul>
			     <li><a href="mailto:legras.jean_charles@hotmail.fr" title="Mon e-mail">Cliquer ici</a></li>
			     </ul>
			  
	          </div>
		   
</div>

Voilà, avant de vous quitter, je tenais à souligner le fait que je suis un débutant donc si j'ai fait des erreurs aberrantes, je vous prie de croire que j'ai fait de mon mieux, merci et désolé de vous importuner.
Modifié par Aragog (19 Dec 2008 - 22:10)

D'accord, je retiens, positionnements absolus pour les cas rares, merci.

Après avoir enlevé les styles de ces images, j'obtiens ceci: http://www.casimages.com/img.php?i=081218042842800273.jpg