28221 sujets

CSS et mise en forme, CSS3

Problèmes de positionnement/dimensionnement de divs sous Firefox

Pages :
(reprise du message précédent)

Et si tu n'es pas content du service rendu, rien ne t'oblige à rester.
Tu pourrais au moins remercier Stephan d'avoir pris le temps de souligner des points qui n'allaient pas dans ta page initiale, parcequ'il ne s'est pas contenté de cracher sur ce que tu avais fait, il ne l'a d'ailleurs pas fait du tout.

Ne compte pas à ce que tout t'arrive tout cuit dans le bec, et accepte les remarques qui te sont faites surtout lorsqu'elles sont pertinentes comme l'étaient celles de Stephan.
Administrateur
Bon, mon avis rapide sur la question... ou plutôt sur la tension qui s'est installée :
1- En premier lieu Thierry pose une question précise. Stephan l'oriente vers une solution qui lui paraît appropriée (= le comportement souhaité de chaque membre ici)
2- Cette solution ne plaît pas à thierry qui le fait comprendre de façon euh... compréhensible. La question de savoir si "faux columns" est un hack ou non est légitime, par il y'a plusieurs façons de dire que cette solution ne nous plaît pas et ici la façon choisie n'est certainement pas la plus courtoise. (= comportement un peu moins souhaité)
3- Le débat s'anime, dévie du sujet initial et on commence à parler des lacunes IE et critiquer le menu non tableless... or ces sujets n'ont effectivement rien à voir avec le sujet de départ.

Je crois qu'il va nous falloir (moi y compris) nous restreindre plus souvent à répondre (ou non) aux questions posées sans digresser sur les a-côtés. Le problème est qu'à force de baigner dans les Standards, on a tendance à repérer et signaler chaque "anomalie" au risque de faire vriller les sujets.

Bref ici Thierry a eu une réponse à son problème. Elle ne lui plaît pas. Peut-être que d'autres membres viendront proposer d'autres solutions (si elles existent).
En attendant ces hypothétiques autres solutions, merci de rester simplement dans le sujet de départ..
thierry a écrit :
Après quelques recherches sur le sujet, j'ai trouvé un article de Laurent Denis intitulé Des colonnes de même hauteurs en CSS, qui semblait apporter une réponse simple et élégante à mon problème:

Des colonnes de même hauteurs en CSS

J'ai donc attribué aux trois divs l'attribut display: table-cell. Ça marche sous FF, mais il faut un display: table-cell pour les 3 divs... et sauf que la bordure de la colonne de gauche a disparu, que j'ai toujours cet espace inexplicable à droite (ou à gauche, selon le float: left/right) de la colonne droite et que, surtout, mon div conteneur principal n'est plus centré mais aligné à gauche. Sous IE, c'est toujours impeccable.

seconde version tableless de la page

Quelqu'un peut-il m'expliquer pourquoi ce code apparemment logique et qui produit un résultat correct sous IE ne done pas le même résultat sous FF


Comme je porte ma part de responsabilité dans les "tensions" nées sur ce fil, voici pourquoi ça ne marche pas avec firefox: tout simplement parce que ce n'est pas la solution expliquée dans http://blog-and-blues.org/weblog/2004/09/24/304-des-colonnes-de-meme-hauteurs-en-css qui est appliquée :
- conteneur en height=100% alors qu'il n'y a justement pas de hauteur spécifiée pour le conteneur dans mon petit essai (et ce n'est pas pour rien qu'il n'y en a pas)...
- le display: table nécessaire pour le conteneur a disparu...
- le float:none adressé à Firefox et Opera a disparu...
- etc (je n'ai pas cherché toutes les erreurs).

Bref, avant de râler sur une solution qui ne marche pas, merci de commencer par l'appliquer correctement. Je sais, elle n'est pas très bien documentée : je n'ai pas le temps de l'expliquer en détail, et, comme je l'ai dit ci-dessus, ces histoires de hauteur maîtrisées ne m'intéressent pas beaucoup.

Bon, je ne suis pas tout à fait sûr d'avoir diminué les tensions, là. Mais je suis resté dans le sujet, et j'ai efficacement, je crois, répondu au pourquoi du comment qui m'était adressé.
Modifié le 07 Feb 2005 - 09:43
1/ centrage
Comme le souligne Laurent Denis, {display: table} sur .DivPrincipal réponds au problème.

2/ espace inexplicable à droite de la seconde colonne
L'explication logique repose sur de l'arithmétique élémentaire :
largeur de .DivPrincipal (sans les bordures) = 811 = 10 + 791 + 10 pour padding-left, width et padding-right. Le contenu lui est calé sur 791 (10 +1 +153 +1 +10 +606 + 10).
je vois la question poindre : oui mais ça marche dans IE. Réponse : IE ne respecte pas le modèle de boîte standard mais son propre modèle qui inclut les padding dans width.

3/
thierry a écrit :
Si un div a un height: 100%, il doit occuper une hauteur de 100%, non?
Oui bien sur, mais as tu répondu aux questions :
- 100% de quoi (de quel élément) ?
- comment se forme la hauteur de l'élément que tu prends en référence ?
Pour ce qui te concerne tu souhaites je suppose que .DivPrincipal soit à 100% de l'élément body, et que l'élément body soit de la taille .DivColonnePrincipale.
Le moins que l'on puisse dire c'est que tu ne fais rien pour. Tu empiles des div dont la hauteur est spécifiée à 100%. Cela signifie pour chaque div, 100% de la hauteur du parent et cela ne permet pas de prélever de l'information concernant la hauteur des enfants. Dans cette indécision générale, le navigateur fait un peu ce qu'il veut (ou plutôt : agit sans rapport avec ton besoin).
Avec display: table-cell le modèle change puisque les cellules d'un tableau doivent naturellement avoir la même hauteur sur une ligne.
Pages :
Sujet clos
Aller à