Le menu à droite fait beuger - Programmation
Ceci répond-il à votre question ? Oui | Non
 

Ajouter une réponse



 Mot :   Pseudo :  
 
Bas de page
Auteur
 Sujet : Le menu à droite fait beuger
 
Profil : IDNaute
Plus d'informations

Bonjour, mon menu à droite fait beuger tout mon code!
 
Voici mon code 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="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.    </head>
  8.    <body>
  9.    
  10.         <div id="en_tete">
  11. <center>
  12. <img src="images/header.gif" />
  13. </center>
  14. </div>
  15. <div id="menu_gauche">
  16.    <div class="element_menu">
  17.        <img src="images/general.jpg" alt="General" />
  18.        <ul>
  19.            <li><a href="index.php">Index</a></li>
  20.            <li><a href="contact.php">Contact</a></li>
  21.            <li><a href="dons.php">Dons</a></li>
  22.                    <li><a href="partenaires">Partenaires</a></li>
  23.        </ul>
  24.    </div>
  25.    <div class="element_menu">
  26.        <img src="images/videos.jpg" alt="Videos" />
  27.            <ul>
  28.            <li><a href="videosautomoto.php">Auto-moto</a></li>
  29.            <li><a href="videosbagarres.php">Bagarres</a></li>
  30.            <li><a href="videosinclassables.php">Inclassables</a></li>
  31.                    <li><a href="videosparodies.php">Parodies</a></li>
  32.            <li><a href="videosperformances.php">Performances</a></li>
  33.            <li><a href="videossport.php">Sport</a></li>
  34.        </ul>
  35.    </div>
  36.  
  37.    <div class="element_menu">
  38.        <img src="images/flash.jpg" alt="Flash" />
  39.            <br />
  40.                 <br />
  41.            <img src="images/animations.jpg" alt="Animations" />
  42.            <ul>
  43.            <li><a href="animsflashcombats.php">Combats</a></li>
  44.            <li><a href="animsflashcourses.php">Courses</a></li>
  45.            <li><a href="animsflashdivers.php">Divers</a></li>
  46.                    <li><a href="animsflashtir.php">Tir</a></li>
  47.        </ul>
  48.  
  49.        <img src="images/jeux.jpg" alt="Jeux" />
  50.            <ul>
  51.            <li><a href="jeuxflashaction.php">Action</a></li>
  52.            <li><a href="jeuxflashcombats.php">Combats</a></li>
  53.            <li><a href="jeuxflashcourses.php">Courses</a></li>
  54.                    <li><a href="jeuxflashdivers.php">Divers</a></li>
  55.            <li><a href="jeuxflashsport.php">Sport</a></li>
  56.            <li><a href="jeuxflashtir.php">Tir</a></li>
  57.        </ul>
  58.    </div>
  59. </div>
  60. <div id="menu_droite">
  61.    <div class="element_menu">
  62.        <img src="images/pubs.jpg" alt="Pubs" />
  63.        <ul>
  64. <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>
  65. <script type="text/javascript">
  66. google_ad_client = "pub-6942935157941398";
  67. google_ad_width = 180;
  68. google_ad_height = 90;
  69. google_ad_format = "180x90_0ads_al";
  70. google_ad_channel = "";
  71. </script>
  72. <script type="text/javascript"
  73.   src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  74. </script>
  75.        </ul>
  76.  
  77.    </div>
  78. <div id="corps">
  79. <!--corps de page-->
  80. </div>
  81. <div id="pied_de_page">
  82. <br>
  83. <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&egrave;re Sur Ce site</a> | <a href="partenaires.php">Partenaires</a>
  84. <center>Design &copy; 2007 pour web-media</center>
  85. <br />
  86. <div align="center"><span class="copyright"><br>TOUS DROITS RESERVES<font color="#ff0000"> web-media</font> &copy; 2007 <font color=#ff0000>http://web-media.exen.fr</font><br></span></div>
  87. <a href="http://www.xiti.com/xiti.asp?s=308426" title="WebAnalytics">
  88. <script type="text/javascript">
  89. <!--
  90. Xt_param = 's=308426&p=';
  91. try {Xt_r = top.document.referrer;}
  92. catch(e) {Xt_r = document.referrer; }
  93. Xt_h = new Date();
  94. Xt_i = '<img width="39" height="25" border="0" alt="" ';
  95. Xt_i += 'src="http://logv16.xiti.com/hit.xiti?'+Xt_param;
  96. Xt_i += '&hl='+Xt_h.getHours()+'x'+Xt_h.getMinutes()+'x'+Xt_h.getSeconds();
  97. if(parseFloat(navigator.appVersion)>=4)
  98. {Xt_s=screen;Xt_i+='&r='+Xt_s.width+'x'+Xt_s.height+'x'+Xt_s.pixelDepth+'x'+Xt_s.colorDepth;}
  99. document.write(Xt_i+'&ref='+Xt_r.replace(/[<>"]/g, '').replace(/&/g, '$')+'" title="Internet Audience">');
  100. //-->
  101. </script>
  102. <noscript>
  103. Mesure d'audience ROI statistique webanalytics par <img width="39" height="25" src="http://logv16.xiti.com/hit.xiti?s=308426&amp;p=" alt="WebAnalytics">
  104. </noscript></a>
  105. <script type="text/javascript"><!--
  106. google_ad_client = "pub-6942935157941398";
  107. google_ad_width = 120;
  108. google_ad_height = 60;
  109. google_ad_format = "120x60_as_rimg";
  110. google_cpa_choice = "CAAQnO3DmwIaCOt0rER_hDgEKMyuuosBMAA";
  111. google_ad_channel = "";
  112. //-->
  113. </script>
  114. <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  115. </script>
  116. </div>
  117.        
  118.        
  119.        
  120.          
  121.    </body>
  122. </html>
  123. <


 
et mon code css:
 

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


 
Merci d'avance


Message édité par flo354 le 16-05-2007 à 19:30:56
Liens

Profil : IDNaute
Plus d'informations

Personne?

kikoolol asv?
Profil : Modérateur
Plus d'informations

attends, je vais chercher ma boule de cristal ...

Le meilleur ? ... C'est moi :)
Profil : IDNaute
Plus d'informations

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


---------------
===>>>La MoRt EsT tOuJoUrS pReSeNtE<<<===
Profil : IDNaute
Plus d'informations

J'y suis presque arrivé la! il me reste plus qu'un dernier petit beug et voilà

Profil : IDNaute
Plus d'informations

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 !

Le meilleur ? ... C'est moi :)
Profil : IDNaute
Plus d'informations

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


---------------
===>>>La MoRt EsT tOuJoUrS pReSeNtE<<<===
qui ne tente rien n'a rien
Profil : IDNaute
Plus d'informations

les deux marche trés bien et sont + ou - adapté a un site

Le meilleur ? ... C'est moi :)
Profil : IDNaute
Plus d'informations

Voila une reflexion intelligente qui met tout le monde d'accord ;) :d


---------------
===>>>La MoRt EsT tOuJoUrS pReSeNtE<<<===
qui ne tente rien n'a rien
Profil : IDNaute
Plus d'informations

non, non je ne suis pas démagogue :lol:

Profil : IDNaute
Plus d'informations

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

Profil : IDNaute
Plus d'informations

http://www.cybercodeur.net/weblog/ [...] thing.html
là vous trouverez pourquoi les tableaux HTML utilisés pour la mise en forme sont mal ! :D Amusez-vous bien


Aller à :
Ajouter une réponse
  FORUM Infos-du-Net » Programmation » Le menu à droite fait beuger
 

Liens