Tom's Guide > Forum > Programmation > Problème de menu en html...

Problème de menu en html...

Forum Programmation : Problème de menu en html...

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Créer un nouveau sujet Répondre
Mot :    Pseudo :           
 
jacka   27-05-2007 à 23:23:09

Salut a tous le monde
Je reprend la programmation de site aujourd'hui et j'ai un problème assez simple a régler je pense.
En faîte j'ai un menu a gauche et corps de page. Jusque la tout aller bien mais j'ai voulu rajouter un menu a droite comme celui de gauche et je n'est pas réussit, se qui se passe c'est que mon menu de droite a mis le corps de page en dessous du menu de droite alors qu'il devrait être a la même hauteur entre le menu de droit et de gauche. Voila merci de m'aider, voici le code css :





Code :
  1. body
  2. {
  3.   width: 760px;
  4.   margin: auto; /* Pour centrer la page */
  5.   margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
  6.   margin-bottom: 20px;    /* Idem pour le bas du navigateur */
  7.   background-image: url("images/contenu.png" );
  8.   background-repeat: no-repeat;
  9. }
  11. /* L'en-tête */
  13. #en_tete
  14. {
  15.   width: 1000px;
  16.   height: 160px;
  17.   background-image: url("images/header.jpg" );
  18.   background-repeat: no-repeat;
  19.   margin-bottom: 10px;
  20. }
  23. /* Le menu */
  25. #menu2
  26. {
  27.   float: right; /* Le menu flottera à droite */
  28.   width: 120px; /* Très important : donner une taille au menu */
  29. }
  31. .element_menu2
  32. {
  33.   background-image: url("images/menucon.jpg" );
  34.   background-repeat: repeat-x;
  35.  
  36.   border: 2px solid black;
  37.  
  38.   margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
  39. }
  42. /* Quelques effets sur les menus */
  45. .element_menu2 h3 /* Tous les titres de menus */
  46. {   
  47.   color:  #FFCC00;
  48.   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
  49.   text-align: center;
  50. }
  52. .element_menu2 ul /* Toutes les listes à puces se trouvant dans un menu */
  53. {
  54.   list-style-image: url("images/puces.gif" ); /* On change l'apparence des puces */
  55.   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
  56.   padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
  57.   margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
  58.   margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
  59. }
  61. .element_menu2 a /* Tous les liens se trouvant dans un menu */
  62. {
  63.   color:  #FFCC00;
  64. }
  66. .element_menu2 a:hover /* Quand on pointe sur un lien du menu */
  67. {
  68.   background-color: #FFCC00;
  69.   color: black;
  70. }
  74. #menu
  75. {
  76.   float: left; /* Le menu flottera à gauche */
  77.   width: 120px; /* Très important : donner une taille au menu */
  78. }
  80. }
  82. .element_menu
  83. {
  84.   background-image: url("images/menucon.jpg" );
  85.   background-repeat: repeat-x;
  86.  
  87.   border: 2px solid black;
  88.  
  89.   margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
  90. }
  93. /* Quelques effets sur les menus */
  96. .element_menu h3 /* Tous les titres de menus */
  97. {   
  98.   color:  #FFCC00;
  99.   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
  100.   text-align: center;
  101. }
  103. .element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
  104. {
  105.   list-style-image: url("images/puces.gif" ); /* On change l'apparence des puces */
  106.   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
  107.   padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
  108.   margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
  109.   margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
  110. }
  112. .element_menu a /* Tous les liens se trouvant dans un menu */
  113. {
  114.   color:  #FFCC00;
  115. }
  117. .element_menu a:hover /* Quand on pointe sur un lien du menu */
  118. {
  119.   background-color: #FFCC00;
  120.   color: black;
  121. }
  124. /* Le corps de la page */
  126. #corps
  127. {
  128.   margin-left: 0px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
  129.   margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
  130.   margin-top:-50px;
  131.   padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
  132.   color: #FFCC00;
  133.   background-image: url("images/header2.jpg" );
  134.   background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
  135.  
  136.   border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
  137. }
  140. #corps h1 /* Tous les titres h1 du corps */
  141. {
  142.   color: #FFCC00;
  143.   text-align: center;
  144.   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
  145. }
  147. #corps h2 /* Tous les titres h2 du corps */
  148. {
  149.   height: 30px;
  151.   background-image: url("images/puces.gif" ); /* Une petite image de fond sur les titres h2 */
  152.   background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
  153.  
  154.   padding-left: 30px;
  155.   color: #FFCC00;
  156.   text-align: left;
  157. }
  160. /* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */
  162. #pied_de_page
  163. {
  164.   padding: 5px;
  165.   margin-top: 200px;
  166.   text-align: center;
  168.   color: #FFCC00;
  169.   background-image: url("images/header2.jpg" );
  170.   background-repeat: repeat-x;
  171.  
  172.   border: 2px solid black;
  173. }







voila merci de m'aider.

------------------------------ Allez ici tous les jours et a 1000 clicks vous montrez au paradis.

http://www.bankaeuro.com/jacka.html
Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
jacka   28-05-2007 à 00:06:26
- 0 +

aider moi svp

------------------------------ Allez ici tous les jours et a 1000 clicks vous montrez au paradis.

http://www.bankaeuro.com/jacka.html
 Répondre à jacka
r0wien   28-05-2007 à 00:09:00
- 0 +

As-tu essayé de définir un float à #corps ?

Si dans ton html le #corps et après le menu gauche, met lui un float:left

redis-moi

------------------------------ Mon blog : http://blog.rownage.ch
Actualités Wii et programmation et d'autres de mes découvertes !
 Répondre à r0wien
jacka   28-05-2007 à 10:30:53
- 0 +

alors enf aîte la j'ai passez le pied de page au dessus de menu de gauche ainsi que le corps de page et sa amrche bien. J'ia mis aussi une taille au pied de page. Le seul problème c'est que lorsque le pied de page se positione en dessous du menu de gauche et du corp de page tous va bien mais lorsque je l'agrandit ( le peid de page ) et bien il devrait se mettre aussi en dessous du menu de droite mais maleuresement c'est le menu de droite qui par en dessous du pied de page. Voici le code CSS et ensuite HTML :


CSS


Code :
  1. body
  2. {
  3.   width: 760px;
  4.   margin: auto; /* Pour centrer la page */
  5.   margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
  6.   margin-bottom: 20px;    /* Idem pour le bas du navigateur */
  7.   background-image: url("images/contenu.png" );
  8.   background-repeat: no-repeat;
  9. }
  11. /* L'en-tête */
  13. #en_tete
  14. {
  15.   width: 1000px;
  16.   height: 160px;
  17.   background-image: url("images/header.jpg" );
  18.   background-repeat: no-repeat;
  19.   margin-bottom: 10px;
  20. }
  23. /* Le menu */
  25. #menu2
  26. {
  27.   float: right; /* Le menu flottera à droite */
  28.   width: 120px; /* Très important : donner une taille au menu */
  29.   position: fixed, absolute;
  30. }
  32. .element_menu2
  33. {
  34.   background-image: url("images/menucon.jpg" );
  35.   background-repeat: repeat-x;
  36.  
  37.   border: 2px solid black;
  38.  
  39.   margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
  40. }
  43. /* Quelques effets sur les menus */
  46. .element_menu2 h3 /* Tous les titres de menus */
  47. {   
  48.   color:  #FFCC00;
  49.   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
  50.   text-align: center;
  51. }
  53. .element_menu2 ul /* Toutes les listes à puces se trouvant dans un menu */
  54. {
  55.   list-style-image: url("images/puces.gif" ); /* On change l'apparence des puces */
  56.   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
  57.   padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
  58.   margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
  59.   margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
  60. }
  62. .element_menu2 a /* Tous les liens se trouvant dans un menu */
  63. {
  64.   color:  #FFCC00;
  65. }
  67. .element_menu2 a:hover /* Quand on pointe sur un lien du menu */
  68. {
  69.   background-color: #FFCC00;
  70.   color: black;
  71. }
  73. /* Le corps de la page */
  75. #corps
  76. {
  77.   margin-top: -320px;
  78.   width: 450px;
  79.   margin-left: 150px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
  80.   margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
  81.   padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
  82.   color: #FFCC00;
  83.   background-image: url("images/header2.jpg" );
  84.   background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
  85.  
  86.   border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
  87. }
  90. #corps h1 /* Tous les titres h1 du corps */
  91. {
  92.   color: #FFCC00;
  93.   text-align: center;
  94.   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
  95. }
  97. #corps h2 /* Tous les titres h2 du corps */
  98. {
  99.   height: 30px;
  101.   background-image: url("images/puces.gif" ); /* Une petite image de fond sur les titres h2 */
  102.   background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
  103.  
  104.   padding-left: 30px;
  105.   color: #FFCC00;
  106.   text-align: left;
  107. }
  109. #menu
  110. {
  111.   float: left; /* Le menu flottera à gauche */
  112.   width: 120px; /* Très important : donner une taille au menu */
  113. }
  115. }
  117. .element_menu
  118. {
  119.   background-image: url("images/menucon.jpg" );
  120.   background-repeat: repeat-x;
  121.  
  122.   border: 2px solid black;
  123.  
  124.   margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
  125. }
  128. /* Quelques effets sur les menus */
  131. .element_menu h3 /* Tous les titres de menus */
  132. {   
  133.   color:  #FFCC00;
  134.   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
  135.   text-align: center;
  136. }
  138. .element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
  139. {
  140.   list-style-image: url("images/puces.gif" ); /* On change l'apparence des puces */
  141.   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
  142.   padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
  143.   margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
  144.   margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
  145. }
  147. .element_menu a /* Tous les liens se trouvant dans un menu */
  148. {
  149.   color:  #FFCC00;
  150. }
  152. .element_menu a:hover /* Quand on pointe sur un lien du menu */
  153. {
  154.   background-color: #FFCC00;
  155.   color: black;
  156. }
  159. /* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */
  161. #pied_de_page
  162. {
  163.   padding: 5px;
  164.   width: 600px;
  165.   margin-top: 150px;
  166.   text-align: center;
  167.   color: #FFCC00;
  168.   background-image: url("images/header2.jpg" );
  169.   background-repeat: repeat-x;
  170.  
  171.   border: 2px solid black;
  172. }




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>World Of Game</title>
  5.                 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.                 <link rel="stylesheet" media="screen" type="text/css" title="Design" href="themepardefaut.css" />
  7.         </head>
  8.         <body>
  12.                 <div id="en_tete">
  14.                 </div>
  17.                 <div id="menu">
  18.                   <div class="element_menu">
  19.                     <h3> Le site </h3>
  20.                   <ul>
  21.                     <li><a href="Index.html">Accueil</a></li>
  22.                     <li><a href="News.html">News</a></li>
  23.                     <li><a href="Touslesjeux.html">Tous les jeux</a></li>
  24.                   </ul>
  26.                   </div>
  28.                   <div class="element_menu">
  29.                   <h3>Rpg maker</h3>
  30.                   <ul>
  31.                     <li><a href="Rpgmaker?.html">Rpg Maker ?</a></li>
  32.                     <li><a href="Tutoriaux.html">Tutoriaux</a></li>
  33.                     <li><a href="Scripts.html">Scripts</a></li>
  34.                     <li><a href="Ressources.html">Ressources</a></li>
  35.                   </ul>
  36.                  
  37.                   </div>
  39.                  
  40.                  
  41.         <div id="corps">
  42.                   <h3> Bienvenue sur WOG ! </h3>
  43.                   <p>
  44.                  Bienvenue a tous sur WOG ( World Of Game ) qui est un site pour tous les fans de création de jeux vidéo ou
  45.                  de programmation en tous genre. Notre équipe vous souhaite une agréable visite. 
  46.                   </p>
  47.                   <h3> WOG, c'est quoi ? </h3>
  48.                   <p>
  49.                   Qu'est-ce que world-of-game ? <br/>
  50.                   World-of-game est un site ou vous pourrez apprendre (à travers des tutoriaux) à réaliser des sites
  51.                   web, jeux vidéo 2D, animation 3D, programmes en tous genre grâce a des languages dont vous
  52.                   trouverez les cours ici.
  53.                   Vous disposerez aussi d'un forum auquel vous pourrez vous inscrire et d'une panoplie de jeu
  54.                   ( aussi bien 2D, 3D ou flash ... ) que vous pourrez télécharger
  55.                   </p>
  56.                 </div>         
  57.                  
  59.                 <div id="pied_de_page">
  60.                   <p>
  61.                   Copyright © WOG 2007 
  62.                   </p>
  63.                 </div>
  64.                 </div>
  67.                 <div id="menu2">
  68.                   <div class="element_menu2">
  69.                   <h3>Inscription</h3>
  70.                   <ul>
  71.                     <li><a href="Conditions.php">Conditions</a></li>
  72.                     <li><a href="Tutoriaux.php">Tutoriaux</a></li>
  73.                     <li><a href="Scripts.php">Scripts</a></li>
  74.                     <li><a href="Ressources.php">Ressources</a></li>
  75.                   </ul>
  76.                 </div>
  81.                
  83.            
  85.         </body>
  86. </html>

------------------------------ Allez ici tous les jours et a 1000 clicks vous montrez au paradis.

http://www.bankaeuro.com/jacka.html
 Répondre à jacka
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > Problème de menu en html...
Aller à :

Il y a 1146 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 0,440 secondes
Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens