Guest exabs Posté 4 Avril 2004 Posté 4 Avril 2004 J'ai beau chercher, je ne trouve pas de solution définitive pour la gestion de 2 colonnes en CSS ! Par solution définitive, j'entends pouvoir gérer une hauteur de colonne gauche supérieure à la colonne droite ET vice versa... en fonction du contenu de la page. Pour être plus parlant, rien ne vaut quelques graphiques Je cherche une solution compatible avec ces deux cas de figure: Cas 1 : la colonne gauche est plus haute que celle de droite Cas 2 : la colonne gauche est moins haute que celle de droite Bien sur la hauteur de l'ensemble de la page est variable en fonction du contenu... Que ce soit avec le paramètre float ou avec une position absolue de la colonne de gauche rien ne fonctionne. Le tableau est-il donc la seule solution viable ?
Fruge Posté 4 Avril 2004 Posté 4 Avril 2004 Salut, J'ai eu le même type de souci, avec un systeme avec 3 colonnes (col droite (en float right) + col gauche (en float left) + partie principale au centre). En mettant un pied de page avec comme attribut un "clear: both;", j'ai reussi a obtenir ce que je voulais, c'est a dire que les trois colonnes avait la meme longueur, quels que soient les remplissages (plus ou moins longs) de chaque colonne.... Bon courage, Fruge.
Country Posté 4 Avril 2004 Posté 4 Avril 2004 J'avai repéré un article là dessus sur Alsacréations, je pense que tu devrai y trouver ton bonheur http://www.alsacreations.com/articles/cellules/
Guest exabs Posté 4 Avril 2004 Posté 4 Avril 2004 J'ai eu le même type de souci, avec un systeme avec 3 colonnes (col droite (en float right) + col gauche (en float left) + partie principale au centre). En mettant un pied de page avec comme attribut un "clear: both;", j'ai reussi a obtenir ce que je voulais, c'est a dire que les trois colonnes avait la meme longueur, quels que soient les remplissages (plus ou moins longs) de chaque colonne... Avec l'attribut float, le problème que j'ai rencontré est que si la colonne de gauche est moins haute que la colonne de droite, le contenu de la colonne de droite se place en dessous de la colonne de gauche... Mais tout compte fait en attribuant un padding gauche de la largeur de la colonne de gauche à celle de droite, cela semble fonctionner.
Guest exabs Posté 4 Avril 2004 Posté 4 Avril 2004 J'avai repéré un article là dessus sur Alsacréations, je pense que tu devrai y trouver ton bonheur http://www.alsacreations.com/articles/cellules/ J'ai testé ta solution sur cette page : http://www.alsacreations.com/articles/modeles/g_fixe.htm mais tu constateras que si la hauteur de ton menu dépasse la hauteur du contenu, le menu "transperce" le pied de la page. Avec la position absolue sur la colonne de gauche cela ne fonctionne pas dès que le contenu devient moins haut que le menu. Avec float : left et un padding gauche de la largeur du menu cela fonctionnera et le pied sera bien déplacé vers le bas si la hauteur du menu devient supérieure à celle du contenu.
ams51 Posté 4 Avril 2004 Posté 4 Avril 2004 J'avai repéré un article là dessus sur Alsacréations, je pense que tu devrai y trouver ton bonheur http://www.alsacreations.com/articles/cellules/ Salut, J'utilise une technique un peu similaire à celle donnée par alsacréation. En gros j'ai un conteneur (<div id="site"> dans mon cas) mais j'ai un menu (colonne 1 <div id="menu">) en float left et largeur fixe de 150px et un contenu (colonne 2 <div id="contenu">) avec une marge à gauche fixe de 160px J'ai essayée le clear:both sur le pied de page mais j'ai des bugs d'affichage sous IE6... J'ai trouvé un truc (que je qualifie de bidouille, ce qui ne me plait pas trop mais c'est le seul truc qui fonctionne "correctement"), je donne une hauteur fixe au conteneur (div id="site") de 1 pixel... Et ben croyez le ou non, ça résoud tous mes pb sous IE6 Attention, je n'ai pas encore testé sous d'autres navigateurs (d'ailleurs si vous pouvez me dire si ça ressort bien sur opera ou mozilla je vous en serai éternellement reconaissant). pour voir le résultat : mangeur de cigogne (menu plus petit que le contenu) mangeur de cigogne (menu plus grand que le contenu) le CSS est à cette adresse Seul hic, quand le contenu est plus petit, la couleur de fond du conteneur (div id="site") apparait au grand jour sur le contenu (vous me suivez ??). Généralement le contenu est plus grand que le menu donc on donne la même couleur de fond au conteneur et au menu (j'en vois qui ne suivent plus )
LaurentDenis Posté 4 Avril 2004 Posté 4 Avril 2004 (modifié) Résultat aussi bien dans Opera que dans FireFox (Win) : le menu apparaît sur la div site, la marge gauche est vide. Il vaut mieux développer ses CSS pour un navigateur ayant un meilleur support CSS2 (indifféremment Opera ou Moz), puis adapter aux lacunes d'IE Win. [edit] Pardon, j'oubliais l'important : souvent, les problèmes de mise en page à base de colonne en float tiennent en fait au box-model Microsoft / standard, autrement dit à des dimensions trop strictement calculées en margeur... Modifié 4 Avril 2004 par LaurentDenis
Guest exabs Posté 4 Avril 2004 Posté 4 Avril 2004 Attention, je n'ai pas encore testé sous d'autres navigateurs (d'ailleurs si vous pouvez me dire si ça ressort bien sur opera ou mozilla je vous en serai éternellement reconaissant). Sur NS 6.2.2 le menu totalement décalé sur le contenu, le pied de page se retrouve en haut.
ams51 Posté 4 Avril 2004 Posté 4 Avril 2004 merci... j'ai corrigé mon css, du coup ma page de test ne fonctionne plus comme je veux... fichus navigateurs
Monique Posté 4 Avril 2004 Posté 4 Avril 2004 Bonjour, Cette solution répond-t-elle à tes souhaits, exabs ? paul o'brien web design Elle est basée sur une valeur négative de margin-left pour la colonne de gauche. L'auteur a testé avec succès sur PC (IE5, 5.5 , 6, Mozilla 1.2 , Firebird 0.6.1, Opera7,Netscape 6.2), sur Mac (Firebird, Netscape 6, 7).
Guest exabs Posté 4 Avril 2004 Posté 4 Avril 2004 Cette solution répond-t-elle à tes souhaits, exabs ?paul o'brien web design Elle est basée sur une valeur négative de margin-left pour la colonne de gauche. Avec l'attribut float, le problème que j'ai rencontré est que si la colonne de gauche est moins haute que la colonne de droite, le contenu de la colonne de droite se place en dessous de la colonne de gauche... Mais tout compte fait en attribuant un padding gauche de la largeur de la colonne de gauche à celle de droite, cela semble fonctionner. J'ai adopté une solution similaire qui me semble plus logique, au lieu d'attribuer un margin-left négatif à la colonne de gauche, j'attribue un padding-left de la largeur de la colonne de gauche à la colonne de droite...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant