Hello,
 
J'ai d'abord cherché sur Google mais je n'ai pas trouvé de solution convaincante.
 
Voilà mon problème.
 
Je voudrais faire une page avec :
 
- une colonne de gauche de largeur fixée, *avec sa propre image de background* répétée verticalement,
- une colonne de droite de largeur fixée, *avec sa propre image de background* répétée verticalement,
- une colonne centrale qui occupe l'espace entre les deux, *avec sa propre image de background* répétée sur x et y.
 
Les colonnes latérales ne contiennent pas de texte et sont purement décoratives.
La colonne centrale contient le texte, les images, etc.
 
Les bords inférieurs des 3 colonnes doivent être alignés.
 
Si le texte de la colonne centrale n'est pas suffisant pour remplir toute la hauteur de la fenêtre, les bords inférieurs des 3 colonnes doivent quand même être allignés sur le bas de la fenêtre.
 
La page doit marcher dans Opera, Mozilla et IE (les dernières versions), sans tables ni javascript. Si seul IE pose problème, ça n'est pas trop grave, je peux m'arranger.
 
 
Je m'arrache les cheveux depuis des jours sur ce problème.
Je commence à penser qu'il n'existe pas de solution purement css qui marche sur tous les browsers qui m'intéressent.
 
Mon prochain post décrira les solutions que j'ai déjà essayées.
 
J'apprécierais beaucoup votre aide...

Voilà les solutions que j'ai déjà essayées :
 
1)
- une div pour la colonne centrale positionnée absolument à droite, à gauche et en haut et une min-height de 100%,
- deux div pour les colonnes latérales, enfants de la colonne centrale dans le markup, et positionnées absolument avec une hauteur de 100% (de la colonne centrale, donc).
 
-> ne marche pas parce qu'il est interdit d'utiliser height: 100%; si la hauteur du parent n'est pas fixée, ce qui est le cas de la colonne centrale vu que son contenu est variable.
 
2)
- une div pour la colonne centrale positionnée absolument à droite, à gauche et en haut et une min-height de 100%,
- deux div pour les colonnes latérales positionnées absolument par rapport à la colonne centrale, en fixant top:0px; et bottom:0px; pour que les colonnes latérale fassent toujours la même hauteur que la colonne centrale.
 
-> ne marche pas parce qu'Opera ne veut pas qu'on fixe à la fois top et bottom (IE non plus mais c'est pas un problème because expressions css d'IE).
 
3) ma bonne idée d'hier soir, mais qui ne marche pas non plus:
- une div pour chaque colonne, imbriquées les unes dans les autres, avec la colonne centrale au coeur de l'imbrication.
 
Ainsi, quand la colonne centrale s'allonge, les colonnes de droites et de gauche s'allongent aussi automatiquement puisque la colonne centrale fait partie de leur contenu.
 
Seulement il est impossible de spécifier min-height:100%; pour la colonne centrale dans ce cas, puisque son parent (la colonne de gauche ou de droite) n'a pas de hauteur fixée.
 
4) d'autres trucs dont je ne me souviens plus mais qui foirent tout autant.
 
 
Ca serait si simple avec une table (enfin je présume parce que j'ai jamais utilisé de tables, je suis nouveau dans le domaine)...
 
Je pense que je vais faire une petite table pour les 3 colonnes, et tout le reste en css.
 
Sauf si vous me trouvez une solution miracle !
 
*prie et implore*

t'a regardé les tutoriels sur alsacreation, et a list apart ?

"Floater" les colonnes latérales ne m'aide pas non plus.
 
Il est impossible dans ce cas de spécifier qu'elles doivent s'étendre jusque dans le bas de leur parent, la colonne centrale.
 
Désespoir.

Utilise un tableau (je crois pas qu'il y ai de solution, mais je peux me tromper)

 
Sur a list apart oui...
Alsacreation je ne connais pas...je vais aller voir...
 
Mais je suis sûr à 95% que je ne trouverai pas ce que je veux dans des tutoriaux pour débutants. A chaque fois c'est de l'arnaque, ça n'est jamais vraiment équivalent à une table avec 3 colonnes.

 
C'est ce que je vais finir par faire...
Mais ça me désespère parce que j'avais tout fait en css jusqu'ici et c'était pas mal...
 
J'ai une solution avec une scrolling div:
 
http://users.skynet.be/mon.mignon. [...] lfentest8/ (les colonnes latérales sont très dépouillées mais ça n'est pas fini)
 
mais je voudrais bien supprimer la scrolling div (c'est moche et mozilla n'aime pas ça) pour faire une page "normale" avec une scrolbar générale. C'est là que ça coince...

celui là est bien...
http://www.alsacreations.com/articles/modeles/

ta page initiale fait 640ko  
 
faire joli, c'est très bien, mais faudrait songer à commencer par faire utilisable  
(et firefox n'a aucun problème avec overflow: auto, je sais pas de quoi tu parles quand tu cites mozilla )

 
Je sais que la page prend trop de place, j'ai pas encore cherché à optimiser tout ça mais je pourrai réduire de 2/3 sans problèmes je pense. Et dans mon cas une fois qu'on a mis les images en cache sur la home page, ce sont toujours les mêmes qui reviennent dans tout le site.
 
 
Firefox et Mozilla ne supportent pas le scrolling à l'aide de la molette de la souris, ni les raccourcis claviers avec les scrolling div's (c'est un bug connu qui a été corrigé dans la dernière version bêta de mozilla je pense).
 
 
Bref !
C'est pas ça le problème...
Merci du conseil ceci dit, je vais essayer d'améliorer la taille de la page...

 
Merci pour le lien.
 
Mais non, après vérification, c'est de nouveau de l'arnaque : les deux colonnes latérales ne s'étendent pas *vraiment* jusque dans le bas. Ca donne simplement l'illusion que c'est le cas. Si on ajuste un bord au deux colonnes latérales, ou qu'on leur met une image de background, c'est fichu.

Le problème semble résolu (ça me parait trop beau mais bon).
 
En fait Opera et Mozilla admettent parfaitement qu'on leurs donne à la fois top et bottom en positionnement absolu. C'est moi qui avait dû faire un gaffe au moment ou j'ai essayé.
 
Par contre avec internet explorer ça va foirer pour deux raisons :
- il ne comprend pas min-height,
- il n'admet pas à la fois top et bottom.
 
Mais je pense qu'il y a moyen de contourner ces deux problèmes-là avec IE.
 
Si ça marche je posterai la solution.

Gaffe, il y a un bug sous Firefox (et sous IE): bottom se rapporte non pas à la page complète mais à l'espace vu (la partie de page affichée par le browser quand t'es tout en haut)...

 
 
Ah ok. Merci du conseil.
(mais ça doit être un bug facilement contournable je pense, ça)
 
Enfin dans mon cas je n'ai pas ce problème puisque l'élément parent de celui que je positionne absolument n'est pas body.
 
Enfin je posterai ma petite solution (ça se présente bien là) !

en même temps je comprends pas pkoi tu te fais chier à ce point : sachant que les limitations actuelles des navigos t'en empeches, pkoi tu fais pas un tableau à 3 colones ?
 
en plus tt solution sera forcément un hack dégueulasse pour etre cross platform...Bref...

ou un design en 2 colonnes  
ou même un design moins orienté designer et plus orienté web

 
Bah je sais pas.
Un caprice probablement.
 
Non mais jusqu'à il y a 2 semaines j'avais jamais fait de site web moi.
Alors je débarque, je sais qu'en gros il va me falloir des tableaux, je fais des recherches google pour voir comment je vais m'y prendre, et là je tombe sur des "WARNING!!! Tableaux pas bien !!! CSS mieux !!!".
 
Pour un débutant y a de quoi se poser des questions...
Alors je me suis dit que j'allais apprendre les css plutôt que les tableaux...
Mais visiblement c'est pas encore bien au point leur truc...
 

 
Oui c'est pas con. Je finirais peut-être par faire un tableau alors.

rien t'empeche de faire un tableau à 3 colonnes tout con, et de bien mettre des div logiques dedans...
 
le tout piloté par des CSS...
 
faut pas etre plus royaliste que le roi : ca marche pas ca marche pas, ca sert à rien de te forcer...g vu des tutos de layout en 3col avec des hacks immondes, qui exploitent tous les bugs possibles...à lafin tu comprends meme plus la CSS...je suis désolé, mais tant au niveau philosophique qu'au niveau pratique, je préfère un tableau vilain qui prend 5 lignes mais qui sera tjs valide dans 10 ans, sans compter que ta page restera valide XHTML, plutot qu'un hack dégueu qui se fera foutre en l'air à la prochaine version d'IE selon les bugs qu'ils décideront de corriger...
 
g encore pas bien compris comment exploiter des bugs ct respecters les standards...

Oui je vois ce que tu veux dire et je suis d'accord.
 
Je vais surement remplacer tout ça par un petit tableau.
 
Mais tout de même, avant ça j'aimerais bien résoudre momentanément mon problème avec des css, ne fut-ce que par satisfaction personnelle. C'est en bonne voie là.

Marche pas non plus avec un tableau.
 
J'ai besoin d'un footer dans la colonne du milieu alors joyeusement je le positionne absolument avec "position: absolute; bottom: 0px;" mais voilà, y a un bug dans Mozilla et les autres browsers basés sur Gecko, ils ne supportent pas le positionnement absolu par rapport à un élément d'un tableau. Par contre ça marche nickel avec IE. Pour une fois.
 
Alors je reformule le problème :
 
Comment placer un footer dans le bas de la colonne centrale d'une table à 3 colonnes ?