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

Ajouter une réponse



 Mot :   Pseudo :  
 
Bas de page
Auteur
 Sujet : Le menu à droite fait beuger
 
flo354
Profil : IDNaute
Plus d'informations
n°102145
16-05-2007 à 19:29:16

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" />
  8.    </head>
  9.    <body>
  10.    
  11.         <div id="en_tete">
  13. <center>
  14. <img src="images/header.gif" />
  15. </center>
  17. </div>
  19. <div id="menu_gauche">
  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>
  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>
  66. </div>
  68. <div id="menu_droite">
  70.    <div class="element_menu">
  71.        <img src="images/pubs.jpg" alt="Pubs" />
  72.        <ul>
  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>
  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>
  84. <script type="text/javascript"
  85.   src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  86. </script>
  88.        </ul>
  89.  
  90.    </div>
  92. <div id="corps">
  94. <!--corps de page-->
  96. </div>
  98. <div id="pied_de_page">
  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&egrave;re Sur Ce site</a> | <a href="partenaires.php">Partenaires</a>
  103. <center>Design &copy; 2007 pour web-media</center>
  104. <br />
  106. <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>
  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&amp;p=" alt="WebAnalytics">
  127. </noscript></a>
  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>
  145. </div>
  146.        
  147.        
  148.        
  149.          
  150.    </body>
  151. </html>
  153. <


 
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. }
  10. /* Le menu */
  12. #menu_gauche
  13. {
  14.    float: left; /* Le menu flottera à gauche */
  15.    width: 130px; /* Très important : donner une taille au menu */
  16. }
  19. #menu_droite
  20. {
  21.    float: right; /* Le menu flottera à droite */
  22.    width: 130px; /* donner une taille au menu */
  23. }
  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. }
  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. }
  42. .element_menu a /* Tous les liens se trouvant dans un menu */
  43. {
  44.    color: #00CCFF;
  45. }
  47. .element_menu a:hover /* Quand on pointe sur un lien du menu */
  48. {
  49.    color: #000000 ;
  50. }
  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. }
  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


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

flo354
Profil : IDNaute
Plus d'informations
n°102151
16-05-2007 à 22:48:03

Personne?

okinou
kikoolol asv?
Profil : Modérateur
Plus d'informations
n°102153
16-05-2007 à 23:09:36

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

DivX_666
Le meilleur ? ... C'est moi :)
Profil : IDNaute
Plus d'informations
n°102159
17-05-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


---------------
===>>>La MoRt EsT tOuJoUrS pReSeNtE<<<===
flo354
Profil : IDNaute
Plus d'informations
n°102170
17-05-2007 à 09:43:43

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

phplayer
Profil : IDNaute
Plus d'informations
n°102180
17-05-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 !

DivX_666
Le meilleur ? ... C'est moi :)
Profil : IDNaute
Plus d'informations
n°102204
17-05-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 ;)
@+


---------------
===>>>La MoRt EsT tOuJoUrS pReSeNtE<<<===
proairgun
qui ne tente rien n'a rien
Profil : IDNaute
Plus d'informations
n°102218
17-05-2007 à 23:54:27

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

DivX_666
Le meilleur ? ... C'est moi :)
Profil : IDNaute
Plus d'informations
n°102225
18-05-2007 à 01:58:18

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


---------------
===>>>La MoRt EsT tOuJoUrS pReSeNtE<<<===
proairgun
qui ne tente rien n'a rien
Profil : IDNaute
Plus d'informations
n°102230
18-05-2007 à 09:57:22

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

flo354
Profil : IDNaute
Plus d'informations
n°102255
18-05-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

AjJi@IDN
Profil : IDNaute
Plus d'informations
n°102276
19-05-2007 à 02:35:22

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
 

Plan du forum
Forum MesDiscussions.Net, Version 2007.1.2
© 2000-2007 No1Dev
Page générée en 0.356 secondes
Liens
Produits relatifs