menu css3 RESOLU

menu css3 RESOLU - HTML/CSS - Programmation

Marsh Posté le 04-06-2014 à 16:01:52    

: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
Reply

Marsh Posté le 04-06-2014 à 16:01:52   

Reply

Marsh Posté le 04-06-2014 à 17:25:55    

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>

Reply

Marsh Posté le 04-06-2014 à 17:39:14    

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>
  69. <body>
  70. <div id="nav">
  71.    <ul>
  72.         <li><a href="#"><img src="maison-maison-icone-3710-128.png" width="58" height="58" alt="Maison"/></a></li>
  73.         <li><a href="shop.html"><img src="ecommerce-panier-shoping-webshop-icone-6530-128.png" width="58" height="58" alt="Shop"/></a>
  74.     <ul>
  75.         <li><a href="promotion.html">Promotion amazon</a></li>
  76.         <li><a href="carte-graphique.html">Carte graphique</a></li>
  77.         <li><a href="nas.html">Serveur nas</a></li>
  78.         <li><a href="GEEK.html">geek zone</a></li>
  79.     </ul>
  80.      </li>
  81.         <li><a href="prez.html"><img src="telechargements-dossier-manille-icone-4466-128.png" width="58" height="58" alt="Trousse à outils"/></a></li>
  82.         <li><a href="Tuto/index.html"><img src="livres-agenda-education-bibliotheque-icone-5155-128.png" width="58" height="58" alt="Tutoriels"/></a></li>
  83.         <li><a href="contact.html"><img src="enveloppe-courrier-sobre-icone-4172-128.png" width="58" height="58" alt="Contact"/></a></li>
  84.      
  85. </ul>
  86. </div>
  88. <h1>Test menu</h1>
  89. <p>
  90. Voici une autre unordered list :
  91. <ul>
  92. <li>qui n'est pas</i>
  93. <li>affectée par
  94.   <ul>
  95.   <li>le CSS</li>
  96.   <li>du menu</li>
  97.   </ul>
  98. </li>
  99. </ul>
  101. </body>
  102. </html>

Reply

Marsh Posté le 04-06-2014 à 17:57:23    

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

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed