[CSS] mise en page et largeur dynamique

mise en page et largeur dynamique [CSS] - HTML/CSS - Programmation

Marsh Posté le 28-04-2004 à 15:29:11    

bonjour a tous :)
 
j'ai un probleme de mise en page que je n'arrive pas a solutionner :
 
j'ai 3 div dans un div general de cette maniere (je ne dessine pas le general) :
__________________
|        |        |        |
|   A   |   B    |   C   |
|_____|_____|_____|
 
le A et C ont une largeur fixe
B doit avoir une largeur dynamique en sachant que C n'est pas toujours present.
 
pour resumer, j'aimerais que B occupe toute la place restante en largeur et je n'y arrive pas :/
 
pourriez-vous m'indiquer comment proceder svp ?
 
merci d'avance :jap:


Message édité par Batman-Fr le 28-04-2004 à 15:31:06

---------------
Tout ou rien mais rien que tout ! feed-back : http://forum.hardware.fr/forum2.ph [...] ost=121391
Reply

Marsh Posté le 28-04-2004 à 15:29:11   

Reply

Marsh Posté le 28-04-2004 à 16:00:53    

j'arrive presque a qlq chose :
 
j'ai A en float: left
B en float: left
C en float: right
 
ca passe sous IE mais sous Mozilla, B passe en dessous de A et C qui restent a gauche (A) et a droite (C) comme convenu
 
:(


---------------
Tout ou rien mais rien que tout ! feed-back : http://forum.hardware.fr/forum2.ph [...] ost=121391
Reply

Marsh Posté le 28-04-2004 à 16:11:03    

fais voir les classes css de tes div, et explique le résultat que tu obtiens...

Reply

Marsh Posté le 28-04-2004 à 16:28:16    

voila mes 'classes' :
 

Code :
  1. #A {
  2. float: left;
  3. margin-left: 2px;
  4. }
  5. #B {
  6. float: left;
  7. background-color: white;
  8. border: 1px solid black;
  9. padding: 5px;
  10. margin-left: 5px;
  11. margin-right: 5px;
  12. }
  13. #C {
  14. float: right;
  15. background-color: silver;
  16. width: 120px;
  17. height: 600px;
  18. border: 1px solid black;
  19. margin-right: 2px;
  20. }


 
sous IE : tout se passe bien, les 3 DIV sont cote a cote et si je supprime C, B prend bien la place restante
 
Sous Moz : A est cole a gauche, C est colle a droite et B est en dessous et prend la totalite de la largeur


---------------
Tout ou rien mais rien que tout ! feed-back : http://forum.hardware.fr/forum2.ph [...] ost=121391
Reply

Marsh Posté le 28-04-2004 à 17:30:30    

Essaie
 

Code :
  1. #general {
  2. width : 97%;
  3. margin-left : auto;
  4. margin-right : auto;
  5. }
  6. #A {
  7. width : 120px;
  8. float: left;
  9. margin-left: 2px;
  10. }
  11. #B {
  12. float: left;
  13. background-color: white;
  14. border: 1px solid black;
  15. padding: 5px;
  16. margin-left: 5px;
  17. margin-right: 5px;
  18. }
  19. #C {
  20. float: left;
  21. background-color: silver;
  22. width: 120px;
  23. height: 600px;
  24. border: 1px solid black;
  25. margin-right: 2px;
  26. }



---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !
Reply

Marsh Posté le 28-04-2004 à 17:47:15    

sous IE : toujours OK
sous Moz : B est tjrs en dessous
 
:(
 
je me demande si c'est simplement possible a vrai dire ...


---------------
Tout ou rien mais rien que tout ! feed-back : http://forum.hardware.fr/forum2.ph [...] ost=121391
Reply

Marsh Posté le 28-04-2004 à 18:42:34    

ce code marche avec Moz
 

Code :
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. <!--
  5. #site {
  6. text-align: center;
  7. }
  8. #general {
  9. text-align: center;
  10. width : 95%;
  11. margin-left : auto;
  12.      margin-right : auto
  13.      top : 0px;
  14.   }
  15.  
  16. #A {
  17.     width : 120px;
  18.     background-color: silver;
  19.     float : left;
  20.   }
  21.  
  22. #B {
  23.     background-color: red;
  24.     width : 70%;
  25.     float : left;
  26.   }
  27.  
  28. #C {
  29.     background-color: silver;
  30.     width: 120px;
  31.     float : left;
  32.   }
  33.  
  34. -->
  35. </style>
  36. </head>
  37. <body>
  38. <div id="site">
  39. <div id="general">
  40. <div id="A">&nbsp;</div>
  41. <div id="B">&nbsp;&nbsp;</div>
  42. <div id="C">&nbsp;</div>
  43. </div>
  44. </div>
  45. </body>
  46. </html>


---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !
Reply

Marsh Posté le 28-04-2004 à 18:47:27    

le probleme est que le C bascule en dessous assez tot lorsqu'on joue sur la largeur de la fenetre :(


---------------
Tout ou rien mais rien que tout ! feed-back : http://forum.hardware.fr/forum2.ph [...] ost=121391
Reply

Marsh Posté le 28-04-2004 à 18:52:47    

avec 65% pour B, tu passes en 800x600 et +
 
sinon, tu parts sur un cadre principal de 770px de large et tu positionnes tes zones A, B et C en absolu


---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !
Reply

Marsh Posté le 28-04-2004 à 21:24:49    

ta solution est là :
 
http://alsacreations.com/articles/ [...] _fluid.htm
 
a+


---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !
Reply

Marsh Posté le 28-04-2004 à 21:24:49   

Reply

Marsh Posté le 29-04-2004 à 09:30:18    

pour g_d_fluid d'alsacreation, j'avais regarde des le debut mais mon div general qui englobe mes 3 div A, B et C est centre horizontalement du coup la solution l'alsa ne fonctionne plus :(


---------------
Tout ou rien mais rien que tout ! feed-back : http://forum.hardware.fr/forum2.ph [...] ost=121391
Reply

Marsh Posté le 29-04-2004 à 09:35:18    

T509 a écrit :

avec 65% pour B, tu passes en 800x600 et +
 
sinon, tu parts sur un cadre principal de 770px de large et tu positionnes tes zones A, B et C en absolu


 
le probleme majeur est que si je supprime C, B ne prend plus la place totale qui reste du coup :( et c'est ca ma contrainte principale


---------------
Tout ou rien mais rien que tout ! feed-back : http://forum.hardware.fr/forum2.ph [...] ost=121391
Reply

Marsh Posté le 29-04-2004 à 09:56:22    

je crois qu'il faut prévoir une CSS par type d'affichage alors.
 
CSS_ABC
CSS_AB
 
Sinon tu ne t'en sortira pas


---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !
Reply

Marsh Posté le 29-04-2004 à 10:05:22    

j'y pensais oui
dommage, ca ne parait pas difficile de prime abord ...
 
probleme d'interpretation des navigateurs ou limite des CSS :??:


---------------
Tout ou rien mais rien que tout ! feed-back : http://forum.hardware.fr/forum2.ph [...] ost=121391
Reply

Marsh Posté le 03-05-2004 à 08:55:14    

un autre moyen est de faire : (pas testé, mais cela doit marcher)
 
conteneur
     colonne (A) gauche 120 px, absolute, left 0
     /
     conteneur bis marge gauche 120 px      
          colonne C 120 px float right display block
          /
          colonne B float right display block
          /
     /
/
 
 
si tu ne mets pas ta colonne C, B doit normalement prendre toute la place restante


---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !
Reply

Marsh Posté le 03-05-2004 à 09:20:17    

Batman-Fr a écrit :

pour g_d_fluid d'alsacreation, j'avais regarde des le debut mais mon div general qui englobe mes 3 div A, B et C est centre horizontalement du coup la solution l'alsa ne fonctionne plus :(


Ben... le modèle non-fluide alors : http://www.alsacreations.com/artic [...] d_fixe.htm ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 03-05-2004 à 10:21:26    

Tu as changé de pseudo ?
 
et la solution dont je parle juste au dessus ?


---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !
Reply

Marsh Posté le 03-05-2004 à 14:16:55    

je ne suis pas sibeluis :)
 
pour ta proposition, c'est ce que je me suis resigné a faire :
 
2 div :
1 pour la colonne de gauche A
1 sur le reste B qui englobe le C s'il existe
 
ca marche bien mais l'idel aurait ete que C soit a l'exterieur de B
 
merci :)


---------------
Tout ou rien mais rien que tout ! feed-back : http://forum.hardware.fr/forum2.ph [...] ost=121391
Reply

Marsh Posté le 03-05-2004 à 14:25:40    

si tu regardes bien, je t'ai proposé de faire 4 colonnes : A, D, C, B (dans l'ordre)
 
C et B sont dans D


---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !
Reply

Marsh Posté le 03-05-2004 à 16:01:13    

T509 a écrit :

si tu regardes bien, je t'ai proposé de faire 4 colonnes : A, D, C, B (dans l'ordre)
 
C et B sont dans D


 
je ne l'avait pas vu comme ca :)
 
donc 2 conteneurs generaux
pourquoi n'y ai-je pas pense ?? [:huit]


---------------
Tout ou rien mais rien que tout ! feed-back : http://forum.hardware.fr/forum2.ph [...] ost=121391
Reply

Marsh Posté le 03-05-2004 à 18:16:40    

dis nous si cela fonctionne ...


---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !
Reply

Marsh Posté le 03-05-2004 à 18:17:42    

T509 a écrit :

Tu as changé de pseudo ?
 
et la solution dont je parle juste au dessus ?


 
Promis j'avais pas bu ...


---------------
fermez vos topics résolus avec le tag [Résolu] en fin de titre. Merci !
Reply

Marsh Posté le 03-05-2004 à 20:06:46    

j'vous dis ca demain :)


---------------
Tout ou rien mais rien que tout ! feed-back : http://forum.hardware.fr/forum2.ph [...] ost=121391
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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