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>
  2.    <div id="en_tete">
  3.    </div>
  4.    <div id="menu1"> 
  5.    </div>
  6.    <div id="menu2">           
  7.    </div>
  8.  
  9.    <div id="corps">     
  10.    </div>
  11.  
  12.    <div id="pied_de_page">         
  13.    </div>
  14. </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. }
  8. #en_tete
  9. {
  10.    width: 950px;
  11.    height: 200px;
  12.    border: 5px solid black;
  13.  
  14. }
  15. #menu1
  16. {
  17.    border: 5px solid yellow;
  18.    width: 250px;
  19.    height: 500px;
  20.    float: left;
  21.    margin-top:200px;
  22.  
  23. }
  24. #menu2
  25. {
  26.    border: 5px solid yellow;
  27.    width: 250px;
  28.    height: 500px;
  29.    float: right;
  30.    margin-top:200px;
  31. }
  32. #corps
  33. {
  34.    border: 5px solid green;
  35.    margin-left: 250px;
  36.    margin-right: 250px;
  37. }
  38. #pied_de_page
  39. {
  40.    width: 950px;
  41.    height: 200px; 
  42.    border: 5px solid blue;
  43. }

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">
  7. body {
  8.    width: 950px;
  9.    margin: auto;
  10.    matgin-top: 20px;
  11.    margin-bottom: 20px;
  12. }
  13. #page{
  14. width:950px;
  15. margin-right:auto;
  16. margin-left:auto;
  17. height:auto;
  18. }
  19. #div_zone_texte{
  20. width:950px;
  21. margin-right:auto;
  22. margin-left:auto;
  23. height:auto;
  24. float:left;
  25. margin-top:20px;
  26. }
  27. #en_tete
  28. {
  29.    width: 950px;
  30.     height: 200px;
  31.   border: 5px solid black;
  32.   float:left;
  33. }
  34. #menu1
  35. {
  36.    border: 5px solid yellow;
  37.    width: 250px;
  38.    height: 500px;
  39.    float: left;
  40. }
  41. #menu2{
  42.    border: 5px solid yellow;
  43.     width: 250px;
  44.    height: 500px;
  45.    float: right;
  46. }
  47. #corps{
  48.    border: 5px solid green;
  49.    width:420px;
  50.    height:500px;
  51.    float:left;
  52. }
  53. #pied_de_page
  54. {
  55.    width: 950px;
  56.    height: 50px;
  57.    border: 5px solid blue;
  58.    float:left;
  59. }
  60. </style>
  61. </head>
  62. <body>
  63. <div id="page">
  64. <div id="en_tete">
  65.  xxx
  66.     </div>
  67.  
  68.    <div id="div_zone_texte">
  69.         <div id="menu1">
  70.         zzzzzz
  71.         </div>
  72.        
  73.        
  74.         <div id="corps"> 
  75.         bbb 
  76.         </div> 
  77.          
  78.         <div id="menu2">
  79.         ssss         
  80.         </div>
  81.    
  82.  </div>
  83.    <div id="pied_de_page">
  84.    lllll       
  85.    </div>
  86. </div>
  87. </body>
  88. </html>


 
++

Reply

Sujets relatifs:

Leave a Replay

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