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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [HTML/CSS] Positionnement de 3 div

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[HTML/CSS] Positionnement de 3 div

n°462886
burgergold
5$? va chez l'diable!
Posté le 20-07-2003 à 21:35:00  profilanswer
 

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
mood
Publicité
Posté le 20-07-2003 à 21:35:00  profilanswer
 

n°462916
burgergold
5$? va chez l'diable!
Posté le 20-07-2003 à 22:38:00  profilanswer
 

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
n°462920
bmgg4
Posté le 20-07-2003 à 22:54:34  profilanswer
 

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
n°462921
burgergold
5$? va chez l'diable!
Posté le 20-07-2003 à 22:58:22  profilanswer
 

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
n°462944
burgergold
5$? va chez l'diable!
Posté le 20-07-2003 à 23:33:27  profilanswer
 

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
n°462964
burgergold
5$? va chez l'diable!
Posté le 21-07-2003 à 00:16:57  profilanswer
 

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


---------------
http://www.boincstats.com/signature/user_664861.gif
n°462969
burgergold
5$? va chez l'diable!
Posté le 21-07-2003 à 00:35:41  profilanswer
 

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
n°462970
burgergold
5$? va chez l'diable!
Posté le 21-07-2003 à 00:53:11  profilanswer
 

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
n°462978
burgergold
5$? va chez l'diable!
Posté le 21-07-2003 à 03:34:23  profilanswer
 

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
n°462979
burgergold
5$? va chez l'diable!
Posté le 21-07-2003 à 03:37:28  profilanswer
 
mood
Publicité
Posté le 21-07-2003 à 03:37:28  profilanswer
 

n°462981
burgergold
5$? va chez l'diable!
Posté le 21-07-2003 à 03:46:03  profilanswer
 

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
n°462982
burgergold
5$? va chez l'diable!
Posté le 21-07-2003 à 03:48:29  profilanswer
 

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
n°462984
burgergold
5$? va chez l'diable!
Posté le 21-07-2003 à 03:57:20  profilanswer
 

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
n°462985
burgergold
5$? va chez l'diable!
Posté le 21-07-2003 à 03:58:06  profilanswer
 

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
n°462988
burgergold
5$? va chez l'diable!
Posté le 21-07-2003 à 04:01:48  profilanswer
 

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
n°462992
burgergold
5$? va chez l'diable!
Posté le 21-07-2003 à 04:11:33  profilanswer
 

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
n°462994
burgergold
5$? va chez l'diable!
Posté le 21-07-2003 à 04:20:06  profilanswer
 

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
n°462997
burgergold
5$? va chez l'diable!
Posté le 21-07-2003 à 04:32:01  profilanswer
 

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
n°463001
burgergold
5$? va chez l'diable!
Posté le 21-07-2003 à 04:37:39  profilanswer
 

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
n°463003
burgergold
5$? va chez l'diable!
Posté le 21-07-2003 à 04:43:26  profilanswer
 

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
n°463006
burgergold
5$? va chez l'diable!
Posté le 21-07-2003 à 04:46:18  profilanswer
 

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
n°463008
burgergold
5$? va chez l'diable!
Posté le 21-07-2003 à 04:50:09  profilanswer
 

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
n°463009
burgergold
5$? va chez l'diable!
Posté le 21-07-2003 à 04:53:32  profilanswer
 

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
n°463011
burgergold
5$? va chez l'diable!
Posté le 21-07-2003 à 05:16:10  profilanswer
 

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


---------------
http://www.boincstats.com/signature/user_664861.gif
n°463189
burgergold
5$? va chez l'diable!
Posté le 21-07-2003 à 11:54:24  profilanswer
 

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
n°467320
burgergold
5$? va chez l'diable!
Posté le 25-07-2003 à 02:29:28  profilanswer
 

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
mood
Publicité
Posté le   profilanswer
 


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

  [HTML/CSS] Positionnement de 3 div

 

Sujets relatifs
[html]largeur d'un bouton[html] redimensionner un pop up+ créer un lien
Compteur de visites php/mysql a placé dans une page html ?[HTML/JS] Evenement sur zone de texte déclenche un checked possible ??
[HTML] Support de la césure ?[HTML/JS/PHP] un bouton 'Set As Wallpaper'
[HTML / ASP / WEB] Masquer l'affichage de l'urlcomment realiser un fichier Fichier HTML compilé
Envoyer un mail au format HTMLPositionnement HTML/CSS + Mise en forme des cadres
Plus de sujets relatifs à : [HTML/CSS] Positionnement de 3 div

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.106 secondes

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