[Résolu] Problème avec un pied de page qui ne va pas sous la page

Bonjour,

Je code actuellement mon site pour la passer en v2.
Tout va bien, jusqu'au moment ou je m'occupe du pied de page.
Mon pied de page est composé de deux élements, une image en 161x43 qui jouera le role de "top" (ramener en haut de la page) et de mon footer 589x43, qui est le pied de ma page même, qui sera juste après top.

Sauf que mon footer (qui de soit se mettre juste à gauche du top) ne va pas en bas de la page !
Ca donne ça : http://soulthehunter.free.fr/codagee site
Après plusieurs manips, rien à faire, il reste où il est !
Ce que j'aimerais avoir, c'est ça : ce que j'aimerais.

J'ai aussi essayé mon menu en position:absolute; !
Et là c'est cata, mon top passe sous le menu, et mon menu aussi !

Il y'a aussi apparement un problème avec IE et FF, sous FF, ça va, alors que sous IE, c'est encore pire, je crois que c'est le 3 pixel jog, qui déplace mon corps et le mets en dessous de mon menu !

Merci d'avance à ceux qui m'aideront !

Soul
Modifié par Soul (15 Jan 2006 - 16:58)

Déjà sous Firefox 1.5 (linux) ça ne passe pas non plus. J'y jette un oeil.

Bon alors c'est parti.
Le code HTML en cause :

<div id="top"></div>
<div id="footer"></div>

Le code CSS correspondant :

#top
{
    clear: both;
    width: 161px;
    height: 43px;
    background-image: url(top.png);
}
#footer
{
    width: 589px;
    height: 43px;
    background-image: url(footer.png);
}

Problème n°1 : problème d'accessibilité
Ton pied de page n'a pas de contenu. Les deux éléments sont vides. Du coup, il faut être capable de bien les images de fond pour avoir une information. Ça pose donc problème aux aveugles, qui ne verront pas tes images de fond et n'auront pas de texte de remplacement, ainsi qu'aux malvoyants, qui ne pourront pas lire tes petits caractères, ainsi qu'à mon père, qui à 48 ans a du mal à lire les petits caractères également, ainsi qu'à moi-même, parce que sur mon écran en 1280px de large, je suis obligé de me rapprocher de l'écran pour y voir quelque chose.

Quelle solution ?
Tu peux garder des images de fond sans texte, et rajouter du texte dans le code html, en lui donnant un style particulier en CSS. Bien sûr, ça demande d'accepter une relative perte de contrôle sur l'aspect graphique, sacrifice difficile si l'on est un adepte de la mise en page au pixel près.

Tu peux aussi choisir de garder tes images comme tu le souhaites (tant pis pour la taille des caractères), mais au moins assurer une accessibilité minimale pour les aveugles et malvoyants. Par exemple en utilisant des images dans le code html (balise <img>) plutôt qu'en fond de div dans le CSS. Chaque image aura bien sûr un attribut alt (texte alternatif) correctement renseigné.
À la rigueur, on peut garder les images de fond en CSS, et rajouter dans le HTML le texte (dans des paragraphes) que l'on cachera via CSS de cette manière :

div#footer p {display: none;}

Si CSS est activé, on voit l'image de fond uniquement. Si CSS est désactivé, on peut lire le texte et ainsi avoir l'information principale.

Problème n°2 : problème de positionnement
L'élément <div> est un élément de type bloc. Le comportement normal d'un élément de type bloc, c'est qu'il provoque un retour à la ligne avant et après l'élément, comme c'est le cas pour les éléments <hN>, <p>, <blockquote>, etc.

De plus, dans ton CSS ton indique : clear: both;, ce qui a également comme conséquence de provoquer un retour à la ligne avant et après l'élément. Donc, même dans le cas où ça ne serait pas le comportement par défaut, tu demandes ce comportement ! C'est vraiment tendre le baton pour se faire battre !

Quelle solution ?
Solution de facilité (mais pas forcément la plus mauvaise !) : utiliser un tableau à deux colonnes. Ça a l'avantage de permettre un positionnement presque au pixel près, ce qui est très dur en CSS.

Solution raisonable : pourquoi faire deux éléments, quand un seul peut suffire ? Après tout, les deux parties (gauche et droite) font partie du même pied de page, même si tes chois graphiques t'amènent à les dissocier. Donc autant faire une seule et même image. Ou encore :

HTML :

<div id="piedpage">
	<a href="#top" title="Revenir au début de la page">
		<img src="top.png" alt="bouton pour revenir au début de la page" />
	</a>
	<img id="texte_piedpage" src="textepiedpage.png" alt="Design by Kashin & Soul, etc." />
</div>

Ensuite, le fond du pied de page peut être une seule image, qui ne contient que la courbe de la bordure et les aplats. L'image pour le lien "top" sera un png ou gif transparent (juste la taille qui faut, pas toute la largeur de la colonne !), et l'image pour le texte sera également un gif ou png transparent (limité au minimum en taille), positionné en relatif. Du genre img#texte_piedpage {position: relative; top: 20px; right: 10px;}. Ou alors en position: absolute; ? Je ne sais plus trop, il faut que je révise.

Et voilà.
Modifié par mpop (15 Jan 2006 - 15:09)

Au final, j'ai fusionné mon footer et mon top, sauf que le petit renne qui fesait office de top, je l'ai effacé, et dans ma div j'ai créer un include vers une pafe qui contient un <a href="#top"><img src=""></a>.
Et j'ai aussi créer une div qui entoure toutes les autres, qui est est une image 750x2 qui passe sur tout le site.

Sauf que maintenant les problèmes de compatibilité commencent, sous FF, tout est ok, sous IE, ça va pas. Mon corps est positionné en bas, alors qu'il devrait être en haut du corps !

Ahah, comment ai-je résolu cela?

j'ai définis un margin-top:0px; !

Merci d'avoir participé a la résolution de mon problème, en ésperant que mon topic serve à d'autres personnes !

Soul

Je ne vois pas trop l'intérêt de faire un include pour insérer un bête bouton (lien sur une image)... à moins qu'il ne change toutes les semaines

Sinon, ne pas oublier l'attribut alt pour l'image du bouton.

Réellement ce sera un boutton propre au design, car je compte en faire plusieurs pour mon site, qui pourront être changé et gardé en mémoire !