Discussion :

[Miles Raymond]

Bonjour,

J'ai déjà fait ça a plusieurs reprises et je dois bien dire que je ne suis pas un pro CSS. J'ai créer une versin rough (c'est à dire que le CSS est dans ma page HTML pour le moment) d'une interface d'un site. J'ai définis html et body à 100% en height et width et ma div principale à 100% en height et width également. Seulement, quand je met du contenu dans ma div, si le contenu dépasse la taille de ma fenêtre, il faudra que je scroll pour voir le reste, ce qui est logique. Seulement mon background ne se répète pas sur la partie scrollée !!

Un apercu :



Voilà la page en question.

Qu'est-ce qui cloche ? (si vous avez une haute résolution, réduisez la hauteur de la fenêtre jusqu'à ce que le scroll apparaîsse)

Note : je n'ai pas testé sous IE, par contre testé sous Firefox et Safari et le comportement est le même.

Merci.

[Candygirl]

Hello,

Tu peux regarder ton site sur le navigateur opera et tu verras à quoi il ressemblera sur tous les navigateurs récents lorsque tu auras rajouté le doctype au haut de ta page.

En mode standard, la propriété height en % ne peut s'appliquer que si le height du parent est clairement défini, ce qui n'est pas le cas dans ta structure:

html:100%, body 100%, 1er div min-height 100%, 2ème div height 100%

Vu que ton premier div n'a pas de height le 2ème ne peut pas attribuer de hauteur en % et prend donc la valeur auto.

Comme tu n'as pas mis de doctype, FF interprète néanmoins ce height de 100%, seulement il te piège plus loin, puisque ton 2ème div ayant une hauteur de 100% (de la taille de la fenêtre en réalité et non de la hauteur réel du 1er div), le premier s'arrête aussi à cette même hauteur de 100% de la fenêtre et donc ton fond n'est plus visible.

Pour faire le montage que tu souhaites, vu tes 2 images de fond et le min-height de 100%, tu ne peut pas passer par une imbrication de div mais plutôt positionner ton footer, par exemple, en position absolute au bas de ton 1er div.

[Miles Raymond]

Abrutis que je suis j'ai repris un fichier html et j'avais complétement oublié le doctype. Pour tout le reste je vois bien ce que tu veux dire, je n'avais jamais utilisé le min-height mais j'en avais entendu parler. Je vais essayer de voir ça. En tout cas merci beaucoup.

Je mettrai résolu quand j'aurais un aperçu fonctionnel mais ça risque d'être bon.

[Miles Raymond]

Finalement, malgré l'aide, je n'ai toujours pas réussi à me débarasser de cette espace etre mo fond et la fin de la fenêtre lorsque je scroll. Pourtant j'ai bien définis les height en 100% pour la première et la seconde div.

Et je n'ai pas réussi à mettre ma div de footer au fond de ma page avec la position absolute : comment faire ça ?

[Candygirl]

Je ne vois toujours pas de doctype en haut de page... ?

Comme je l'ai indiqué ci-dessus, donner un height de 100% à un div dont le parent n'a pas de height renseigné ne sert à rien en mode standard et ne donne pas l'effet que tu souhaites sur FF en mode quirks.

Tu peux procéder de la manière suivante:

• Intégrer la bordure grise à ton image de fond fondC
• Donner une position:relative à ton 1er div (celui qui contient le min-height de 100%) afin qu'il serve de référence pour le positionnement absolu
• Fermer ton 2ème div juste après son ouverture (donc il n'englobe rien du tout), le positionner en absolute bottom:0, lui donner les dimensions voulues
• Selon le comportement que tu souhaites (que ton texte vienne par-dessus ta déco ou pas) tu vas ajouter un position relative ou un padding-bottom à ton contenu

[Miles Raymond]

Désolé je n'avais pas uploader la page. J'avais travaillé en local.

Malheureusement malgré tes indications je n'ai pas réussi à donner quelque chose de concluant. J'ai mis la dernière version en ligne, si tu pouvais juste m'indiquer ce qui cloche ?

Merci.