adn Posté 18 Septembre 2004 Posté 18 Septembre 2004 Slt, C'est les css mais c'est aussi très agaçant Dans l'exemple de sibelius ici : http://www.alsacreations.com/articles/mode...d_haut_fixe.htm Ca marche bien à condition que la colonne centrale soit toujours la plus longue ce qui n'est pas précisé, dommage ! J'espère d'avoir le pied de page qui s'aligne sur la colonne la plus longue des trois (gauche, droite et centre) , eh bien non je n'y arrive pas. Et dans mon cas le menu gauche est souvent plus long que la colonne du centre. Comment feriez-vous ?? Si sibelius passe par là ?
LaurentDenis Posté 18 Septembre 2004 Posté 18 Septembre 2004 Ca marche bien à condition que la colonne centrale soit toujours la plus longue ce qui n'est pas précisé, dommage ! ça, c'est le problème des colonnes obtenues en position absolue : les colonnes latérales sont ici totalement extraites du "flux" vertical de la page, et n'ont plus aucun effet sur les autres éléments. Pour déterminer la position verticale du pied de page, il ne reste donc que le seul élément en flux, c'est à dire la colonne centrale... J'espère d'avoir le pied de page qui s'aligne sur la colonne la plus longue des trois (gauche, droite et centre) , eh bien non je n'y arrive pas. Et dans mon cas le menu gauche est souvent plus long que la colonne du centre. Ce type de mise en page peut être aisément réalisé avec les flottants : - contenu en flux - colonnes latérales flottantes - pied de page en flux avec une propriété clear:both qui le rejette sous les flottants. PS: Raphael a un gros préjugé envers les flottants
adn Posté 18 Septembre 2004 Auteur Posté 18 Septembre 2004 MERCI C'est ce que je viens de faire, et çà marche ! Mais si je veux une colonne centrale variable en fonction de la page, là çà ne va plus le faire, non ?
LaurentDenis Posté 18 Septembre 2004 Posté 18 Septembre 2004 Que veux-tu dire par "variable en fonction de la page" ? - ton contenu et ton pied étant en flux, le pied est forcément en dessous du contenu - tes colonnes latérales étant en float et ton pied en clear:both... idem. Ou penses-tu à un problème de largeur ?
Raphael Posté 18 Septembre 2004 Posté 18 Septembre 2004 (modifié) MERCI C'est ce que je viens de faire, et çà marche ! Mais si je veux une colonne centrale variable en fonction de la page, là çà ne va plus le faire, non ? Non c'est justement le problème avec cette méthode en flottants : ils ne vont pas s'adapter automatiquement à la largeur de l'écran. C'est pourquoi je les ai évités.... mais sache qu'il n'y aura PAS de solution miracle en CSS. Modifié 18 Septembre 2004 par Sibelius
LaurentDenis Posté 18 Septembre 2004 Posté 18 Septembre 2004 (modifié) Non c'est justement le problème avec cette méthode en flottants : ils ne vont pas s'adapter automatiquement à la largeur de l'écran. ? Des width en % règlent le problème. <edit>Voir les pages d'exemple de http://openweb.eu.org/articles/initiation_float/ </edit> Modifié 18 Septembre 2004 par LaurentDenis
LaurentDenis Posté 18 Septembre 2004 Posté 18 Septembre 2004 Tiens, il arrive qu'on soit ennuyé par les 3 colonnes en flottants parce que le contenu placé en colonne central est précédé par celui du menu de gauche (dans le HTML brut) Un petit essai amusant pour commencer son HTML avec le contenu central, en intervertissant à l'écran les deux premiers flottants grâce à la position relative : body {margin: 0;padding: 0;}#gauche,#droite,#centre {margin: 1em 0;}#gauche {float: left;width: 25%;background-color: yellow;position: relative;right: 45%;}#droite {width: 25%;background-color: yellow;float: right;}#centre {float: left;width: 45%;background-color: red;position: relative;left: 27.5%;}#pied {clear: both;background-color: yellow;}<body><div id="centre">centre</div><div id="gauche">gauche</div><div id="droite">droite</div><div id="pied">pied</div></body>
adn Posté 18 Septembre 2004 Auteur Posté 18 Septembre 2004 ouais. C'est pas si bien foutu que çà le css ! Les floats çà marche pour le pied de page mais pour ce qui est de la colonne centrale variable, t'es tout de même bloqué si ta colonne de gauche et ta colonne de droite ont une taille fixe. La je ne vois pas de solution. Sibelius, Je pense que le float est tout de même plus adapté car on ne pas prévoir la taille des colonnes de gauche ou de droite par avance, sauf si on est sur de son coup J'ai vu qq part le css3, peut-être nous proposera-t-il des attributs plus adaptés ?
LaurentDenis Posté 18 Septembre 2004 Posté 18 Septembre 2004 (modifié) ouais.Les floats çà marche pour le pied de page mais pour ce qui est de la colonne centrale variable, t'es tout de même bloqué si ta colonne de gauche et ta colonne de droite ont une taille fixe. La je ne vois pas de solution. body {margin: 0;padding: 10px;}#gauche, #droite,#centre {margin-bottom: 10px;}#gauche {float: left;width: 120px;border: 1px solid;}#droite {float: right;width: 120px;border: 1px solid;}#centre {margin: 0 130px;border: 1px solid;}#pied {clear: both;border: 1px solid;}<body><div id="gauche">gauche</div><div id="droite">droite</div><div id="centre">centre</div><div id="pied">pied</div></body> Tout est affaire de compromis Modifié 18 Septembre 2004 par LaurentDenis
Raphael Posté 19 Septembre 2004 Posté 19 Septembre 2004 #centre { margin: 0 130px; border: 1px solid; } On en revient au problème de départ, non ? Si "centre" s'allonge, les blocs de côté ne suivent pas le mouvement Ex : <div id="centre"> <p>centre</p> <p>centre</p> <p>centre</p> <p>centre</p> </div>
LaurentDenis Posté 19 Septembre 2004 Posté 19 Septembre 2004 On en revient au problème de départ, non ?Si "centre" s'allonge, les blocs de côté ne suivent pas le mouvement J'étais sûr qu'on ariverais là : le problème, en fait, ce n'est pas la gestion des flottants ni des largeurs, mais cette fichue idée d'avoir des arrière-plan et des bordures de colonnes de même hauteur, quelque-soit le contenu ! - pour les arrière-plans, ça se simule en jouant sur l'arrière-plan du bloc conteneur initial - pour les bordures, là, seul un tableau peut le faire de manière fiable. En effet, il n'existe en CSS2 aucun mécanisme permettant d'associer le rendu de la hauteur d'éléments visuellement juxtaposé, hormis: - display: table-cell (très mal supporté) - min-height / max-height (mauvaise idée et très mal supporté)
Raphael Posté 19 Septembre 2004 Posté 19 Septembre 2004 ais cette fichue idée d'avoir des arrière-plan et des bordures de colonnes de même hauteur, quelque-soit le contenu ! Le problème est qu'il s'agit d'une "fichue" idée extrêmement courante. Le fait de dire : "oui mais c'est mal de penser comme ça, il faut penser différemment" ne résoud pas le problème. Au contraire, je trouve que c'est une façon de justifier une carence évidente des CSS. Bien sûr cette carence s'explique aisément par le fait qu'un document n'est pas uniquement destiné à s'afficher sur un écran et que dans tous les autres cas le concept de hauteur n'a pas toujours lieu d'être.... mais en attendant le media screen doit-il être sacrifié ?
LaurentDenis Posté 19 Septembre 2004 Posté 19 Septembre 2004 Le fait de dire : "oui mais c'est mal de penser comme ça, il faut penser différemment" ne résoud pas le problème.Au contraire, je trouve que c'est une façon de justifier une carence évidente des CSS. Ma formulation était humoristique : loin de moi l'idée de dire que "c'est mal de penser comme ça"
LaurentDenis Posté 19 Septembre 2004 Posté 19 Septembre 2004 La suite de cette discussion portant sur le sujet "C'est bien, c'est mal de penser ça" a été déplacée dans un nouveau sujet.
Bobe Posté 19 Septembre 2004 Posté 19 Septembre 2004 je trouve que c'est une façon de justifier une carence évidente des CSS. Quelle carence ? Laurent Denis a indiqué les mécanismes prévus pour ce type de mises en page dans le message qui précède le tien.
Raphael Posté 19 Septembre 2004 Posté 19 Septembre 2004 Quelle carence ? Laurent Denis a indiqué les mécanismes prévus pour ce type de mises en page dans le message qui précède le tien. Les mécanismes CSS ne permettent pas de résoudre le problème initial : - avoir des cellules adjacentes qui se suivent l'une l'autre (lorsque gauche s'allonge, droite s'allonge aussi et vice-versa) + un pied de page - avoir une partie de largeur fixe (ex: gauche) et l'autre qui s'adapte au reste de la largeur d'écran Le code de Laurent ne résoud manifestement pas ces problèmes, comme tout le monde l'a reconnu.
Bobe Posté 20 Septembre 2004 Posté 20 Septembre 2004 CSS permet de faire cela. Je te renvoie au chapitre 17 de la spécification
Raphael Posté 20 Septembre 2004 Posté 20 Septembre 2004 CSS permet de faire cela. Je te renvoie au chapitre 17 de la spécification Tu sais très bien ce que je veux dire, je connais aussi les table-cell... C'est ce qui m'énerve le plus chez les puristes des specs : oui les CSS sont fabuleuses et omnipotentes, et non elles ne s'appliquent pas encore à la réalité actuelle parfois. Admettons-le un jour ! Je parle des CSS d'aujourd'hui, qui fonctionnent sur les navigateurs d'aujourd'hui (dont IE fait partie). Bien sûr qu'en théorie les CSS permettent de TOUT faire, mais en pratique tu ne peux pas dire aujourd'hui : "Je vais résoudre ce problème en utilisant les CSS, tout en ayant un site qui s'affiche chez mes clients (qui utilisent IE)"
Bobe Posté 20 Septembre 2004 Posté 20 Septembre 2004 (modifié) Tu sais très bien ce que je veux dire, je connais aussi les table-cell... Toi oui. Les lecteurs de ce fil, pas forcément. C'est ce qui m'énerve le plus chez les puristes des specs : oui les CSS sont fabuleuses et omnipotentes, et non elles ne s'appliquent pas encore à la réalité actuelle parfois.Admettons-le un jour ! Non, les CSS comme tout en ce bas monde ne sont pas parfaites. Ma démonstration avait juste pour but de montrer que ce que veux l'initiateur de ce fil est possible avec CSS2, donc dire qu'il y a une carence des CSS est complètement faux et c'est ce que je tenais à mettre en lumière. Par contre, c'est effectivement non géré par certains navigateurs incontournable du marché et donc non utilisable à l'heure actuelle pour un site grand public. À l'avenir, tu devrais faire plus attention de dissocier clairement l'aspect théorique et l'aspect pratique des choses pour ne pas induire les gens en erreur. Modifié 20 Septembre 2004 par Bobe
LaurentDenis Posté 20 Septembre 2004 Posté 20 Septembre 2004 Avant d'en venir aux mains, permettriez-vous à un ex-intégriste de proposer ce qui suit, et qui n'est qu'une reformulation de vos propos respectifs ? Les propriétés CSS simulant un tableau (diplay: table-cell, etc) permettent effectivement de gérer les hauteurs dans un multicolonnage, comme Raphaël le souhaite. Mais il est vrai qu'elles ne sont pas supportées par certains navigateurs. Donc : - le rendu recherché est obtenu dans les navigateurs qui en sont capables, - il se dégrade tout à fait correctement (sans obstruction) dans les navigateurs qui ne le peuvent pas, en attendant qu'ils améliorent leur support de CSS C'est peut-être cela qui compte le plus dans CSS screen: cette idée de "dégradation non obstructive" selon les capacités du navigateur graphique, qui libère l'auteur de l'obsession d'un rendu identique et illusoire dans toutes les configurations utilisateurs.
Raphael Posté 21 Septembre 2004 Posté 21 Septembre 2004 (modifié) - il se dégrade tout à fait correctement (sans obstruction) dans les navigateurs qui ne le peuvent pas, en attendant qu'ils améliorent leur support de CSS Tu parles de "dégradation correcte", alors que si je ne me trompe pas (on me corrigera au besoin), il me semble que l'effet qui peut se produire sur IE est loin de ce qu'on peut appeler "correct" : il se peut très bien qu'un bloc passe complètement pardessus le footer, ou pire, que le footer s'affiche au-dessus d'une partie de contenu importante. Je suis entièrement pour une dégradation souple et ne pas chercher un affichage identique... mais dans ce cas précis, je pense sincèrement que en pratique les CSS ne permettent pas de résoudre ce problème. EDIT : euh... tu n'avais pas séparé le sujet pour plus de clarté ? Modifié 21 Septembre 2004 par Sibelius
LaurentDenis Posté 21 Septembre 2004 Posté 21 Septembre 2004 (modifié) il se peut très bien qu'un bloc passe complètement pardessus le footer, ou pire, que le footer s'affiche au-dessus d'une partie de contenu importante. Jamais si footer est en flux+clear:both et si les colonnes sont en flux ou float : - le footer sera forcément en dessous de la colonne en flux - ET (inclusif) il sera forcément en dessous de la colonne en float la plus "longue". Dans IE, et autres navigateurs ne supportant pas "display:table" etc., les colonnes en float et en flux ne seront pas d'égale hauteur, et le footer sera en dessous. C'est tout. Ce sera juste parfois un peu moche selon le style du conteneur ou du body. Bon, maintenant, je suppose que tu ne seras pas convaincu tant que tu n'auras pas un exemple sous les yeux... Et si tu l'écrivais, cet exemple, histoire de te réconcilier avec les float ? Modifié 21 Septembre 2004 par LaurentDenis
Raphael Posté 21 Septembre 2004 Posté 21 Septembre 2004 Bon, maintenant, je suppose que tu ne seras pas convaincu tant que tu n'auras pas un exemple sous les yeux... Non, non, j'en suis convaincu. D'ailleurs tu me le confirmes : "le footer sera en dessous."... ce que tu trouves "un peu moche" pourrait très bien se révéler affreux, surprenant ou même handicapant si - comme c'est souvent le cas - ce footer affiche des informations essentielles comme les coordonnées d'une entreprise.
LaurentDenis Posté 22 Septembre 2004 Posté 22 Septembre 2004 Bon, je savais bien qu'il faudrait un exemple : Colonnes de même hauteur. "en-dessous" voulait dire "verticalement", pas dans le sens d'un empilage de div
Raphael Posté 22 Septembre 2004 Posté 22 Septembre 2004 Bon, je savais bien qu'il faudrait un exemple : Colonnes de même hauteur. "en-dessous" voulait dire "verticalement", pas dans le sens d'un empilage de div <{POST_SNAPBACK}> Bien, voilà un joli exemple d'utilisation de table-cell en effet Il faudrait en parler un peu car ce genre de question est à la mode partout. Sur le principe, je vois beaucoup mieux ta "dégradation correcte". En fait, tu utilises les deux techniques cumulées : table-cell pour les navigateurs standards et un petit hack avec un simple float+clear pour IE, c'est bien ça Dans ton exemple, tes 2 "cellules" centrales sont réparties en 70% / 30% de la largeur du conteneur. Est-il possible d'avoir, comme il est demandé dans le cahier des charges de départ () d'avoir : une colonne de largeur fixe et l'autre qui prend le reste de la largeur ? Puisque c'est bien le problème depuis le début. En clair est-ce que ça fonctionne avec "gauche" à 10em et "droite" à "auto" ? PS : pourquoi un "border: 10px solid;" sur le footer, ça change quoi ?
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant