Se connecter / S'enregistrer
Votre question

Le menu à droite fait beuger

Tags :
  • CSS
  • Programmation
Dernière réponse : dans Programmation
16 Mai 2007 19:29:16

Bonjour, mon menu à droite fait beuger tout mon code!

Voici mon code html:

  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="fr" >
  3. <head>
  4. <title>Index</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <link rel="stylesheet" media="screen" type="text/css" title="css" href="css.css" />
  7.  
  8. </head>
  9. <body>
  10.  
  11. <div id="en_tete">
  12.  
  13. <center>
  14. <img src="images/header.gif" />
  15. </center>
  16.  
  17. </div>
  18.  
  19. <div id="menu_gauche">
  20.  
  21. <div class="element_menu">
  22. <img src="images/general.jpg" alt="General" />
  23. <ul>
  24. <li><a href="index.php">Index</a></li>
  25. <li><a href="contact.php">Contact</a></li>
  26. <li><a href="dons.php">Dons</a></li>
  27. <li><a href="partenaires">Partenaires</a></li>
  28. </ul>
  29. </div>
  30.  
  31. <div class="element_menu">
  32. <img src="images/videos.jpg" alt="Videos" />
  33. <ul>
  34. <li><a href="videosautomoto.php">Auto-moto</a></li>
  35. <li><a href="videosbagarres.php">Bagarres</a></li>
  36. <li><a href="videosinclassables.php">Inclassables</a></li>
  37. <li><a href="videosparodies.php">Parodies</a></li>
  38. <li><a href="videosperformances.php">Performances</a></li>
  39. <li><a href="videossport.php">Sport</a></li>
  40. </ul>
  41. </div>
  42.  
  43. <div class="element_menu">
  44. <img src="images/flash.jpg" alt="Flash" />
  45. <br />
  46. <br />
  47. <img src="images/animations.jpg" alt="Animations" />
  48. <ul>
  49. <li><a href="animsflashcombats.php">Combats</a></li>
  50. <li><a href="animsflashcourses.php">Courses</a></li>
  51. <li><a href="animsflashdivers.php">Divers</a></li>
  52. <li><a href="animsflashtir.php">Tir</a></li>
  53. </ul>
  54.  
  55. <img src="images/jeux.jpg" alt="Jeux" />
  56. <ul>
  57. <li><a href="jeuxflashaction.php">Action</a></li>
  58. <li><a href="jeuxflashcombats.php">Combats</a></li>
  59. <li><a href="jeuxflashcourses.php">Courses</a></li>
  60. <li><a href="jeuxflashdivers.php">Divers</a></li>
  61. <li><a href="jeuxflashsport.php">Sport</a></li>
  62. <li><a href="jeuxflashtir.php">Tir</a></li>
  63. </ul>
  64. </div>
  65.  
  66. </div>
  67.  
  68. <div id="menu_droite">
  69.  
  70. <div class="element_menu">
  71. <img src="images/pubs.jpg" alt="Pubs" />
  72. <ul>
  73.  
  74. <table width="120" border="0" cellspacing="0" cellpadding="0"><tr><td align="center"><a href="http://www.lebest.fr/?id=24922" title="videos humoristiques"><img src="http://www.lebest.fr/banniere.php?id=24922&format=120_60" alt="videos humoristiques" width="120" height="60" border="0"></a></td></tr><tr><td align="center"><a href="http://www.lebest.fr" title="videos humoristiques"><span style="font-family: arial; font-size: 10px;">videos humoristiques</span></a></td></tr></table>
  75.  
  76. <script type="text/javascript">
  77. google_ad_client = "pub-6942935157941398";
  78. google_ad_width = 180;
  79. google_ad_height = 90;
  80. google_ad_format = "180x90_0ads_al";
  81. google_ad_channel = "";
  82. </script>
  83.  
  84. <script type="text/javascript"
  85. src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  86. </script>
  87.  
  88. </ul>
  89.  
  90. </div>
  91.  
  92. <div id="corps">
  93.  
  94. <!--corps de page-->
  95.  
  96. </div>
  97.  
  98. <div id="pied_de_page">
  99.  
  100. <br>
  101. <a href="index.php">Index</a> | <a href="contact.php">Contact</a> | <a href="conseillersite.php">Conseiller Ce Site</a> | <a href="liens.php">Liens</a> | <a href="votrebannieresite.php">Votre Bannière Sur Ce site</a> | <a href="partenaires.php">Partenaires</a>
  102.  
  103. <center>Design © 2007 pour web-media</center>
  104. <br />
  105.  
  106. <div align="center"><span class="copyright"><br>TOUS DROITS RESERVES<font color="#ff0000"> web-media</font> © 2007 <font color=#ff0000>http://web-media.exen.fr</font><br></span></div>
  107.  
  108.  
  109.  
  110. <a href="http://www.xiti.com/xiti.asp?s=308426" title="WebAnalytics">
  111. <script type="text/javascript">
  112. <!--
  113. Xt_param = 's=308426&p=';
  114. try {Xt_r = top.document.referrer;}
  115. catch(e) {Xt_r = document.referrer; }
  116. Xt_h = new Date();
  117. Xt_i = '<img width="39" height="25" border="0" alt="" ';
  118. Xt_i += 'src="http://logv16.xiti.com/hit.xiti?'+Xt_param;
  119. Xt_i += '&hl='+Xt_h.getHours()+'x'+Xt_h.getMinutes()+'x'+Xt_h.getSeconds();
  120. if(parseFloat(navigator.appVersion)>=4)
  121. {Xt_s=screen;Xt_i+='&r='+Xt_s.width+'x'+Xt_s.height+'x'+Xt_s.pixelDepth+'x'+Xt_s.colorDepth;}
  122. document.write(Xt_i+'&ref='+Xt_r.replace(/[<>"]/g, '').replace(/&/g, '$')+'" title="Internet Audience">');
  123. //-->
  124. </script>
  125. <noscript>
  126. Mesure d'audience ROI statistique webanalytics par <img width="39" height="25" src="http://logv16.xiti.com/hit.xiti?s=308426&p=" alt="WebAnalytics">
  127. </noscript></a>
  128.  
  129.  
  130.  
  131.  
  132.  
  133. <script type="text/javascript"><!--
  134. google_ad_client = "pub-6942935157941398";
  135. google_ad_width = 120;
  136. google_ad_height = 60;
  137. google_ad_format = "120x60_as_rimg";
  138. google_cpa_choice = "CAAQnO3DmwIaCOt0rER_hDgEKMyuuosBMAA";
  139. google_ad_channel = "";
  140. //-->
  141. </script>
  142. <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  143. </script>
  144.  
  145. </div>
  146.  
  147.  
  148.  
  149.  
  150. </body>
  151. </html>
  152.  
  153. <


et mon code css:

  1. body
  2. {
  3. padding: 10px;
  4. margin: auto;
  5. margin-top: 20px;
  6. margin-bottom: 20px;
  7. background-color: #00CCFF;
  8. }
  9.  
  10. /* Le menu */
  11.  
  12. #menu_gauche
  13. {
  14. float: left; /* Le menu flottera à gauche */
  15. width: 130px; /* Très important : donner une taille au menu */
  16. }
  17.  
  18.  
  19. #menu_droite
  20. {
  21. float: right; /* Le menu flottera à droite */
  22. width: 130px; /* donner une taille au menu */
  23. }
  24.  
  25.  
  26. .element_menu
  27. {
  28. background-color: #FFFFFF;
  29. background-repeat: repeat-x;
  30. border: 2px solid black;
  31. margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
  32. }
  33.  
  34. .element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
  35. {
  36. padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
  37. padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
  38. margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
  39. margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
  40. }
  41.  
  42. .element_menu a /* Tous les liens se trouvant dans un menu */
  43. {
  44. color: #00CCFF;
  45. }
  46.  
  47. .element_menu a:hover /* Quand on pointe sur un lien du menu */
  48. {
  49. color: #000000 ;
  50. }
  51.  
  52. #corps
  53. {
  54. margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
  55. margin-right: 140px;
  56. margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
  57. padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
  58.  
  59. color: #000000;
  60. background-color: #FFFFFF; /* Une couleur de fond pour le corps */
  61.  
  62. border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
  63. }
  64.  
  65. #pied_de_page
  66. {
  67. margin-left: 10% /* Et oui les pourcentages ça sert partout.*/
  68. width: 80%; /* Réduction de la largeur du footer.*/
  69. padding: 5px;
  70. text-align: center;
  71. color: #000000;
  72. background-color: #FFFFFF;
  73. border: 2px solid black;
  74. }


Merci d'avance

Autres pages sur : menu droite fait beuger

16 Mai 2007 22:48:03

Personne?
16 Mai 2007 23:09:36

attends, je vais chercher ma boule de cristal ...
Contenus similaires
17 Mai 2007 01:22:44

Bonjour,
je te conseille d'utiliser des tableaux pour la mise en forme de ton site qui est peut etre plus compliquer au debut mais qui donne un resultat bien meilleur a l'arrive je pense ;) 

Sinon pour ton menu la je voit pas ce que tu entend par "fait beuger tout mon code!", si tu pouvais etre plus precis ca serait interssant ;) 

@+
bon courage
17 Mai 2007 09:43:43

J'y suis presque arrivé la! il me reste plus qu'un dernier petit beug et voilà
17 Mai 2007 13:10:39

Citation :
je te conseille d'utiliser des tableaux pour la mise en forme de ton site qui est peut etre plus compliquer au debut mais qui donne un resultat bien meilleur a l'arrive je pense ;) 


Conseiller de malheurs !! Ne l'encourage pas à utiliser les tableaux. Pour le design ce sont les Div qui sont faites pour ça. Bien trop d'amateuir prenne l'habitude d'utiliser des tableux et ne peuvent plus s'en défaire. L'utilisation des div permette une adaptation à plusieurs CSS (notamment pour les mal voyant); Ainsi, avec des div vous pouvez faire deux sites ayant le même contenu mais pas du tout le même design en changeant juste la feuille CSS.

C'est porquoi flo354 je t'incite à laisser ton code en div, le travail est plus fastidieux mais face à des pros ça payera crois moi !
17 Mai 2007 21:18:08

Alor on peut egalement changer le design entierement san toucher au tableau, juste en changeant le css . . . .
Donc avant de critiquer on se renseigne ;) 
@+
17 Mai 2007 23:54:27

les deux marche trés bien et sont + ou - adapté a un site
18 Mai 2007 01:58:18

Voila une reflexion intelligente qui met tout le monde d'accord ;)  :D 
18 Mai 2007 09:57:22

non, non je ne suis pas démagogue :lol: 
18 Mai 2007 17:44:02

Je détest les tableaux, j'avais fait un design avec et j'en était dégouté sa faisait tout beuger.
au fait je suis arrivé a corriger les beugs voici mon site:

http://web-media.exen.fr
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS