[RÉSOLU] Modification du modèle 3 pour que le footer soit en bas

Bonjour,

Je voudrais me base sur le modèle 3 : http://css.alsacreations.com/modeles/modele3.htm pour créer un design mais il y a un problème : si le menu de gauche est plus long que le contenu, il passe sur le pied de page (footer)... J'ai essayé de trouver d'autres gabarits pour faire ce que je veux et je suis tombé sur ça : http://www.fairytells.net/gabarit_accessible/V2/index_droitelong.php

Mais si vous désactivez JavaScript, la couleur rose ne descend pas jusqu'en bas.

Comment corriger ce problème sans JavaScript ?

Merci.
Modifié par ThomasB (26 Feb 2007 - 23:39)

Salut Thomas !

Le problème que tu mets en évidence pour le modèle 3 provient du positionnement absolu du menu. Si le menu a une hauteur plus importante que celle du contenu, il déborde effectivement sur le pied de page.

Pour remédier à cela, une solution consiste à utiliser le positionnement flottant ainsi que la propriété clear dont le rôle est de définir le positionnement d'un élément par rapport à un élément flottant.

C'est d'ailleurs à l'aide d'un positionnement flottant que les menus latéraux de la mise en page d'Aurélien Levy que tu cites ou encore ceux du modèle 15 d'Alsacréations sont mis en œuvre. Quant au pied de page, la propriété clear: both; permet alors de le positionner après les deux boîtes flottantes.

En ce qui concerne maintenant le vif du sujet, c'est-à-dire l'arrière-plan des menus, il subsiste en effet
un souci puisque celui-ci est lié à la hauteur des menus. Outre la solution utilisant JavaScript donnée sur Fairytells, il existe également la technique des colonnes factices, traduite sur Pompage. Elle consiste à répéter une image d'arrière-plan puis à superposer un menu flottant sur la colonne factice.

J'espère que ces quelques pistes pourront t'être utiles.

Bonne continuation et à bientôt !

Merci bien pour ta réponse

PS : Romain !! Le monde est petit

De rien, ravi de t'avoir rendu service.

PS : effectivement, le monde est petit, c'est ce que je me suis dit en lisant ton message !