Probleme pour faire 3 colonne en css

Probleme pour faire 3 colonne en css - HTML/CSS - Programmation

Marsh Posté le 26-01-2006 à 11:54:24    

Bonjour à tous.
 
Je veut faire une page en css mais j'ai un peu de mal.
 
J'ai actuellement une page avec
 
un menu à gauche
le corps de la page  
et un menu à droite
 
Je souhaiterais pouvoir maintenant avoir à la place d'un seul bloc qui correspond au corps, avoir 3 colonnes.
 
Pour cela j'essays de faire mais 3 colonne, mais j'y arrive pas, et en plus je le veut extensible
 
j'ai fait ca, mais ca fonctionne pas.
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <!-- saved from url=(0053)http://test.roane-irkana.net/2_cols_fluide_2_cols.htm -->
  3. <HTML><HEAD><TITLE>Untitled</TITLE>
  4. <META http-equiv=Content-Type content="text/html; charset=windows-1252">
  5. <STYLE type=text/css>
  7. #conteneur {
  8.         CLEAR: both; MARGIN-TOP: 10px; MARGIN-BOTTOM: 10px
  9. }
  10. #colonne1{
  11.         BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FLOAT: left; MARGIN-BOTTOM: 10px; BORDER-LEFT: #000000 1px solid; WIDTH: 150px; BORDER-BOTTOM: #000000 1px solid
  12. }
  14. #colonne3 {
  15.         BORDER-RIGHT: #000000 1px solid; PADDING-RIGHT: 1%; BORDER-TOP: #000000 1px solid; PADDING-LEFT: 1%; FLOAT: left; MARGIN-BOTTOM: 10px; PADDING-BOTTOM: 1%; MARGIN-LEFT: 1%; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; PADDING-TOP: 1%; BORDER-BOTTOM: #000000 1px solid
  16. }
  17. #colonne4 {
  18.         BORDER-RIGHT: #000000 1px solid; PADDING-RIGHT: 1%; BORDER-TOP: #000000 1px solid; PADDING-LEFT: 1%; FLOAT: right; MARGIN-BOTTOM: 10px; PADDING-BOTTOM: 1%; MARGIN-LEFT: 1%; BORDER-LEFT: #000000 1px solid; WIDTH: 50%; PADDING-TOP: 1%; BORDER-BOTTOM: #000000 1px solid
  19. }
  21. </STYLE>
  23. <META content="MSHTML 6.00.2900.2802" name=GENERATOR></HEAD>
  24. <BODY>
  27. <DIV id=conteneur>
  28. <DIV id=colonne1>B-1-1<br>
  29.     1<br>
  30.     1<br>
  31.     1<br>
  32.     1<br>
  33.   </DIV>
  36.   <DIV id=colonne4>
  37.     <P>Contenu colonne 2</P>
  38.     <P>Contenu colonne 2</P>
  39.     <P>Contenu colonne 2</P>
  40.     <P>Contenu colonne 2</P>
  41.   </DIV>
  42.   <DIV id=colonne3>
  43. <P>Contenu colonne 2</P>
  44. <P>Contenu colonne 2</P>
  45. <P>Contenu colonne 2</P>
  46. <P>Contenu colonne 2</P></DIV></DIV>
  47. </DIV></BODY></HTML>


---------------
Toute l'actualité météo en continu http://www.meteo-world.com
Reply

Marsh Posté le 26-01-2006 à 11:54:24   

Reply

Marsh Posté le 26-01-2006 à 12:06:33    

<!-- saved from url=(0053)http://test.roane-irkana.net/2_cols_fluide_2_cols.htm --> <== là ok pour que tu prennes exempele sur le modele de roane et tu as bien fait
 
mais là ou je ne suis pas ok du tout, c'est que tu ouvres le fichier avec un editeur de merde.
 
tu as utilisé quoi pour ouvrir un fichier qui au départ était propre au niveau du html

Reply

Marsh Posté le 26-01-2006 à 12:20:15    

Bon je vient de le refaire.
 
voici le code:
 

Code :
  1. <style type="text/css">
  3. body
  4. {color:black ; text-align:justify ; font-family: arial, verdana, sans-serif ; font-size: 10pt ; color: black ;
  5. background-color: #FFFFFF ;}
  7. .un
  8. { position:absolute ;
  9. left:10% ;
  10. top:430px ;
  11. font-family: Arial, Helvetica, sans-serif ;
  12. color: #000000 ;
  13. width: 40%;}
  15. .deux
  16. { position:absolute ;
  17. left:55% ;
  18. top:430px ;
  19. font-family: Arial, Helvetica, sans-serif ;
  20. color: #000000 ;
  21. background-color: #FFFF00 ;
  22. width: 40%;}
  24. #menu-gauche
  25. {
  26. margin-top: 5px;
  27. margin-bottom: 5px;
  28.    float: left; /* Le menu flottera à gauche */
  29.    width: 160px; /* Très important : donner une taille au menu */
  30.     background: #F5EBE0;
  32. }
  33. #menu-droit
  34. {
  35. margin-top: 5px;
  36.    float: right; /* Le menu flottera à droite */
  37.    width: 120px; /* Très important : donner une taille au menu */
  38.     background: #F5EBE0;
  39. }</style>
  40. <div id="menu-gauche">
  41.    <!-- Ici on mettra le menu -->
  42.     <div class="element_menu-gauche"> menu</div> </div>
  43. <div style="position:absolute ; left:10%; top:0px ; font-family: Arial, Helvetica, sans-serif ; color: #000000 ; background-color: #FFFF00 ; width: 40%;" > Texte .... </div>
  45. <div style="position:absolute ; left:55%; top:0px ; font-family: Arial, Helvetica, sans-serif ; color: #000000 ; background-color: #FFFF00 ; width: 40%;" > Texte .... </div>
  47. <div id="menu-droit">
  48.    <!-- Ici on mettra le menu -->
  49.     <div class="element_menu"> menu</div> </div>


 
 
les colonnes en jaune, j'aimerais qu'elles se retouve au milieu, entre les deux menu, et la elles restes au dessus


---------------
Toute l'actualité météo en continu http://www.meteo-world.com
Reply

Marsh Posté le 26-01-2006 à 18:46:40    

J'ai tester plein de trucs et je suis toujours bloqué.  :??:  
 
ca ne veut pas s'inserer au milieu des deux menus


---------------
Toute l'actualité météo en continu http://www.meteo-world.com
Reply

Marsh Posté le 26-01-2006 à 18:52:54    

Reply

Marsh Posté le 27-01-2006 à 13:48:18    

C'est pas ca que je veut faire. Regarde mon code 2 messages au dessus :)


---------------
Toute l'actualité météo en continu http://www.meteo-world.com
Reply

Sujets relatifs:

Leave a Replay

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