Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
719 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  HTML/CSS: Problème - menu avec des images

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

HTML/CSS: Problème - menu avec des images

n°2023449
Demon_Bleu
Posté le 17-09-2010 à 09:24:39  profilanswer
 

Bonjour à tous !
 
Je veux faire un menu avec des images. J'ai fait des banners qui déchirent avec photoshop  :pt1cable: , 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ÔÔÔ ! ! :cry:  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  :fou:  !
 
-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  :sol: !
 
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 !  :cry:  
 
S'il y a qqn qui puisse m'apprendre comment faire les choses dans "Les règles de l'art" je serai super content  :bounce:  et il aura des remerciements dans mon site  :love:  
 
MERCI ! ! !  
 
 

mood
Publicité
Posté le 17-09-2010 à 09:24:39  profilanswer
 

n°2023554
aspirateur
Posté le 17-09-2010 à 22:48:11  profilanswer
 

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 :
 

Code :
  1. <ul>
  2. <li>Titre catégorie 1
  3.    <ul>
  4.    <li>Sous titre 1
  5.        <ul>
  6.        <li>Sous Sous titre</li>
  7.        </ul>
  8.     </li>
  9.     <li>Sous titre 2</li>
  10.    </ul>
  11. </li>
  12. <li>Titre catégorie 2
  13.    <ul>
  14.    <li>Sous titre 2
  15.        <ul>
  16.        <li>Sous Sous titre</li>
  17.        </ul>
  18.     </li>
  19.     <li>Sous titre 2</li>
  20.    </ul>
  21. </li>
  22. </ul>

 
 
Ensuite avec le CSS tu mets tout en forme ;)

n°2023678
Demon_Bleu
Posté le 19-09-2010 à 14:31:32  profilanswer
 

Citation :

aspirateur a écrit :

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 :
 

Code :
  1. <ul>
  2. <li>Titre catégorie 1
  3.    <ul>
  4.      <li>Sous titre 1...     
  5.    
  6.      ...<li>Sous titre 2
  7.      </li>
  8.    </ul>
  9. </li>
  10. </ul>

 
 
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    :ange:  
 
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  :pt1cable: 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  :fou: .  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   :cry:  (qui peut être très beau  :p ). Donc la question qui tue...  :)  
 
Comment insérer, dans un menu, des images différentes à la place du texte des titres ?  :bounce:  
 
Merci pour vos conseils !

n°2023771
aspirateur
Posté le 20-09-2010 à 09:08:11  profilanswer
 

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

Code :
  1. <ul>
  2. <li><img src="Titre_1.jpg" />
  3.    <ul>
  4.    <li><img src="sujet_1.jpg"/> </li>
  5.     <li><img src="sujet_2.jpg"/></li>
  6.    </ul>
  7. </li>
  8. <li><img src="Titre_2.jpg" />
  9.    <ul>
  10.    <li><img src="sujet_1.jpg"/> </li>
  11.     <li><img src="sujet_2.jpg"/></li>
  12.    </ul>
  13. </li>
  14. </ul>


 
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" />

n°2023773
David Bori​ng
Posté le 20-09-2010 à 09:14:04  profilanswer
 

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/

n°2024038
Demon_Bleu
Posté le 21-09-2010 à 09:28:26  profilanswer
 


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

n°2024336
unrealshad​ow
Posté le 22-09-2010 à 01:35:53  profilanswer
 

>> 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 !
 
 
}


---------------
http://forum.hardware.fr/hfr/Achat [...] 2517_1.htm

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  HTML/CSS: Problème - menu avec des images

 

Sujets relatifs
Problème include php 5Galerie d'image AS3 / Problème sous Firefox / Mac
probleme d'upload d'un wordpressProblème linguistique : champs ou colonnes ?
probleme page PHP sous internet explorercomment lire tableau html en javascript ?
probleme intro flashMoteur de recherche affichant les images des resultats
Problème communication SOCKET Réseau TCP/IPproblème avec xcopy d'un dossier
Plus de sujets relatifs à : HTML/CSS: Problème - menu avec des images


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR