28172 sujets

CSS et mise en forme, CSS3

(résolu) 3 colonnes (modèle Alsacreations) : libérez la hauteur :) !

Bonjour,

Je souhaite faire un petit "bloc" de 3 colonnes + header + footer.
Ce bloc ne sera pas inclus dans un autre <div>. Il sera positionné juste après le <body> en fait.

Evidemment le modèle n°5 de cette page d'Alsacreations me convient parfaitement : http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS
Cependant quand je rempli mes colonnes avec mon contenu, la colonne de gauche est plus "remplie" que les autres et le contenu de cette colonne de gauche déborde sur le footer, sans que la colonne ne s'allonge en hauteur :o.
Par contre si je rajoute du contenu dans la colonne centrale cela allonge la hauteur des 3 colonnes.

Comment faire pour que les 3 colonnes descendent "simultanément" quelque soit la colonne qui prend plus de contenu que les autres (le contenu sera généré dynamiquement, je ne peux prévoir à l'avance la place prise par mes colonnes en terme de hauteur) s'il vous plait ?


Je vous souhaite une bonne journée Smiley smile .
Modifié par Yazerty (25 Apr 2008 - 00:00)
Hello,

Yazerty a écrit :
Cependant quand je rempli mes colonnes avec mon contenu, la colonne de gauche est plus "remplie" que les autres et le contenu de cette colonne de gauche déborde sur le footer, sans que la colonne ne s'allonge en hauteur :o.

Normal, les colonnes sont positionnées absolument. Pour utiliser cette mise en page, il faut obligatoirement que la colonne du milieu soit la plus haute des trois... sinon ça pète.

Cette solution ne me semble pas adaptée à ton cas, je peux voir un exemple graphique de ce que tu aimerais obtenir au final ?

A mon avis il va falloir que tu te penches sur la méthode des colonnes factices...
Merci pour ta réponse BeliG Smiley smile .

BeliG a écrit :

Cette solution ne me semble pas adaptée à ton cas, je peux voir un exemple graphique de ce que tu aimerais obtenir au final ?
A mon avis il va falloir que tu te penches sur la méthode des colonnes factices...


En fait je veux faire quelque chose d'assez "basique" :
- header : contenu classique, hauteur sans doute fixée (mais ce n'est pas le problème)
- 3 colonnes : chaque colonne peut avoir un contenu variable. Des fois la colonne de gauche sera plus grande que celle de droite et du centre, des fois ça sera l'inverse, et d'autres fois totalement autre chose, bref je ne peux pas définir à l'avance des hauteurs pour chacune de mes 3 colonnes.
- footer : contenu classique, hauteur sans doute fixée (mais ce n'est pas le problème)

La méthode de la "triche par l'image" ne me plait pas trop, je préfèrerais très nettement quelque chose de plus "construit".
Ca doit bien exister non Smiley sweatdrop ?
Yazerty a écrit :
- 3 colonnes : chaque colonne peut avoir un contenu variable. Des fois la colonne de gauche sera plus grande que celle de droite et du centre, des fois ça sera l'inverse, et d'autres fois totalement autre chose, bref je ne peux pas définir à l'avance des hauteurs pour chacune de mes 3 colonnes.

[...]

La méthode de la "triche par l'image" ne me plait pas trop, je préfèrerais très nettement quelque chose de plus "construit".
Ca doit bien exister non Smiley sweatdrop ?


Eh bien non Smiley langue

T'as le choix entre :
- les colonnes factices,
- un javascript,
- ou un tableau.

A toi de voir Smiley cligne
Le javascript et le tableau sont totalement exclu Smiley smile .

En fait les "colonnes factices" ne sont pas réellement "factices". Elles existent bel et bien mais c'est simplement une astuce consistant à faire 3 colonnes qui ont en réalité des hauteurs différentes et à mettre une image de fond commune aux 3 colonnes pour donner "l'impression" qu'elles ont la même hauteur, c'est bien ça ?
Je crois que je vais devoir m'y résigner...
Yazerty a écrit :
Ca doit bien exister non Smiley sweatdrop ?

Oui, ça s'appelle display: table-cell.

Sinon, je ne vois pas d'inconvénient à utiliser des techniques de trompe-l'oeil quand il s'agit uniquement d'obtenir un rendu visuel non significatif mais plousse joulie. Smiley smile
Modifié par Florent V. (23 Apr 2008 - 19:36)
Je crois avoir lu que le "table-celle" n'était pas supporté de façon correcte par tous les navigateurs, si :- ?
Yazerty a écrit :
Je crois avoir lu que le "table-celle" n'était pas supporté de façon correcte par tous les navigateurs, si :- ?
non Smiley ravi
Je pense ke je cherche à faire la meme chose que toi ?


Note de modération: ouvrir un nouveau sujet. Merci.
Modifié par Florent V. (24 Apr 2008 - 17:10)
a écrit :
Yazerty: Ça doit bien exister non?
Florent: Ça existe.
Yazerty: Mais ça n'est pas implémenté par tous les navigateurs!
Florent: Ben tu demandes si ça existe; moi je réponds à la question...

D'où: face à une lacune des navigateurs (nommément: Internet Explorer 6-7), soit on abandonne l'idée soit on utilise un moyen détourné. Le choix entre abandon et moyen détourné dépendra de l'importance de la chose à réaliser, des solutions de design alternatives («on peut faire ceci à la place»), de l'efficacité ou non du moyen détourné, du temps nécessaire à sa mise en oeuvre, etc.
Modifié par Florent V. (24 Apr 2008 - 17:10)
Mon dernier message n'était pas une exclamation mais une interrogation (":-?") Smiley cligne .
Mais merci tout de même de cette réponse, qui me fait définitivement prendre le chemin de la technique "image de fond".
En prime tes commentaires sont toujours intéressant d'un point de vue théorique Florent Smiley smile .

Merci à vous 2 Smiley smile . et Bon WE !
Sujet clos
Aller à