28234 sujets

CSS et mise en forme, CSS3

Pied de page qui prend la hauteur qui reste sinon rien

Salut à tous,

Je vous explique mon but :
- si il y a du scroll sur ma page (page plus grande que la fenêtre du navigateur) alors mon image en pied de page ne se voit pas
- si il n'y a pas de scroll sur ma page mais qu'il n'y a pas assez d'espace libre pour afficher mon image en entier alors seulement une partie de mon image est visible (l'overflow est en hidden)
- si l'espace disponible sur ma page est plus grand que mon image alors j'affiche mon image sans la répéter.
En gros c'est un footer qui apparait que si il y a de la place.
J'essaye de différente façon mais niet que ce soit sous IE ou FF... Soit j'ai rien soit quand il y a du scroll mon image reste là. Smiley bawling
Voilà mon dernier essai en date avec le minimum pour tester :

<html>
<head>
<style type="text/css">
html, body {
	height:100%;
	margin:0px;
	padding:0px;
}
</style>
</head>
<body>
<div style="background:green;">
	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>
</div>
<div style="height:100%;max-height:120px;min-height:0px;overflow:hidden;background:url(image.jpg) center top no-repeat;"></div>
</body>
</html>


Je suis preneur pour un conseil Smiley biggrin

Tad'
En image c'est plus simple, enfin je pense...
(en rouge mon image de footer)
En A, mon corps de page prend toute la hauteur ou plus, mon image en footer ne doit pas s'afficher (il y a du scroll sur ma page, je ne veux pas en ajouter de plus)
En B, mon corps de page fait moins que toute la hauteur de la page, mon image en footer s'affiche en partie, juste assez pour remplir le bas de la page (je combre le blanc en bas de page sans ajouter de scroll sur ma page)
En C, mon corps de page est très petit, du coup j'affiche entièrement mon image en footer et je laisse vide l'espace après mon image en footer.

Je sais pas si j'arrive à recracher le contenu de mon cerveau torturé correctement, sorry...
Smiley sweatdrop
upload/25567-image.jpg
Modifié par tadenos (10 Dec 2009 - 16:26)
Pour le contenu, pas grave, il y a un scroll sur ma page et l'internaute devra scroller. Ce que je veux surtout c'est combler "le blanc" quand il y a pas de scroll sans pour autant mettre une image de 3km de haut. Mais là où ça se complique c'est que mes pages ont une hauteur variable et que je ne veux pas de cette image en footer quand l'internaute doit déjà scroller la page.
Benh non justement... Smiley decu

Mon pied de page ne reste pas fixer en bas de la fenêtre du navigateur.
Mon pied de page est collé à mon corps de page si celui-ci est petit et donc fait apparaitre du blanc en dessous.
Si sans même avoir mon pied de page, il faut scroller alors mon pied de page ne doit pas être visible.
Je vais tenté de faire en image un truc concret (en image car mon but c'est de le faire en html, mais là je coince...)
upload/25567-Image18.png

Alors voilà ce que j'essaye de faire depuis hier midi sans succès. Smiley bawling

Fenêtre de gauche il y a du scroll donc mon image de footer (mon dégrédé bleu) est invisible.
Fenêtre au centre, mon footer apparait un peu car le corps de page est plus court mais pas totalement pour éviter d'avoir du scroll
Fenêtre à droite, mon footer apparait complétement car il y a assez de place mais il reste collé au corps de la page.
Je peu pas faire mieux pour expliquer car le mieux serait que j'y arrive lol... Smiley biggrin

Tad'
il te suffit de mettre cette image en background bottom et d'imposé un padding bottom de la hauteur voulu a l'élément qui affichera cette image de fond , ton conteneur principal par exemple.

GC
Dans ce cas là aussi mon image de footer serait toujours présente aussi ce que je ne souhait pas si mon corps de page rempli déjà tout le navigateur en hauteur.
Bon c'est pas grave, il y a peut-être pas de solution. Je vais faire autre chose à la place...

Merci en tout cas pour votre aide.

Tad'
Sujet clos
Aller à