Bonjour à tous !
 
Je veux faire un menu avec des images. J'ai fait des banners qui déchirent avec photoshop   , avec le nom de chaque titre (et sous-titre) du menu et je veux les utiliser comme les elts. du menu. Le problème c'est que j'arrive à le faire en plaçant les images dans le .html ET C PÂ BÔÔÔ ! !  Je veux que tous les graphiques et mise en page soit dans le .css! Mon code ressemble à ça:
 
html:

<div id="menu">  
    <div class="element_menu">
        <h3> <div id="Titre_1"><img src="Titre_1.jpg" /></div></h3>
            <ul>
                 <li><a href="page_1.html"> <div id="sujet_1"><img src="sujet_1.jpg"/> </div></a></li>
                 <li><a href="page_2.html"> <div id="sujet_2"><img src="sujet_2.jpg"/> </div></a></li>
                 <li><a href="page_3.html"> <div id="sujet_3"><img src="sujet_3.jpg"/> </div></a></li>      
            </ul>
    </div>
</div>

et le CSS:

#menu {
       float: left;
       width: 140px;
       font-size: 1.0em;
}
 
.element_menu {
       background-color: #000066 /* Couleur de fond menu (transpatent) */
       background-repeat: repeat-x;    
       margin-bottom: 10px;
}
 
/* Quelques effets sur les menus */
 
.element_menu h3 {    
       color: #FFFFFF;
       font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
       padding: 0px;
       padding-left: 10px;
       margin: 0px;
       margin-bottom: 20px;
       text-align: left;
}
 
.element_menu ul {
      padding: 0px;
      padding-left: 10px;
      margin: 0px;
      margin-bottom: 10px;
      text-align: left;
}
 
.element_menu a {
      text-decoration: none;
      color: #FFFF99;
      padding: 5px;
      margin: 0px;
      margin-bottom: 50px;
      //visibility: hidden;
}
 
/*  Le design du menu */
 
#Titre_1, #Titre_2 {
      font: 1.0em Verdana;            
      color: #FFFF99;
      padding: 0px;
      margin: 0px;
      //visibility: hidden;            
}
 
#sujet_1, #sujet_2, #sujet_3, #sujet_4, #sujet_5, #sujet_6 {
      font: 0.8em Verdana;            
      color: #FFFF99;
      padding: 5px;
      margin-bottom: 5px;
      margin: 0px;
      //visibility: hidden;            
}
 
#Titre_1 img, #sujet_1 img, #sujet_2 img, #sujet_3 img {
      width: 80%;  
}

 
Mais cette méthode à quelques problèmes:
- il n'y a pas de texte entre les balises <a href....>  ...  </a>, il y a seulement l'image. Si je mets du texte et que j'active .element_menu a { ...visibility: hidden; } à l'affichage de la page, le texte disparaît mais l'image aussi    !
 
-Si dans trois jours je veux changer mes super banners par d'autres, il faut que je change les 400 pages html de mon site ! et je suis un gros feneant   !
 
J'ai essayé de faire un " background: url("Titre_1.jpg" )" dans le .element_menu a {  } mais je peux afficher une seule image et en plus, elle s'affiche qu'à moitié ! le width: 100%; ne marche pas !    
 
S'il y a qqn qui puisse m'apprendre comment faire les choses dans "Les règles de l'art" je serai super content    et il aura des remerciements dans mon site    
 
MERCI ! ! !  
 
 

Il est en ligne ce code ? Parceque c'est pas évident de savoir ce que tu veux faire la.
 
Tu mets des div à des endroits improbable (dans des balises <a> <h3> ...)
 
Normalement un menu peut se faire entièrement avec les listes :
 

 
 
Ensuite avec le CSS tu mets tout en forme

 
Merci pour ton commentaire     malheureusement le code n'est pas en ligne et je n'ai pas trouvé d'exemple sur le net mais je vais essayer d'être un peu plus précis      
 
J'ai fait les joli titres de mon menu avec photoshop pour éviter des problèmes de compatibilité avec les polices. Je veux afficher ces titres dans mon menu en tant qu'images à la place du texte classique. Les <div> que j'ai mis entre les balises <a> <h3> sont pour pouvoir insérer chaque image du menu. Dans le .css, j'ai spécifié les paramètres .element_menu a {... } pour pouvoir avoir l'espace dans le quel je vais insérer chaque image. Puis j'ai créé les <div> #Titre_1, #Titre_2{... } et  #sujet_1, #sujet_2... {... } pour pouvoir spécifier dans le .html l'image à insérer. Cette manière bizarre de faire les choses ça marche   mais je suis persuadé qu'on peut faire mieux.
 
J'ai mis les <div> entre <a> <h3>...  car c'est la seule façon que j'ai trouvé pour insérer des images différentes.  
Normalement, on peut spécifier une image comme background pour les éléments d'un menu mais on peut spécifier une seule image   .  J'ai essayé de les spécifier dans chaque #Titre_1 img{... } l'image à insérer mais ça marche pas bien; à l'affichage, l'image correspondant à chaque titre apparaît avec sa taille originale (on voit seulement un morceau de l'image) et je n'arrive pas a modifier la taille de l'image lors de l'affichage.
 
C'est pour ça que je demande si qqn a déjà fait qqc similaire à ce que j'ai envie de faire; Je ne voudrais pas faire un menu classique    (qui peut être très beau   ). Donc la question qui tue...    
 
Comment insérer, dans un menu, des images différentes à la place du texte des titres ?    
 
Merci pour vos conseils !

Soit je comprends pas ce que tu veux dire soit, c'est tout simple.
 
Tu crées un fichier "menu.php" contenant :
 

 
Et ce fichier tu le mets en includes dans tes pages.
 
[citation]
Comment insérer, dans un menu, des images différentes à la place du texte des titres ?  
[/citation]
 
Au lieu de mettre du texte, tu mets <img src="xxx.jpg" alt="nom image" />

C'est super moche, ne fais pas cela. De nombreuses requêtes http, et si les images ne s'affichent pas, les gens ne voient rien (comme le robot d'un moteur de recherche d'ailleurs).
Emploies des sprites
http://www.alsacreations.com/tuto/ [...] ition.html
http://skyje.com/2010/02/css-sprites/
http://blog.angechierchia.com/xhtm [...] rites-css/

 
C'est tout à fait ce que je voulais !    Je ne connaissais pas les sprites et c,'est l'occasion de faire connaissance    
 
Merci beaucoup pour l'info, je m'y mets de suite et je vous ferai savoir la fin de l'histoire    

>> Complètement d'accord avec David Boring. Les sprites sont vraiment bien utiles. Au lieu d'avoir deux images (une de base et l'autre en hover), tu as les deux en une se qui facilite l'apparition de l'image.
tu n'as plus souvent qu'à régler ça en css d'une façon comme celle ci :
 
#menu ul li a{
background-image: premier image
}
#menu ul li a:hover{
display:block;
background-position: left si ton image qui doit apparaitre est sur la gauche, right si elle est à droite, bottom si elle est en bas et top si elle est en haut ^^
 
Après, si tu utilises simplement des images pour afficher une typo particulière, si j'étais toi, je me tournerais plutôt vers cufon (script javascript qui te permets d'afficher la typo que tu veux). Avec cufon, le texte se comportera comme du texte et ce sera bien meilleur pour ton référencement !
 
 
}