Pb de positionnement de div en design fluide [Pas tout à fait résolu] - HTML/CSS - Programmation
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.
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.
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%;
PS : Ne pas faire gaffe aux fautes impressionnantes.
Code :
|
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. |
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
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 :
Marsh Posté le 20-02-2006 à 16:30:00
Master_Jul a écrit : Merci pour tes conseils Pitsy. |
oky, sorry d'avoir osé imaginer que c'était un .class mal attribué
Oui, ça devient classe (wah le jeu de mot ), bravo !
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 :
Firefox 1.5 :
IE 6
Merci pour votre aide.
Message édité par Master_Jul le 20-02-2006 à 13:56:32