18068 sujets

Questions générales et questions de débutants

[Résolu] Page sur toute la hauteur - Reloaded

De nouveau moi ! lol

J'ai suivi ce tuto : http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-2.html pour faire en sorte que la page prenne toute la hauteur même si elle n'a pas assez de contenu...

Malheureusement, y'a un hic ! Le tuto est prévu pour une mise en page normale avec un footer, seulement j'utilise une mise en page plus complexe, header-3colonnes-footer (j'vous ai d'ailleurs déjà bien emm**** avec celle-ci lol) et je ne sais pas trop où placer les instructions du tuto...

De plus, il y a une petite manip pour IE et la hauteur à 100%, seulement j'utilise une CSS externe donc je ne sais pas comment placer la manip : Dans la CSS ou dans chacun des fichiers HTML ?

Les paragraphes "premier-element" et "dernier-element", je les place à l'entrée du conteneur pour le 1er et à la sortie du même conteneur pour le second ? Je les place dans la colonne centrale ? Je suis (de nouveau) un peu perdu...

Je suppose que vu que c'est à la fois les 3 colonnes qui doivent s'étirer vers le bas de la fenêtre, je devrai créer un bloc entourant ces trois colonnes et y inclure les instructions du tuto ? Car j'ai essayé d'utiliser le tuto par rapport au conteneur, sans résultat ! Le footer se met bien au bas de la page, mais les trois colonnes ne s'étirent pas jusqu'à lui...

J'ai un peu peur d'essayer et d'encore m'embrouiller jusqu'à l'extrême... Smiley rolleyes
Modifié par SolykZ (25 Nov 2006 - 19:22)
SolykZ a écrit :
J'ai suivi ce tuto : http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-2.html pour faire en sorte que la page prenne toute la hauteur même si elle n'a pas assez de contenu...

Bon ben je sens que je vais faire un peu de service après-vente, moi. Smiley biggrin

SolykZ a écrit :
Malheureusement, y'a un hic ! Le tuto est prévu pour une mise en page normale avec un footer, seulement j'utilise une mise en page plus complexe, header-3colonnes-footer

En fait, ce tutoriel présente une structure avec une « page » globale sur (au minimum) toute la hauteur, et un pied de page qui vient se placer tout en bas. Mais rien n'empêche de remplir la « page » avec tout ce que l'on veut, y compris un header, deux ou trois colonnes, une pièce-montée, un poisson rouge, etc.

Concrètement, on a la structure globale suivante :
<body>
<div id="page">
	<h1 id="premier-element">…</h1>
	…
	Autant de contenu que l'on voudra.	
	…
	<p id="dernier-element">…</p>
	
	<div id="piedpage">Pied de page</div>
</div>
</body>

Et on va donc l'adapter ainsi :
<body>
<div id="page">
	<div id="entete">...</div>
		
	<div id="colonne1">...</div>
	<div id="colonne2">...</div>
	<div id="contenu">...</div>

	<div id="piedpage">Pied de page</div>
</div>
</body>

Ce n'est bien sûr qu'une suggestion. Ce qui est important, c'est que TOUS les éléments soient placés dans la div#page, et que le pied de page soit placé en bas, également à l'intérieur de cette div#page (en fait techniquement il peut être au début ou à la fin, vu qu'il est ensuite positionné en absolu indépendamment de sa place dans le code, mais il sera plus logique de le garder à la fin).

SolykZ a écrit :
De plus, il y a une petite manip pour IE et la hauteur à 100%, seulement j'utilise une CSS externe donc je ne sais pas comment placer la manip : Dans la CSS ou dans chacun des fichiers HTML ?

Il s'agit de fournir à IE, via des commentaires conditionnels, une feuille de style que lui seul pourra lire. Ces commentaires sont des commentaires HTML (les autres navigateurs les ignoreront totalement), et doivent donc être présents dans chaque page HTML. Ensuite, ils peuvent englober soit une feuille de style interne (avec balises <style type="text/css">...</style>), soit un appel de feuille de style externe (via une balise link par exemple).

SolykZ a écrit :
Les paragraphes "premier-element" et "dernier-element", je les place à l'entrée du conteneur pour le 1er et à la sortie du même conteneur pour le second ? Je les place dans la colonne centrale ? Je suis (de nouveau) un peu perdu...

Déjà, si tu remplace le contenu de div#page (sauf le pied de page), tu n'auras plus forcément de titre/paragraphe en début et fin de div#page.
L'important, c'est de faire attention à la fusion des marges : div#page va faire au minimum 100% de la hauteur, mais la fusion des marges pourrait lui rajouter des marges en haut et en bas... et 100% plus quelques pixels, ça fait plus que 100%, d'où la création d'une barre de défilement inutile.
Dans un premier temps, tu peux ignorer complètement cet aspect un peu avancé, et t'occuper de ton design global. Ensuite, si pour une page ayant peu de contenu tu as tout de même une barre de défilement vertical, il faudra sans doute s'y repencher à nouveau.

SolykZ a écrit :
Car j'ai essayé d'utiliser le tuto par rapport au conteneur, sans résultat ! Le footer se met bien au bas de la page, mais les trois colonnes ne s'étirent pas jusqu'à lui...

Euh, ça c'est un peu normal : je n'ai pas promis dans mon tutoriel de faire tomber la pluie, hein !
Avoir systématiquement des colonnes de hauteur égale et qui s'étendent jusqu'en bas, c'est un tout autre problème encore !

Tiens, tout ça me rappelle un petit discours rédigé récemment sur les débutants qui veulent construire une maison complète alors qu'ils viennent d'apprendre à manier la truelle... Smiley cligne

Pour les trois colonnes de même hauteur, on utilisera probablement la technique dite des « colonnes factices ». Si ton design a une largeur fixe en pixels, ça devrait être très simple à gérer. Si c'est une largeur fluide, c'est un peu plus compliqué (je saurais comment faire, mais c'est pas forcément évident...).
http://pompage.net/pompe/colonnesfactices/
Coucou !

Alors, j'ai passé la fin de ma soirée à chipoter, j'ai fini par arriver à ceci :

Tout fonctionne nickel : Aucune barre de défilement, header en top:0, footer en bottom:0, seulement il reste un bug : Le "3 colonnes" continue sa route sur une centaine de pixels, sous le footer...

la page : http://www.denvercountryclub.yi.org/denver7/modele.htm
la css : http://www.denvercountryclub.yi.org/denver7/interface/denvercountryclub/denvercountryclub.css

Service après-vente, hum ? J'en conclus donc que le super site sur lequel j'ai trouvé ce tuto est le tiens ? Bon boulot mec !
Bon, je vais faire selon tes conseils (ça se trouve j'ai fait ça quand j'ai chipoté sans même m'en rendre compte), je vais donc reprendre le tuto et modifier selon ton post ci-dessus et on verra bien ce que ça dira Smiley smile

En tout cas, un grand merci pour ta patience (et celle des autres, pour mes précédents topics) j'suis sur que ça doit gaver de devoir tout détailler comme ça...

[Edit] J'avais dit que je viendrais dire ce que ça donne : Ca donne rien !
Modifié par SolykZ (03 Sep 2006 - 15:37)
L'HTML est très vide, le strict nécessaire à une preview de ce que ça donne. L'erreur vient de la CSS... Lorsque je passe le header en relative, tout le reste remonte, donc plus aucun dépassement sous le footer, MAIS le header se trouve alors sous le reste, et n'apparait donc pas ! (Quand je dis "sous le reste", je veux bien sur parler de couches, pas d'alignement sous le footer)

Si quelqu'un peut m'aider, ce serait vraiment sympa ! Parce que là, je désespère sec ! Merci d'avance Smiley smile
Revois la structure de ta page, pour commencer.
Si tu as suivi mes explications, l'en-tête et le pied de page devraient être à l'intérieur du conteneur global, pas à l'extérieur.
De même, tu précises une hauteur de 100% pour le conteneur global ET une hauteur minimale de 100%. Internet Explorer 6 appliquera la hauteur de 100% tout en permettant au conteneur de s'étendre au delà si le contenu le demande (implémentation non standard de la propriété CSS height, corrigée par IE 7 d'ailleurs), tandis que les autres navigateurs appliqueront une hauteur fixe de 100%, et basta. Le fait de préciser height: 100% rend le min-height: 100% complètement inopérant.

Je pense avoir donné toutes les explications nécessaires, entre le tutoriel et mon message ci-dessus, pour faire une mise en page de base qui convienne à ce que tu veux faire (au moins pour l'agencement des blocs dans l'espace). Je ne repars donc pas dans des explications, et te laisse relire celles déjà données.

Un peu de rigueur dans l'application ? Smiley smile
(Je sais, c'est pas facile quand on débute. Smiley sweatdrop )
Oui en relisant mon code je remarque que ça ne ressemble plus trop aux indications que tu m'as données... Je t'ai expliqué que j'avais tenté de bidouiller moi-même, et ça explique surement que tel ou tel truc soit apparu/déplacé... Je me vois donc encore une fois dans l'obligation de repartir de zéro !

De la rigueur ? Il y en a, certes... Ce qu'il me manque, c'est la patience...
Alors, j'ai donc tout repris depuis le vide, en commençant par "toute la longueur" pour le modifier selon le "footer-3 colonnes-header"

Résultat : http://www.denvercountryclub.yi.org/denver7/modele.html

Bon, je précise cependant une chose : La colonne centrale n'étire pas les deux colonnes latérales comme prévu à la base, ce qui revient donc à dire que j'ai une nouvelle fois échoué... Mais l'interface que je tente de faire utilise le même background tout autour et un background différent pour la colonne centrale. Donc en mettant le conteneur dans la même couleur que les colonnes latérales, le footer, et le header, puis en appliquant une couleur différente sur la colonne centrale, j'arrive au résultat espéré (pas au sens propre, mais bon... je ne pense pas que je puisse avoir mieux, c'est pas faute d'essayer mais quand on sait pas par où chopper le taureau, dur d'y rester accroché !)

Merci pour votre aide Smiley smile
Bon, il reste du travail sur le footer. Pour l'instant, le conteneur principal ne s'étire vers le bas que si le bloc central a un contenu long. Le pied de page, et surtout les colonnes, étant positionnés en absolu, sortent du flux de ce conteneur et ne le prolongent pas vers le bas. Ce qui peut poser problème.

Déjà, on va se passer du positionnement absolu des deux colonnes, et utiliser des flottants (cf. l'exemple que j'avais donné précédemment) :
div#gauche {
	float: left;
	width: 175px;
	background: red;
	text-align: center;
}

div#droite {
	float: right;
	width: 175px;
	background: yellow;
	text-align: center;
}
div#centre {
	margin-left: 175px;
	margin-right: 175px;
	background: blue;
}

Ensuite, il faut résoudre le problème du dépassement des flottants. Comme les blocs en positionnement absolu, les flottants sortent du flux de leur conteneur. Par contre, contrairement aux éléments positionnés en absolu, on peut les forcer à « rentrer dans le rang ».
Cf. à ce sujet :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html
Ici, on va utiliser la technique du rajout d'un spacer avec clear:both (pas la meilleure dans l'absolu, mais overflow, position:relative et min-height ne font pas très bon ménage on dirait).

Une fois que ceci est fait, il ne reste qu'une seule chose à régler : le prolongement des colonnes vers le bas.

Comme je l'ai déjà dit, mon tutoriel sur une page sur toute la hauteur ne prend pas cet aspect en compte. Tout simplement parce que, en l'état des choses (implémentation partielle de CSS2 dans IE6), il est impossible de faire des « colonnes » ayant pour propriété :
1 - de prendre toute la hauteur disponible ;
2 - de prendre toutes la même hauteur (la « colonne » la plus longue détermine la hauteur de toutes les colonnes).

La raison est simple : des div ne sont pas des colonnes de tableau. Ce n'est pas parce qu'on met trois div à la suite dans le code HTML, et vaguement côte à côte visuellement via un comportement flottant, que ces trois div deviennent liées (elles ne le sont que dans l'esprit du designer).

Pour palier ce problème, on utilise donc la technique dite des « colonnes factices ».
J'ai déjà donné un lien pour cette technique, un peu plus haut il me semble.

Mais bon, la pédagogie c'est aussi la répétition. Smiley cligne
Je viens de faire les modifs, qui se trouvent toujours à la même adresse...

J'ai fait exactement ce que tu m'as dit de faire, mais...

- Il y a maintenant un vide entre les colonnes et le footer (vide provoqué par le spacer)
- Le truc des colonnes factices ne fonctionne pas (en tout cas chez moi)


J'avais pensé, pour combler le vide entre les colonnes et le footer, à "fusionner" le spacer avec ce qui sert de "dernier-element"... Ca ne marche pas... Smiley sweatdrop Smiley sweatdrop
SolykZ a écrit :
J'avais pensé, pour combler le vide entre les colonnes et le footer, à "fusionner" le spacer avec ce qui sert de "dernier-element"... Ca ne marche pas... Smiley sweatdrop Smiley sweatdrop

Tu ne peux pas te servir du pied de page comme spacer (il est positionné en absolu, donc complètement « out » vis-à-vis des autres blocs...), et tu ne peux pas te servir d'un élément à l'intérieur de la div du milieu. Il faut donc rajouter un spacer après les trois colonnes et avant le pied de page.
Si tu utilises une div, tu devrais pouvoir réduire sa hauteur autant que nécessaire.

Autre solution : placer un conteneur autour des trois colonnes, et lui attribuer un overflow: hidden. À la rigueur, c'est peut-être mieux que d'utiliser un spacer.
(Pour la solution du overflow, cf. le lien sur le dépassement des flottants ci-dessus).

Pour les colonnes factices, elles sont censées marcher. Sur quel élément essaies-tu d'appliquer l'image de fond ?

Et ton design est-il un design fluide ou en largeur fixe ?
Pour le spacer :

J'ai créé une div entre la colonne centrale et ce qui sert de "dernier-element" avant le footer, ça ne marche pas... Je la place comme dernier élément (en attribuant les caractéristiques nécessaires au dernier-element sur la div), ça ne marche pas non plus...

Là je viens de "transformer" le dernier-element avant le footer, qui était un paragraphe... Là j'utilise un div d'une hauteur de 0, plus de vide entre les 3 colonnes et le footer : Pour ça c'est ok ! Je viens encore de modifier (je fais les changements au moment où j'écris ce post) pour ne faire qu'une div, qui sert de dernier-element avant le footer, en lui attribuant une hauteur de 0 pour éviter un vide, et en lui ajoutant un clear:both pour éviter les dépassements de flux : Ca passe encore mieux !

Pour les colonnes factices :

J'ai appliqué l'image de fond sur tout ce qui était possible de l'appliquer : Les 3 colonnes, le conteneur, le corps de la page comme précisé sur le tuto (body), ça n'y change rien...

Le design est fluide... Mais si ça pose problème je peux sans problèmes le passer en largeur fixe... J'y pensais de toute façon pour par la suite ajouter des effets d'ombrage et des contours arrondis...
Je pensais à ton truc d'entourer les 3 colonnes d'une div, en remplacement du spacer... Je me demande si ça ne fonctionnerait pas pour faire descendre les 3 colonnes jusqu'au pied de page ?

Si je donne au div conteneur (appellons-le "sub-conteneur") une hauteur de 100%, vu que les 3 colonnes hériteront de cet attribut, elles descendraient, non ? Maintenant, je me demande si ça ne gènerait pas le pied de page... Je ne pense pas étant donné qu'il sort du flux... Mais je ne sais jamais à quoi m'attendre...
SolykZ a écrit :
Si je donne au div conteneur (appellons-le "sub-conteneur") une hauteur de 100%, vu que les 3 colonnes hériteront de cet attribut, elles descendraient, non ?

Non, car les hauteurs des blocs ne sont pas héritées.

Le seul moyen d'avoir des colonnes sur toute la hauteur, c'est que les colonnes soient en min-height: 100%; (ce qui implique que tous les éléments parents et ancêtres sont soit en height: 100%;, soit en min-height: 100%;), et que à la fois l'en-tête et le pied de page soient positionnés en absolu.
Après quoi, il faudra gérer tout un tas de problèmes de chevauchement.
Les colonnes factices sont donc une technique beaucoup moins lourde à mettre en place.

Tu as bien utilisé des images qui peuvent se répéter en hauteur, avec un background-repeat: repeat-y ?

En design fluide, il faudra sûrement placer une image de fond (colonne de gauche ou de droite) sur body, et une autre sur la div#page (enfin le conteneur principal, je ne sais pas quel nom tu lui as donné).
En design fixe, c'est un peu plus simple, on placera l'image uniquement sur div#page.
J'ai bien utilisé une image pouvant être répétée en hauteur, en appliquant un background-repeat: repeat-y sur chacune des colonnes : Ca ne marche pas, que je soie en design fluide ou fixe !

J'ai donc attribué un background sur le body (et uniquement sur le body), me trouvant en design fluide ça passe très bien...

Par contre, je n'ai toujours pas trouvé de solution pour que la colonne centrale tombe jusqu'au pied de page... Pour les colonnes latérales, on peut considérer que le problème est réglé puisque j'ai appliqué le fond nécessaire sur le body. J'en applique un autre sur la colonne centrale, mais cela n'entoure que le texte, et ne tombe pas jusqu'en bas.

Même si je dois me casser la tête avec un chevauchement, je suis interressé par ta première solution. En même temps, rappelles-toi de mes deux premiers topics, j'ai procédé ainsi depuis le départ, vous m'avez dit que je ne devais pas faire comme ça. Au fil des posts j'ai du remplacer tels et tels trucs, et j'en arrive au résultat premier... Il n'aurait pas été plus simple de règler mon problème de chevauchement dès le départ, vu que je n'ai pas d'autres solutions ?

Tu m'avais remarqué que je n'avais pas employé la technique des colonnes factices. Je l'avais bien testée, rien ne fonctionnait. J'ai relu plusieurs fois, fait des tests à vide, toujours rien ! C'est pour ça que tu n'en as jamais vu aucune trace sur mon code, je savais déjà que ce n'était pas la solution...


J'ai donc un design fluide composé d'un header, de deux colonnes latérales de largeur 200px, d'une colonne centrale de largeur dynamique, et d'un footer : Seul problème, mes trois colonnes dépassent sur le footer depuis que je leur ai attribué une hauteur minimale de 100% pour qu'elles tombent jusqu'en bas même si elles ne sont pas remplies... Comment dois-je procéder pour empêcher ce chevauchement svp ?
Je pensais à une solution, j'aimerais savoir si c'est faisable...

Un header positionné en absolute, top: 0, width: 100% et height: 100px
Un footer positionné en absolute, bottom: 0, width: 100% et height: 70px

Vu qu'ils sortent du flux, je devrai définir un top-margin: 100px et un bottom margin: 70px sur ce qui suit

Un bloc conteneur positionné en relative, width: 100% et min-height: 100%

Il contiendra 3 blocs, colonne gauche, colonne centrale, colonne droite, d'une hauteur de 100% (qu'ils auront hérité du bloc conteneur, vu qu'ils se trouvent dans son flux)

Colonne gauche de height: 100%, width: 200px; en position absolute et à left: 0
Colonne droite de height: 100%, width: 200px; en position absolute et à right: 0
Colonne centrale de height: 100%, width: 100%, en position absolute et avec des marges latérales de 200px de chaque coté...

Il faudra également ajouter un overflow: auto sur la colonne centrale de sorte que si le contenu est plus grand, on puisse scroller...

Je n'ai pas le temps de tester immédiatement vu que je bouge de chez moi jusqu'à demain soir, mais j'essaierai de passer ce soir ou demain dans l'après-midi ici pour voir ce que vous en pensez...

Merci d'avance...
J'avoue n'avoir jamais tenté quelque chose d'aussi tarabiscoté. Je me pose en fait une question sur le fait de donner une hauteur de 100% (ou une hauteur minimale de 100%) aux colonnes. Même si le conteneur est en min-height: 100%, je me demande si les 100% correspondront à 100% du conteneur ou à 100% de la fenêtre du navigateur, dans le cas où la hauteur du conteneur (à cause du contenu d'une des colonnes) dépasserait la hauteur de la fenêtre du navigateur.

Pas sûr que cela puisse fonctionner, donc.
Mais le design voulu est-il si compliqué que le technique des colonnes factices soit inapplicable ?
(Oui je sais, tu n'as pas réussi à la mettre en place. Mais sans avoir consulté le moindre essai raté, je ne peux pas dire ce qu'il te faut pour qu'elle fonctionne...)
Hellow !


J'admire ton résultat ! Je ne sais pas ce qui fait que, mais j'admire ! Chez moi, les colonnes factices ne veulent toujours pas fonctionner, j'ai pourtant "étudié" le code de ton exemple, je ne vois en aucun cas d'où venait l'erreur !

Je vais recommencer à base de ton template, je ne vois que ça comme solution, même si le mien a été fait exactement selon tes conseils...

Concernant ta question à propos de savoir si les 100% du min-height du conteneur correspondront à 100% du conteneur ou de la fenêtre, je crois que ça correspond à 100% du conteneur, d'où les marges sous le pied de page, mon problème de départ...

Bon je (re³)tente le coup et je viendrai te dire quoi Smiley smile
Sujet clos
Aller à