Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
845 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Probleme pour faire 3 colonne en css

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Probleme pour faire 3 colonne en css

n°1292523
wydook
Posté le 26-01-2006 à 11:54:24  profilanswer
 

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>
  6. #conteneur {
  7.         CLEAR: both; MARGIN-TOP: 10px; MARGIN-BOTTOM: 10px
  8. }
  9. #colonne1{
  10.         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
  11. }
  12. #colonne3 {
  13.         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
  14. }
  15. #colonne4 {
  16.         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
  17. }
  18. </STYLE>
  19. <META content="MSHTML 6.00.2900.2802" name=GENERATOR></HEAD>
  20. <BODY>
  21. <DIV id=conteneur>
  22. <DIV id=colonne1>B-1-1<br>
  23.     1<br>
  24.     1<br>
  25.     1<br>
  26.     1<br>
  27.   </DIV>
  28.   <DIV id=colonne4>
  29.     <P>Contenu colonne 2</P>
  30.     <P>Contenu colonne 2</P>
  31.     <P>Contenu colonne 2</P>
  32.     <P>Contenu colonne 2</P>
  33.   </DIV>
  34.   <DIV id=colonne3>
  35. <P>Contenu colonne 2</P>
  36. <P>Contenu colonne 2</P>
  37. <P>Contenu colonne 2</P>
  38. <P>Contenu colonne 2</P></DIV></DIV>
  39. </DIV></BODY></HTML>


---------------
Toute l'actualité météo en continu http://www.meteo-world.com
mood
Publicité
Posté le 26-01-2006 à 11:54:24  profilanswer
 

n°1292533
gatsu35
Blablaté par Harko
Posté le 26-01-2006 à 12:06:33  profilanswer
 

<!-- 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

n°1292548
wydook
Posté le 26-01-2006 à 12:20:15  profilanswer
 

Bon je vient de le refaire.
 
voici le code:
 

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

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
n°1292960
fastclemmy
(re-)Dictateur en plastique
Posté le 26-01-2006 à 18:52:54  profilanswer
 
n°1293381
wydook
Posté le 27-01-2006 à 13:48:18  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Probleme pour faire 3 colonne en css

 

Sujets relatifs
Gros Probleme PL/SQLProblème lecture d'une vidéo
[PHP] Probleme avec les espaces [Resolu]Problème avec stripslashes();
problème de submit inactif avec IE mais ok aavec mozillaProblème compil avec Dev c++
probleme PHPProblème struct et affichage en colonne
[Résolu] Problème de mise en page en colonne sous IEProbleme pour modifier une colonne dans une table Postgres
Plus de sujets relatifs à : Probleme pour faire 3 colonne en css


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR