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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1309522
Master_Jul
Posté le 20-02-2006 à 11:24:07  profilanswer
 

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
mood
Publicité
Posté le 20-02-2006 à 11:24:07  profilanswer
 

n°1309545
Pitsy
Posté le 20-02-2006 à 12:15:22  profilanswer
 

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

n°1309566
Master_Jul
Posté le 20-02-2006 à 12:50:41  profilanswer
 

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:

n°1309615
Master_Jul
Posté le 20-02-2006 à 13:46:43  profilanswer
 

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
n°1309666
Pitsy
Posté le 20-02-2006 à 14:50:07  profilanswer
 

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
n°1309687
Master_Jul
Posté le 20-02-2006 à 15:19:13  profilanswer
 

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
n°1309757
Pitsy
Posté le 20-02-2006 à 16:30:00  profilanswer
 

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 !


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

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

 

Sujets relatifs
[Résolu] Upload de fichiers sur Online.net[Résolu] Les <ul> imbriqués, c'est pas W3C compliant ?
[résolu][c++] Plantage à la fermeture du programmerésolu Problème de concaténation de variable
[resolu] Liste dynamiques liées, pb de récupération de variable[VBScript] [RESOLU] difference entre winNT et LDAP
[Resolu] A la quete de '** glibc detected ** free()'[résolu]Socket non bloquants
[résolu]lecture tags id3v2[RESOLU] problème de condition
Plus de sujets relatifs à : [Pas tout à fait résolu] Pb de positionnement de div en design fluide


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