[RESOLU] Solution colonnes de même hauteur de Laurent Denis

Bonjour,

J'ai utilisé pour un site la technique expliquée par Laurent denis sur son blog pour obtenir des colonnes de meme hauteur.

http://www.blog-and-blues.org/weblog/2004/09/24/304-des-colonnes-de-meme-hauteurs-en-css

http://www.test.blog-and-blues.org/colonnes/

La solution passe impeccable, mais j'ai un gros souci sous Firefox avec l'élement "select".

Dès que je le rajoute dans la colonne de gauche, l'ensemble de la colonne de droite passe en dessous et la colonne de gauche s'étire sur toute la largeur de la page.

Le problème n'apparait pas sur Opera ni sur IE, que sur Firefox.
J'ai beau englobé mon élément select avec un div de taille inférieur à la colonne de gauche , rien n'y fait, l'ensemble de la colonne de droite chasse en dessous.

Cette solution de Laurent denis date de 2004, donc je voulais savoir si quelqu'un avait trouvé une solution depuis, ou si quelqu'un à une idée du souci.

Je vous remercie d'avance.

MB
Modifié par krachot (17 Oct 2006 - 14:39)

salut

quelle intélligence !

je n'ai pas encore fouiller les css mais en visionnant les exemples...je suis ébloui.même la variante, whouà !

face à laurent denis, même version 2004, je ne peux pas grand chose mais je vais approfondir.

Bonjour,

Effectivement, moi aussi j'ai jeté un oeil, je crois bien que Mr Denis est tombé dans le css quand il était petit ...

Bon pour en revenir au problème soulevé, il est assez rebelle et à mon modeste niveau, juste un palliatif eventuel en ajoutant au bloc #gauche une position relative pour FF (html>body #gauche {float: none;})et de passez le select pour FF en absolu... Et encore le résultat n'est pas vraiment celui attendu ... Donc je suis perplexe

Effectivement, le problème est assez rebelle, qui plus est, il n'est visible que sur Firefox.

J'ai en plus remarqué que le bug apparaît seulement si la balise <option> est présente dans l'élément <select>.

Je me dis peut-être qu'il s'agit d'un bug de firefox et non du gabarit de Laurent Denis.

Je viens enfin de résoudre le problème: il ne vient ni de la solution de Laurent Denis, ni de Firefox.

En fait pour que cette mise en page soit valide sous firefox, il faut que le content-type du site soit "application/xhtml+xml" et non "text/html".

Pour ce faire, j'ai employé la technique de denis Boudreau (alias cybercodeur), pour basculer le bon content-type suivant le navigateur utilisé:
http://www.cybercodeur.net/weblog/commentaires/detailsCarnet.php?idmessage=614

bonjour,

a écrit :
"application/xhtml+xml"

?? hum , l'un des liens que tu donne mêne vers un gabarits codé en html 4.01.

les elements de formulaires ont toujours des comportements "inatendu " et plutot "frustrant" des qu'il s'agit de les stylé.

Ceci dit , ta soluce me parait compliqué ... et la page usant des display:table et compagnie , mon premier reflexe a etait de tester , un display:table-cell; sur le select , (vu que le inline-block; passe pas dans ff), et la banco ! l'affichache est correcte dans ff.

cela ne pertube en rien opera et IE s'en fout !

l'essai est donc bien a partir de cette page :
http://www.test.blog-and-blues.org/colonnes/
avec
un select dans la zone de droite qui reçoit en css
un display:table-cell;

affichage correcte dans firefoxe <EDIT !> oui correct avec editcss ,
mais ne change rien au probleme .
si le fichier est modifié , sauvegardé et chargé a nouveau dans Firefoxe, le bug perdure ... c'etait trop facile </EDIT>

++
Modifié par gcyrillus (17 Oct 2006 - 21:34)

Bonsoir,

Là, je vais cruellement vous décevoir, mais c'est la raison exacte pour laquelle je ne fais pas et je ferais plus de gabarit-type de mise en page CSS : celui-ci - mais ce n'était peut-être pas assez apparent - était un pur gag prospectif, car utiliser le display-table-cell à la date où il a été écrit était évidemment une absurdité. Et:
- à l'heure actuelle, il est à peine moins anecdotique
- sur le fond, la démarche des gabarits globaux est une erreur fondamentale, même si elle est pédagogiquement utile.

En effet :
- Utiliser aujourd'hui/demain de manière très ciblé le display-table comme solution de rechute à l'absence de display:inline-block dans FF en attendant le futur FF3.0, et dans le nouveau contexte créé par IE7... oui. Mais sous la forme d'une solution "faute de mieux" pour FF et dans des contextes précisément évalués : en aucun cas comme solution de base pour tous les navigateurs avec solution de rechute en flottant dans IE (dans cette hypothèse, la solution de base est l'inline-block et le navigateur fautif est FF).
- Plus globalement, utiliser de tels gabarits de positionnement génériques revient à fixer une présentation arbitraire avant d'avoir déterminé une structure. Alors que toute la qualité XHTML CSS consiste à faire le contraire : déterminer des stratégies de mise en page en fonction d'une structure spécifique, et éventuellement y faire de la réutilisation.

Evidemment, nous avons tous appris CSS en reproduisant des mises en page type (Ah, les premiers gabarits d'Owen Briggs !) : mais il faut être conscient qu'en consultant un "tutoriel de mise en page CSS reposant sur un gabarit type", on commet une erreur que ne justifie que la courbe d'apprentissage, et qu'il ne faut pas chercher à "forcer" son utilisation.
Modifié par Laurent Denis (18 Oct 2006 - 23:56)

bonsoir,

arf , en parlant de site accessible , je viens de me prendre une belle coupure de courant .... bougie + boite d'allumettes , y'a que ça !
et hop - 1 disque dur !

En effet , on est en plein dans tableau passé en div ... vous pouvez tester si voytre navigateur prends en charge les "display:table et compagnie" a cette adresse : http://www.editions-eyrolles.com/css2/tests/tables/tables1.htm
Pour le "gag" , ces pages (datant de 1998 ? a remettre en situation hein) sont codé en <html> et dans l'exemple a tester du tableau en div ,
(oui , oui , c'est vrai ! un tableau tout en div !)
il manque la cellule pour le texte cellule 1.1 .....

J'ai fait une petite page de test pour me rendre compte un peu mieux (a prendre tel quel ) .
j'ai repris le tableau en y inserant des imput , et le "fameux select" , histoire devoir comment ça passe a la tabulation , et sans style , j'ai repasser le faux "tfoot" en fin de flux du faux tableau pour un affichage sans style ou dans IE.

ensuite reprise du gabarit "gag" avec le select et mise en evidence du bug dans firefoxe , pour me convaincre que ça marchait pô.

puis une troisieme tentative en reprenant un peu de la methode du faux tableau .... le bug disparait dans Firefox .

On se rend compte rapidement que transformer un tableau avec des div en suivant les "display:table et compagnie" , ça ne mêment a rien , sinon faire mumuse .

le display:table-cell; a effectivement la possibilité dans certains cas de reproduire le display:inline-block ; (façon w3c et pas façon IE). Mais esseulé de sa grande famille , il reste parfois fragile .

page test , suite du gag ? http://gcyrillus.free.fr/trucs_css/essais_de_faussses_tables_en_div_dtd.html

un truc qui sert a rien
++
Modifié par gcyrillus (19 Oct 2006 - 01:16)