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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  menu css3 RESOLU

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

menu css3 RESOLU

n°2229955
Profil sup​primé
Posté le 04-06-2014 à 16:01:52  answer
 

:hello:  
 
j'avais quelque soucis avec mon menu css, c'est un simple menu que j'ai réaliser je ne voulais pas un truc compliquer.
mais j'ai 2 ou 3 soucis que j'arrive pas a régler tous seul.
 
en 1er voici le code html:

Code :
  1. <div class="right3">
  2.     <div id="navigation">
  3.    <ul>
  4.         <li><a href="#"><img src="maison-maison-icone-3710-128.png" width="58" height="58" alt=""/></a>Maison</li>
  5.         <li><a href="shop.html"><img src="ecommerce-panier-shoping-webshop-icone-6530-128.png" width="58" height="58" alt=""/></a>Shop
  6.     <ul>
  7.         <li><a href="promotion.html">Promotion amazon</a></li>
  8.         <li><a href="carte-graphique.html">Carte graphique</a></li>
  9.         <li><a href="nas.html">Serveur nas</a></li>
  10.         <li><a href="GEEK.html">geek zone</a></li>
  11.     </ul>
  12.      </li>
  13.         <li><a href="prez.html"><img src="telechargements-dossier-manille-icone-4466-128.png" width="58" height="58" alt=""/></a>Trousse a outils</li>
  14.         <li><a href="Tuto/index.html"><img src="livres-agenda-education-bibliotheque-icone-5155-128.png" width="58" height="58" alt=""/></a>Tutoriels</li>
  15.         <li><a href="contact.html"><img src="enveloppe-courrier-sobre-icone-4172-128.png" width="58" height="58" alt=""/></a>Contact</li>
  16.        
  17. </ul>
  18. </div>
  19.     </div>


j'ai installer se menu dans la classe right3 mais je ne voit pas cette classe, si vous regarder sur mon site crash override.fr en haut les simples boutons son dans la classe right3
mais quand j'ai créer mon menu et bien je ne vois plus cette classe avec se fond gris.
savez vous comment installer cette classe dans mon menu ?


Message édité par Profil supprimé le 05-06-2014 à 13:25:20
mood
Publicité
Posté le 04-06-2014 à 16:01:52  profilanswer
 

n°2229970
Profil sup​primé
Posté le 04-06-2014 à 17:25:55  answer
 

je suis arrivé a peu près de se que je voulais mais l'image reste sur la gauche et je trouve pas comment l'aligner au milieu, de + j'ai enlever la classe right3 et j'ai intégrer l'arrière plan directement dans le css mais le résultat n'est pas chouette.
http://forum.aideonline.com/static/mesimages/105/site.png
 
 
voici le nouveau code html:

Code :
  1. <div id="container">
  2.       <header>
  3.       <nav id="navigation">
  4.    <ul>
  5.         <li><a href="#"><img src="maison-maison-icone-3710-128.png" width="38" height="38" alt=""/></a>Maison</li>
  6.         <li><a href="shop.html"><img src="ecommerce-panier-shoping-webshop-icone-6530-128.png" width="38" height="38" alt=""/></a>Shop
  7.     <ul>
  8.         <li><a href="promotion.html">Promotion amazon</a></li>
  9.         <li><a href="carte-graphique.html">Carte graphique</a></li>
  10.         <li><a href="nas.html">Serveur nas</a></li>
  11.         <li><a href="GEEK.html">geek zone</a></li>
  12.     </ul>
  13.      </li>
  14.         <li><a href="prez.html"><img src="telechargements-dossier-manille-icone-4466-128.png" width="38" height="38" alt=""/></a>Trousse à outils
  15.      <ul>
  16.           <li><a href="prez-2.html">Page 2</a></li>
  17.      </ul>
  18.         </li>
  19.         <li><a href="Tuto/index.html"><img src="livres-agenda-education-bibliotheque-icone-5155-128.png" width="38" height="38" alt=""/></a>Tutoriels
  20.             <ul>
  21.         <li><a href="Tuto/photoshop.html">Photoshop</a></li>
  22.         <li><a href="Tuto/android.html">Android</a></li>
  23.         <li><a href="Tuto/blender.html">Blender</a></li>
  24.         <li><a href="Tuto/CSS.html">CSS</a></li>
  25.         <li><a href="Tuto/the Gimp.html">The gimp</a></li>
  26.             </ul>
  27.             </li>
  28.         <li><a href="contact.html"><img src="enveloppe-courrier-sobre-icone-4172-128.png" width="38" height="38" alt=""/></a>Contact</li>
  29.        
  30. </ul>
  31. </nav>
  32.     </header>

n°2229972
billgatesa​nonym
Posté le 04-06-2014 à 17:39:14  profilanswer
 

Quand on va sur le site override.fr, on a tout de suite "Override en maintenance".
 
Hier soir, j'ai vu un message demandant de l'aide sur des menus et du css.
Peut-être que vous êtes dans son équipe. Son message a disparu.
 
Voici une solution qui devrait marcher, à la fois pour vous et pour lui.

Code :
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. #nav {
  5. height: 77px;
  6. width: 800px;
  7. background-color: #cfcfcf;
  8. }
  9. #nav ul {
  10. list-style: none;
  11. padding: 0;
  12. margin: 0;
  13. }
  14. #nav ul li ul {
  15. display: none;
  16. }
  17. #nav ul li:hover ul {
  18. display: block;
  19. }
  20. #nav li:hover ul li {
  21. float: none;
  22. background-color: lightgreen;
  23. }
  24. #nav ul li:hover ul li ul li {
  25. position: relative;
  26. display: none;
  27. background-color: purple;
  28. left: 110px;
  29. top: -33px;
  30. }
  31. #nav ul li:hover ul li:hover ul li {
  32. display: block;
  33. background-color: orange;
  34. }
  35. #nav li ul {
  36. position: absolute;
  37. }
  38. #nav ul li {
  39. float: left;
  40. display: block;
  41. padding: 0;
  42. }
  43. #nav ul li a:hover, #nav ul li.selected {
  44. background-color: #2e5a77;
  45. }
  46. #nav ul li a {
  47. color: #fff;
  48. display: block;
  49. border-right: 1px solid #fff;
  50. font-size: 11px;
  51. font-weight: bold;
  52. text-transform: uppercase;
  53. padding: 10px 20px;
  54. text-decoration: none;
  55. }
  56. #nav ul li.start a {
  57. border-left: none;
  58. }
  59. #nav ul li.end a {
  60. border-right: none;
  61. }
  62. #nav ul li a:hover {
  63. color: #fff;
  64. text-decoration: underline;
  65. }
  66. </style>
  67. </head>
  68. <body>
  69. <div id="nav">
  70.    <ul>
  71.         <li><a href="#"><img src="maison-maison-icone-3710-128.png" width="58" height="58" alt="Maison"/></a></li>
  72.         <li><a href="shop.html"><img src="ecommerce-panier-shoping-webshop-icone-6530-128.png" width="58" height="58" alt="Shop"/></a>
  73.     <ul>
  74.         <li><a href="promotion.html">Promotion amazon</a></li>
  75.         <li><a href="carte-graphique.html">Carte graphique</a></li>
  76.         <li><a href="nas.html">Serveur nas</a></li>
  77.         <li><a href="GEEK.html">geek zone</a></li>
  78.     </ul>
  79.      </li>
  80.         <li><a href="prez.html"><img src="telechargements-dossier-manille-icone-4466-128.png" width="58" height="58" alt="Trousse à outils"/></a></li>
  81.         <li><a href="Tuto/index.html"><img src="livres-agenda-education-bibliotheque-icone-5155-128.png" width="58" height="58" alt="Tutoriels"/></a></li>
  82.         <li><a href="contact.html"><img src="enveloppe-courrier-sobre-icone-4172-128.png" width="58" height="58" alt="Contact"/></a></li>
  83.      
  84. </ul>
  85. </div>
  86. <h1>Test menu</h1>
  87. <p>
  88. Voici une autre unordered list :
  89. <ul>
  90. <li>qui n'est pas</i>
  91. <li>affectée par
  92.   <ul>
  93.   <li>le CSS</li>
  94.   <li>du menu</li>
  95.   </ul>
  96. </li>
  97. </ul>
  98. </body>
  99. </html>

n°2229973
Profil sup​primé
Posté le 04-06-2014 à 17:57:23  answer
 

mon site c'est pas override.fr   mais crash-override.fr
je ne connais pas la personne qui a demander de l'aide sur les menus css
 
j'ai refais le menu j'ai enlever le fond gris, je sais pas se que vous en penser mais se n'est pas trop moche  :)  
 
je ne suis pas arriver a faire comme je voulais, mais voici le code css du menu:

Code :
  1. #navigation ul {
  2. margin:0;
  3. padding:0;
  4. list-style-type:none;
  5. text-align:center;
  6. background-color: rgba(0,0,0,0.20);
  7. }
  8. #navigation li {
  9. float:left;
  10. margin:auto;
  11. padding:0;
  12. }
  13. #navigation li a {
  14. display:block;
  15. width:100px;
  16. color:white;
  17. text-decoration:none;
  18. padding:5px;
  19. }
  20. #navigation li a:hover {
  21. color:#FFD700;
  22. }
  23. #navigation ul li ul {
  24. display:none;
  25. }
  26. #navigation ul li:hover ul {
  27. display:block;
  28. }
  29. #navigation li:hover ul li {
  30. float:none;
  31. }
  32. #navigation li ul {
  33. position:absolute;
  34. }


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

  menu css3 RESOLU

 

Sujets relatifs
Sauvegarde du "Menu démarrer"placer image sur panel depuis menu, plusieurs images, non !!!
barre de menu fixe qui apparait au scroll[CSS / Wordpress] Modification de la barre de menu
faire apparaitre une partie de la page selon choix dans menu[Résolu] Menu déroulant
Menu CSS bouge si changement de résolution d'écran ou zoomAjouter le menu de mon blog WP sur mon forum phpbb3 (rémunération ok)
Menu HTML/CSS[CSS3] Pb de remonté menu animé
Plus de sujets relatifs à : menu css3 RESOLU


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