[Pas tout à fait résolu] Pb de positionnement de div en design fluide

Pb de positionnement de div en design fluide [Pas tout à fait résolu] - HTML/CSS - Programmation

Marsh Posté le 20-02-2006 à 11:24:07    

Je craque complètement. :/
 
Ca fait un bon moment que je cherche "LA" combinaison idéale mais je n'arrive jamais à accorder les navigateurs. J'ai tenté pas mal de combinaisons de float:left et joué des position relative / absolute mais il y a toujours qqch qui déconne quelque part. J'ai écumé pas mal de tuto et de topics et avec la solution du spacer j'étais en bonne voie mais finalement, non...
 
Je cherche à avoir le rendu comme on le voit sous Opera, mais sur tous les navigateurs, sans utiliser de tableaux évidemment.
 
Opéra 8.52 :
http://img96.imageshack.us/img96/6817/opera9lu.th.png
Firefox 1.5 :
http://img109.imageshack.us/img109/8065/ff0qy.th.png
IE 6
http://img109.imageshack.us/img109/210/ie0jw.th.png
 

Code :
  1. <div class="app">
  2.   <div class="tapp">Placez ici le contenu de  class "tapp"</div>
  3.   <div class="appcg">
  4.     <div class="appinfobox">
  5.       <p>Placez ici le contenu de  class "appinfobox"</p>
  6.       <p>&nbsp;</p>
  7.     </div>
  8.     <div class="appinfobox">
  9.       <p>Placez ici le contenu de  class "appinfobox"</p>
  10.       <p>&nbsp;</p>
  11.     </div>
  12.     <div class="appinfobox">
  13.       <p>Placez ici le contenu de  class "appinfobox"</p>
  14.       <p>&nbsp;</p>
  15.     </div>
  16.   </div>
  17.   <div class="appcd">
  18.     <p>Je suis un gentil paragraphe. </p>
  19.     <p>&nbsp;</p>
  20.     <p>&nbsp;</p>
  21.     <p>&nbsp;</p>
  22.     <p>&nbsp;</p>
  23.     <p>&nbsp;</p>
  24.     <p>&nbsp;</p>
  25.     <p>&nbsp;</p>
  26.     <p>&nbsp;</p>
  27.     <p>&nbsp;</p>
  28.     <p>Je suis un gentil paragraphe. </p>
  29.   </div>
  30.   <div class="spacer">&nbsp;</div>
  31. </div>


 

Code :
  1. .appcg {
  2. position: relative;
  3. width: 30%;
  4. border: 1px dashed #000099;
  5. margin: 5px;
  6. float: left;
  7. }
  8. .appcd {
  9. position: relative;
  10. width: 60%;
  11. left: 30%;
  12. border: 1px dashed #000099;
  13. margin: 10px;
  14. }
  15. .spacer {
  16. clear: both;
  17. height: 0px;
  18. }


 
Merci pour votre aide. :jap:


Message édité par Master_Jul le 20-02-2006 à 13:56:32
Reply

Marsh Posté le 20-02-2006 à 11:24:07   

Reply

Marsh Posté le 20-02-2006 à 12:15:22    

A première vue, je mettrais tout simplement .appcd et .appcg tous les deux en float left.

Reply

Marsh Posté le 20-02-2006 à 12:50:41    

Bien vu ! Je n'avais pas reessayé depuis la mise en place du spacer. Ca marche plutôt pas mal maintenant et j'ai enlevé par la même occasion les position:relative; Merci. :jap:

Reply

Marsh Posté le 20-02-2006 à 13:46:43    

En fait, c'est pas encore tout à fait bon. C'est pour faire un design fluide et quand je rétrécis la page en largeur, le bloc de droite vient se glisser en dessus du bloc de gauche. On peut faire qqch contre ça ? J'ai essayé de mettre les deux blocs appcg etappcd dans un autre div mais ça ne change rien.
 
J'aimerais positionner avec précision mon bloc de droite vis à vis du bloc gauche et du côté droit. C'est un peu random pour le moment de dire width:67%;
 
http://img71.imageshack.us/img71/6060/bug8ov.png
PS : Ne pas faire gaffe aux fautes impressionnantes. [:barthaliastoxik]  
 

Code :
  1. .appinfobox {
  2. border: 1px solid #0000FF;
  3. margin: 5px;
  4. }
  5. .appinfobox *{
  6. font-size:x-small;
  7. }
  8. .appinfobox p{
  9. font-weight:bold;
  10. }
  11. .appcg {
  12. width: 30%;
  13. border: 1px dashed #000099;
  14. margin: 5px;
  15. float: left;
  16. }
  17. .appcd {
  18. width: 67%;
  19. border: 1px dashed #000099;
  20. margin: 5px;
  21. float: left;
  22. }
  23. .appinfobox ul{
  24. margin-left:15px;
  25. padding:0px:
  26. }
  27. .appinfobox li{
  28. margin-left:15px;
  29. padding:0px;
  30. }
  31. .spacer {
  32. clear: both;
  33. height: 0px;
  34. }

Message cité 1 fois
Message édité par Master_Jul le 20-02-2006 à 14:23:21
Reply

Marsh Posté le 20-02-2006 à 14:50:07    

Master_Jul a écrit :

En fait, c'est pas encore tout à fait bon. C'est pour faire un design fluide et quand je rétrécis la page en largeur, le bloc de droite vient se glisser en dessus du bloc de gauche. On peut faire qqch contre ça ? J'ai essayé de mettre les deux blocs appcg etappcd dans un autre div mais ça ne change rien.
 
J'aimerais positionner avec précision mon bloc de droite vis à vis du bloc gauche et du côté droit. C'est un peu random pour le moment de dire width:67%;
[/code]


 
Ben le problème c'est tes marges que tu donnes en pixels, donc forcément, plus la fenêtre rétrecit et plus elles représentent un grand pourcentage.
Tu pourrais déjà contourner une partie du pb en appliquant une marge à ton conteneur principal (app) et éviter ainsi les marges gauche et droite de tes 2 conteneurs en float (en passant tes éléments qui ne se retrouvent qu'une fois dans la page devraient plutôt être définis par un id que par un class). Après il y a tout le problème de la définition des largeurs pas pris en compte la même chose sur IE et les autres (niveau padding, voir même le 1px des cadres qui peuvent jouer leur rôle pour ton bloc qui passe en-dessous même si tu définis tout en %).
 
Je ne saurais pas trop te dire comme ça la meilleure combinaison à utiliser. Tu peux aussi prévoir la marge entre tes 2 conteneur en % ou alors mettre le 2ème en float right au lieu de float left, tu définis leur largeur en % pour chacun (genre 30 et 60) et du coup cette marge est la déduction des 2 et se rétrécit en diminuant la fenêtre. Après, si l'un passe en-dessous de l'autre en-dessous d'une résolution d'écran de 800x600, c'est pas dramatique non plus, il me semble :)


Message édité par Pitsy le 20-02-2006 à 14:50:42
Reply

Marsh Posté le 20-02-2006 à 15:19:13    

Merci pour tes conseils Pitsy.
 
En fait, cette div n'est qu'un petit élément d'un site et il y a en plusieurs par page d'où mon choix des class. :)
 
Ca prend forme :
http://img109.imageshack.us/img109/3508/preview3nm.png

Message cité 1 fois
Message édité par Master_Jul le 20-02-2006 à 15:23:55
Reply

Marsh Posté le 20-02-2006 à 16:30:00    

Master_Jul a écrit :

Merci pour tes conseils Pitsy.
En fait, cette div n'est qu'un petit élément d'un site et il y a en plusieurs par page d'où mon choix des class. :)


 
oky, sorry d'avoir osé imaginer que c'était un .class mal attribué  :whistle:  
 
Oui, ça devient classe (wah le jeu de mot ;) ), bravo !

Reply

Sujets relatifs:

Leave a Replay

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