[HTML/CSS] Positionnement de 3 div

Positionnement de 3 div [HTML/CSS] - HTML/CSS - Programmation

Marsh Posté le 20-07-2003 à 21:35:00    

je voudrais avoir une structure du genre div left, div right, div middle, mais que le middle ait la même hauteur que le plus long des 2 autres
 
ca fonctionne sans doctype, mais si je mets un doctype xhtml 1.0 transitionnal ou 1.1, ca marche plus
 
voici mon css et mon html
 

Code :
  1. * {
  2. color            : #000000;
  3. font-family      : arial;
  4. font-size        : 10pt;
  5. }
  7. body {
  8. background-color : #FFFFFF;
  9. height           : 100%;
  10. }
  12. div#page {
  13. width  : 100%;
  14. height : 100%;
  15. }
  17. div#left {
  18. float : left;
  19. }
  21. div#right {
  22. float : right;
  23. }
  25. div#middle {
  26. height : 100%;
  27. }


 

Code :
  1. <html>
  2.    <head>
  3.    <title>Organisation Sherby</title>
  4.    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  5.    <link rel="stylesheet" type="text/css" href="css/oswi_common.css" />
  6.    </head>
  7.    <body>
  8.       <div id="page">
  9.          <div id="left">
  10.             TEST
  11.          </div>
  12.          <div id="right">
  13.             TEST
  14.          </div>
  15.          <div id="middle">
  16.             TEST
  17.          </div>
  18.       </div>
  19.    </body>
  20. </html>



---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 20-07-2003 à 21:35:00   

Reply

Marsh Posté le 20-07-2003 à 22:38:00    

ca marche pas trop comme je le voudrais justement ainsi
 
dans mon middle, jvais avoir 2 div, 1 pour une banniere, lautre pour mon contenu
 
jveux que le contenu reste entre la left et le right, sans déborder
 
alors jai pas vraiment le choix d'avoir un conteneur "middle" dans lequel jvais mettre 1 div de banniere et 1 div de contenu
 
jai tout vrai?


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 20-07-2003 à 22:54:34    

Bonsoir burgergold,
 
Peut être connais-tu ce lien http://www.positioniseverything.ne [...] glong.html
Il me semble que tu devrais y trouver de quoi réussir ta page.


---------------
Amicalement, Monique
Reply

Marsh Posté le 20-07-2003 à 22:58:22    

bmgg4 a écrit :

Bonsoir burgergold,
 
Peut être connais-tu ce lien http://www.positioniseverything.ne [...] glong.html
Il me semble que tu devrais y trouver de quoi réussir ta page.


 
ca semble plutot étrange sont truc
 
le left est en absolute, le right en float...
 
edit: et surtout, c plus des combines de hack de IE :D
 
edit2: dailleurs, moi jveux pas que les 3 colonnes ait la meme longueur, simplement que le middle soit de la meme longueur que le plus long (donc 100% de mon div#page)
 
mais ca fonctionne sans doctype, c le doctype qui me tue :D
 
edit 3 :D : mais ma version sans doctype ne fonctionne que sous IE :(


Message édité par burgergold le 20-07-2003 à 23:04:04

---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 20-07-2003 à 23:33:27    

bon voici l'image, de ce que je veux que ca soit :D
 
jai donc des truc à gauche (logo, un module vide)
jai au centre un espace pour ma banniere, et mon contenu en dessous
jai à droite 1 module vide
 
Ce que je veux: vous voyez de la facon que mes modules sont connecté au contenu? bin si j'ai un module qui est plus long que le contenu, bin y va se connecter dans le vide
 
donc, faut que mon contenu (la grosse boite du centre), utilise toute la hauteur disponible
 
http://24.201.55.75:234/website.gif
 
jsais pas si c un peu plus clair ainsi


Message édité par burgergold le 20-07-2003 à 23:34:47

---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 21-07-2003 à 00:16:57    

burger téléphone maison  :cry:  
 
suis-je un si grand incompris?


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 21-07-2003 à 00:35:41    

jsuis plutot désespéré, selon sque jvois sur le net, ya pas grand monde qui a réussi à fair ce que je veux  :cry:  
 
la faq jai deja la plusieurs truc, mais aucun ne "semble" correspondre à mon besoin
 
en gros, soit les gens utilise des positions absolute (ce qui enleve toute chance d'avoir un certain lien entre mon middle et mes left et right, soit c'est en float left, float right comme je lai fait


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 21-07-2003 à 00:53:11    

oh toi hotshot qui semble tout connaitre, et qui me dit simplement d'allez voir dans la faq, ce que je tente mais qui est peu fructueux, tu pourrais pas plutot me dire où plus exactement, parce que je trouve absolument rien, et jsuis sur ca depuis 1hrs cet après midi (heure de mtl), soit pas loin de 6hrs


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 21-07-2003 à 03:34:23    

HotShot a écrit :

Ah et au fait : "height:100%" ça veut rarement dire qqch (cf. faq)


 
jai remarqué, sous ie ca marche mais mozilla ca veut rien dire :D


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 21-07-2003 à 03:37:28    

Reply

Marsh Posté le 21-07-2003 à 03:37:28   

Reply

Marsh Posté le 21-07-2003 à 03:46:03    

ca fonctionne sous mozilla mais pas sous ie
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html>
  3.    <head>
  4.    <title>Organisation Sherby</title>
  5.    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.    <link rel="stylesheet" type="text/css" href="css/oswi_common.css" />
  7.    </head>
  8.    <body>
  9.       <div id="page">
  10.          <div id="left">
  11.             <div>Logo</div>
  12.             <div>menu</div>
  13.          </div>
  14.          <div id="right">
  15.             <div>module</div>
  16.             <div>module</div>
  17.             <div>module</div>
  18.          </div>
  19.          <p>test1</p>
  20.          <p>test2</p>
  21.          <div id="spacer"></div>
  22.       </div>
  23.    </body>
  24. </html>


 
sous ie, mon test2 va se foutre sous mon left, spour ca jdisais que ca faisais pas sque je voulais


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 21-07-2003 à 03:48:29    

HotShot a écrit :


 
C'est surtout que ça n'a aucun sens dans ton cas. Je vois même pas pkoi tu emploies un truc pareil (lis la faq bordayle !!!!!!)


 
t'a vu la longueur de la faq? sérieusement j'en ait quand meme beaucoup lu, mais moi j'apprends beaucoup plus "sur le terrain" qu'en faisant simplement de la théorie


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 21-07-2003 à 03:57:20    

Code :
  1. * {
  2. color            : #000000;
  3. font-family      : arial;
  4. font-size        : 10pt;
  5. }
  7. div#page {
  8. background-color : #FFFFFF;
  9. }
  11. div#left {
  12. background-color : #DDDDDD;
  13. float : left;
  14. }
  16. div#right {
  17. background-color : #FFFFFF;
  18. float : right;
  19. }
  21. div#spacer {
  22. clear : both;
  23. }


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 21-07-2003 à 03:58:06    

HotShot a écrit :

Ah au fait, quand tu balances le code, merci de balancer la CSS qui va avec  :sarcastic:  
 
Ton truc marche parfaitement, sous IE ET sous Moz, testé par moi à l'instant.
 
Et accessoirement, ce que tu viens de faire figure sur la première page de la FAQ, rubrique "liens", t'as environ 5 sites qui expliquent comment faire ce que tu as fait, et de façon à ce que ça marche. Mais tu as préféré réinventer la roue, ça te regarde.  


 
étrange ici jvois mon test2 sous menu...


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 21-07-2003 à 04:01:48    

HotShot a écrit :

Tu connais la largeur (en % ou px) de right et left ? :??:


 
ca va etre à determiner avec lautre mec qui fait le design
 
disons 128px à gauche et 192 à droite pour le moment
 
bon kess que jai pu oublier :D


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 21-07-2003 à 04:11:33    

si javais simplement répondu oui on non, taurais pu me répondre par la suite : non mais tu la dis!
 
en la disant, bin ca répond à 2 questions :D
 
sinon dans la faq jai trouvé ca mais jusqua la jvois rien qui soit différent
 

Code :
  1. <div id="principal">
  2.   <div id="menu">...</div>
  3.   <div id="contenu">...</div>
  4.   <div class="spacer"></div>
  5. </div>
  7. div.spacer {
  8.   clear: both;
  9. }


Message édité par burgergold le 21-07-2003 à 04:11:56

---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 21-07-2003 à 04:20:06    

dans leur css ya pas de margin
 
ensuite si jmets un margin à #page, bin ca tasse mon #left aussi
si jmets margin à #spacer, ca fou rien
 


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 21-07-2003 à 04:32:01    

ah bin dans ce cas fallait pas virer mon div middle alors, c lui qui fera office des margin


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 21-07-2003 à 04:37:39    

HotShot a écrit :


 
Si, tu peux le virer. Et appliquer directement le margin aux éléments <p>, c'est EXACTEMENT PAREIL BON SANG !!!!


 
ca l'implique que si j'ai 100 <p> jvais devois placer 100 fois le style, pas très commode il me semble...
 
edit: mais si jmets le div, il sort du flux normal


Message édité par burgergold le 21-07-2003 à 04:39:52

---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 21-07-2003 à 04:43:26    

sinon selon toi faire un design de ce genre, sachant que les menus seront dynamique, le milieu aussi
 
http://24.201.55.75:234/website.gif
 
ca se fait bien ? car à priori jai beau avoir sque jai là présentement, j'ai l'impression que ca va pas dutout me donner sque jveux au final


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 21-07-2003 à 04:46:18    

je le comprends, mais comme je viens de dire, au final jcrois pas que ca va m'avancer plus à appliquer le design désiré
 
moi le but d'avoir cétait de pouvoir afficher la bordure de mon élément de contenu de la bonne hauteur pour que la jonction menu/contenu se fasse comme du monde, et ce meme si le menu dépasse la longueur normal du contenu


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 21-07-2003 à 04:50:09    

HotShot a écrit :


 
Rien n'est impossible si on maîtrise bien toutes les données. Et comme je sais pas du tout ce que tu veux, je saurais pas te dire. Je sais même pas quel contenu il y aura, s'il sera extensible ou non, lequel devra varier en largeur ou non !


 
mouep je vois, beaucoup de boulot sur la planche :D
 
sinon tu as ca toi? le contenu qui se trouve à droite de mon left (donc mon 1er élément dans le milieu), est décalé de quelques pixel vers la droite alors que ceux qui n'ont pas de menu à gauche arrive vraiment vis à vis.


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 21-07-2003 à 04:53:32    

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html>
  3.    <head>
  4.    <title>Organisation Sherby</title>
  5.    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.    <link rel="stylesheet" type="text/css" href="css/oswi_common.css" />
  7.    </head>
  8.    <body>
  9.      <div id="page">
  10.          <div id="left">
  11.             <div>Logo</div>
  12.             <div>menu</div>
  13.          </div>
  14.          <div id="right">
  15.             <div>module</div>
  16.             <div>module</div>
  17.             <div>module</div>
  18.          </div>
  19.          <p class="middle">test1</p>
  20.          <p class="middle">test2</p>
  21.          <p class="middle">test3</p>
  22.          <div id="spacer"></div>
  23.       </div>
  24.    </body>
  25. </html>


 

Code :
  1. * {
  2. color            : #000000;
  3. font-family      : arial;
  4. font-size        : 10pt;
  5. }
  7. div#page {
  8. background-color : #AAAAAA;
  9. }
  11. div#left {
  12. background-color : #DDDDDD;
  13. float : left;
  14. width : 128px;
  15. }
  17. div#right {
  18. background-color : #FFFFFF;
  19. float : right;
  20. width : 192px;
  21. }
  23. .middle {
  24. margin-left  : 128px;
  25. margin-right : 192px;
  26. }
  28. div#spacer {
  29. clear : both;
  30. }


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 21-07-2003 à 05:16:10    

arf, ca va pas bien allez pour du positionnement d'image ca...


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 21-07-2003 à 11:54:24    

HotShot a écrit :


 
Si tu donnes des dimensions précises à *chacun* des blocs le problème disparait.
 
Mais bon, tu t'en fous de MSIE, libre aux gens d'utiliser un vieux browser buggé qui est incompatible avec tous les standards et tous les autres navigateurs.


 
facile de : tu t'en fous de MSIE
 
ya quand meme 90% qui l'utilise et jai pas trop envi que 90% du monde voit une page qui fit pas bin, parce que eu le savent pas que c un bug de MSIE
 
ensuite, les dimensions précises, ca m'oblige à pas adapté le "middle" aux diverses résolutions
 
j'veux bien me forcer le cul pour suivre des standards mais là faut dire quia encore des améliorations de leur part à faire dans le domaine


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le 25-07-2003 à 02:29:28    

HotShot a écrit :


 
Ben sinon, positionnement tout en float [:dawa] cf. sites listés dans la FAQ qui proposent divers exemples. Ou tout en absolu :D


 
tout en float = mon middle prend seulement l'espace nécessaire, et pas tout l'espace restant
 
tout en absolu = meme chose sous IE, sous mozilla ca dlair à fonctionner
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html>
  3.    <head>
  4.    <title>Organisation Sherby</title>
  5.    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.    <link rel="stylesheet" type="text/css" href="css/oswi_common.css" />
  7.    </head>
  8.    <body>
  9.       <div id="left">
  10.          <div>Logo</div>
  11.          <div>menu</div>
  12.          <div>Logo</div>
  13.          <div>menu</div>
  14.          <div>Logo</div>
  15.          <div>menu</div>
  16.          <div>Logo</div>
  17.          <div>menu</div>
  18.       </div>
  19.       <div id="right">
  20.          <div>module</div>
  21.          <div>module</div>
  22.          <div>module</div>
  23.       </div>
  24.       <div id="middle">
  25.          <div>test</div>
  26.          <div>test</div>
  27.          <div>test</div>
  28.          <div>test</div>
  29.          <div>test</div>
  30.          <div>test</div>
  31.       </div>
  32.    </body>
  33. </html>


 

Code :
  1. * {
  2. color            : #000000;
  3. font-family      : arial;
  4. font-size        : 10pt;
  5. margin : 0px;
  7. }
  9. div#left {
  10. position : absolute;
  11. left : 0px;
  12. background-color : #DDDDDD;
  13. width : 128px;
  14. }
  16. div#right {
  17. position : absolute;
  18. right : 0px;
  19. background-color : #999999;
  20. width : 192px;
  21. }
  23. div#middle {
  24. position : absolute;
  25. left : 128px;
  26. right : 192px;
  27. background-color : #777777;
  28. }


---------------
http://www.boincstats.com/signature/user_664861.gif
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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