Probléme de float

Probléme de float - HTML/CSS - Programmation

Marsh Posté le 10-07-2010 à 17:21:09    

Bonjour,  
je débute dans la programmation en css et je voudrais créer un site, j'en suis encore à la structure du site. Voici en gros ce que je veux faite :
http://images.imagehotel.net/9a4pecr3lt_tn.jpg
 
Comme vous le voyez je veux faire un menu a gauche et un menu à droite, ensuite le corps du site sera entre ces deux colonnes. Mais je n'y arrive pas, voici le code que j'ai fait, pouvez-vous me dire où je me trompe:  

Code :
  1. <body>
  3.    <div id="en_tete">
  4.    </div>
  6.    <div id="menu1"> 
  7.    </div>
  9.    <div id="menu2">           
  10.    </div>
  11.  
  12.    <div id="corps">     
  13.    </div>
  14.  
  15.    <div id="pied_de_page">         
  16.    </div>
  18. </body>


 
et  
 

Code :
  1. body {
  2.    width: 950px;
  3.    margin: auto;
  4.    matgin-top: 20px;
  5.    margin-bottom: 20px;
  6.    border: 5px solid black;
  7. }
  9. #en_tete
  10. {
  11.    width: 950px;
  12.    height: 200px;
  13.    border: 5px solid black;
  14.  
  15. }
  17. #menu1
  18. {
  19.    border: 5px solid yellow;
  20.    width: 250px;
  21.    height: 500px;
  22.    float: left;
  23.    margin-top:200px;
  24.  
  25. }
  27. #menu2
  28. {
  29.    border: 5px solid yellow;
  30.    width: 250px;
  31.    height: 500px;
  32.    float: right;
  33.    margin-top:200px;
  34. }
  36. #corps
  37. {
  38.    border: 5px solid green;
  39.    margin-left: 250px;
  40.    margin-right: 250px;
  41. }
  45. #pied_de_page
  46. {
  47.    width: 950px;
  48.    height: 200px; 
  49.    border: 5px solid blue;
  50. }

Reply

Marsh Posté le 10-07-2010 à 17:21:09   

Reply

Marsh Posté le 13-07-2010 à 01:56:08    

personne pour mon probléme ????

Reply

Marsh Posté le 13-07-2010 à 09:16:55    

Quel est le pb ? T'as pas une page en ligne pour qu'on puisse voir ça directement ?


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 13-07-2010 à 12:50:49    

Voici ton code modifié...
 
http://cvbintersites.free.fr/images/untitled.JPG
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  8. body {
  9.    width: 950px;
  10.    margin: auto;
  11.    matgin-top: 20px;
  12.    margin-bottom: 20px;
  13. }
  15. #page{
  16. width:950px;
  17. margin-right:auto;
  18. margin-left:auto;
  19. height:auto;
  20. }
  22. #div_zone_texte{
  23. width:950px;
  24. margin-right:auto;
  25. margin-left:auto;
  26. height:auto;
  27. float:left;
  28. margin-top:20px;
  31. }
  33. #en_tete
  34. {
  35.    width: 950px;
  36.     height: 200px;
  37.   border: 5px solid black;
  38.   float:left;
  40. }
  42. #menu1
  43. {
  44.    border: 5px solid yellow;
  45.    width: 250px;
  46.    height: 500px;
  47.    float: left;
  49. }
  51. #menu2{
  52.    border: 5px solid yellow;
  53.     width: 250px;
  54.    height: 500px;
  55.    float: right;
  56. }
  58. #corps{
  59.    border: 5px solid green;
  60.    width:420px;
  61.    height:500px;
  62.    float:left;
  63. }
  65. #pied_de_page
  66. {
  67.    width: 950px;
  68.    height: 50px;
  69.    border: 5px solid blue;
  70.    float:left;
  71. }
  73. </style>
  74. </head>
  76. <body>
  78. <div id="page">
  79. <div id="en_tete">
  80.  xxx
  81.     </div>
  82.  
  83.    <div id="div_zone_texte">
  84.         <div id="menu1">
  85.         zzzzzz
  86.         </div>
  87.        
  88.        
  89.         <div id="corps"> 
  90.         bbb 
  91.         </div> 
  92.          
  93.         <div id="menu2">
  94.         ssss         
  95.         </div>
  96.    
  98.  </div>
  99.    <div id="pied_de_page">
  100.    lllll       
  101.    </div>
  102. </div>
  104. </body>
  105. </html>


 
++

Reply

Sujets relatifs:

Leave a Replay

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