Problème avec un menu CSS

Problème avec un menu CSS - HTML/CSS - Programmation

Marsh Posté le 20-06-2010 à 18:44:23    

Bonjour,
 
Voilà, j'ai un code d'un menu pas mal en CSS.
Le soucis, je n'arrive pas a le centrer sur mon site. Il reste toujours à gauche.
Comment faire ?
 
J'aimerai aussi que le dernier sous-menu, ne dépasse pas de mon site qui faits 1000px.
 
Je ne sais pas quoi changer pour que cela fonctionne ?
 
Merci d'avance
 
 :hello:  
 
voici le CSS:

Code :
  1. .menu{
  2. border:none;
  3. border:0px;
  4. width:1000px;
  5. margin:0px;
  6. padding:0px;
  7. position:middle;
  8. font-family:verdana,geneva,arial,helvetica,sans-serif;
  9. font-size:12px;
  10. font-weight:bold;
  11. color:8e8e8e;
  12. }
  13. .menu ul{
  14. background:url(images/menu-bg.gif) top left repeat-x;
  15. height:43px;
  16. list-style:none;
  17. margin:0;
  18. padding:0;
  19. }
  20. .menu li{
  21.  float:left;
  22.  padding:0px 8px 0px 8px;
  23.  }
  24. .menu li a{
  25.  color:#666666;
  26.  display:block;
  27.  font-weight:bold;
  28.  line-height:43px;
  29.  padding:0px 25px;
  30.  text-align:center;
  31.  text-decoration:none;
  32.  }
  33.  .menu li a:hover{
  34.   color:#000000;
  35.   text-decoration:none;
  36.   }
  37. .menu li ul{
  38.  background:#e0e0e0;
  39.  border-left:5px solid #0079b2;
  40.  border-right:5px solid #0079b2;
  41.  border-bottom:5px solid #0079b2;
  42.  display:none;
  43.  height:auto;
  44.  filter:alpha(opacity=95);
  45.  opacity:0.95;
  46.  position:absolute;
  47.  width:225px;
  48.  z-index:200;
  49.  /*top:1em;
  50.  /*left:0;*/
  51.  }
  52. .menu li:hover ul{
  53.  display:block;
  54.  }
  55. .menu li li {
  56.  display:block;
  57.  float:none;
  58.  padding:0px;
  59.  width:225px;
  60.  }
  61. .menu li ul a{
  62.  display:block;
  63.  font-size:12px;
  64.  font-style:normal;
  65.  padding:0px 10px 0px 15px;
  66.  text-align:left;
  67.  }
  68.  .menu li ul a:hover{
  69.   background:#949494;
  70.   color:#000000;
  71.   opacity:1.0;
  72.   filter:alpha(opacity=100);
  73.   }
  74. .menu p{
  75.  clear:left;
  76.  }  
  77. .menu #current{
  78.  background:url(images/current-bg.gif) top left repeat-x;
  79.  color:#ffffff;
  80.  }

 
 
Voici le HTML :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <style media="all" type="text/css">@import "menu/menu_style.css";</style>
  4. <div class="menu">
  5. <ul>
  6. <li><a id="current" href="www.montsite.com" target="_self" >Accueil</a>
  7. </li>
  8. <li><a href="" target="_self" >Voyager</a>
  9. <ul>
  10. <li><a href="presentation.php" target="_self">Présentation</a></li>
  11. <li><a href="ou.php" target="_self">Où ?</a></li>
  12. <li><a href="quand.php" target="_self">Quand ?</a></li>
  13. <li><a href="conseils.php" target="_self">Conseils</a></li>
  14. <li><a href="reguliers.php" target="_self">Réguliers</a></li>
  15. <li><a href="particuliers.php" target="_self">Particuliers</a></li>
  16. <li><a href="mesure.php" target="_self">Mesure</a></li>
  17. </ul>
  18. </li>
  19. <li><a href="" target="_self" >Animer</a>
  20. </li>
  21. <li><a href="" target="_self" >Communiquer</a>
  22. </li>
  23. <li><a href="" target="_self" >Etudier</a>
  24. </li>
  25. <li><a href="" target="_self" >Rêver</a>
  26. <ul>
  27. <li><a href="renard.php" target="_self">Jules Renard</a></li>
  28. <li><a href="photos.php" target="_self">Galerie Photos</a></li>
  29. </ul>
  30. </li>
  31. <li><a href="" target="_self" >Télécharger</a>
  32. <ul>
  33. <li><a href="brochures.php" target="_self">Brochures</a></li>
  34. </ul>
  35. </li>
  36. <li><a href="" target="_self" >Jouer</a>
  37. <ul>
  38. <li><a href="memory.php" target="_self">Memory</a></li>
  39. <li><a href="voiture.php" target="_self">Voiture</a></li>
  40. <li><a href="cache.php" target="_self">Mots Cachés</a></li>
  41. <li><a href="pendu.php" target="_self">Pendu</a></li>
  42. <li><a href="pouspous" target="_self">Pouspous</a></li>
  43. </ul>
  44. </li>
  45. </ul>
  46. </div>
  47. </body>
  48. </html>


 
 


---------------
L'amour c'est comme le jardinage : Cà commence par une pelle, et çà se termine par une graine.
Reply

Marsh Posté le 20-06-2010 à 18:44:23   

Reply

Marsh Posté le 21-06-2010 à 07:59:31    

Tu as pas le lien de ton site pour qu'on puisse voir en réel ce que ca donne ?

Reply

Sujets relatifs:

Leave a Replay

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