css/xhtml: pied de page ne se colle pas avec le corps

[david11]

Bonjour,

je suis entrain de coder un site en xhtml et css et j'ai rencontrer un probleme;

lorsque le menu vertical est plus long que le corps de la page, le pied de page ne se colle pas avec le corps (voir image).

donc je veux que le bas de page reste toujours collé avec le corps en toute situation:

-menu vertical > corps
-menu vertical < corps

http://www.music.islamzik.net/image-heb ... me-css.gif

voila le code que j'utilise:

css:

#menu
{
float: left;
width: 145px;
margin: 0px;
margin-top: 0px;
background-color: #FFFFFF;
border-right: 1px solid #C9C6B3;
border-bottom: 1px solid #C9C6B3;
}

#corps
{
margin: 0px;
margin-top: 0px;
margin-left: 150px;
padding: 10px;
padding-bottom: 15px;
border-top: 1px solid #C9C6B3;
border-bottom: 1px solid #C9C6B3;
border-right: 1px solid #C9C6B3;
border-left: 1px solid #C9C6B3;
background-color: #FFFFFF;
}

#bas
{
CLEAR: both;
float: right;
width: 640px;
margin-left: 150px;
margin-bottom: 20px;
border: 1px solid #C9C6B3;
font: 0.7em Tahoma,sans-serif;
height: 40px;
text-align: center;
padding: 0px;
padding-top: 10px;
background-color: #EFEDED;
}


xhtml:

<div id="menu">
</div>

<div id="corps">
</div>

<div id="bas">
</div>

merci de me dépanner et je serai reconnaissant...

[HawkEye]

Code: Tout sélectionner

#bas
{
clear: right;
}

[david11]

merci HawkEye, le 1er probleme a été résolu, mais lorsque j'ai fait clear: right, le menu a été colé au bas du navigateur.
j'ai fait margin-bottom au menu mais rien n'est changé, donc comment empecher le menu de se coller au bas du navigateur

et merci


(voir l'image)
http://www.music.islamzik.net/image-heb ... e2-css.gif

[Marie-Aude]

Fais un margin-bottom sur le body

[david11]

Merci Marie-Aude pour la réponse.

j'ai une autre idée celle de faux columns c-à-d mon menu et mon corps seront toujours de la meme taille mais j'ai pas pu la réaliser malgrés plusieurs recherches, j'ai lu plusieurs articles mais en vain.

quelqu'un qui as déja réaliser cette technique peut me dépanner, voila le code c'est en haut de topic.

merci d'avance

[Vap]

Tu peux regarder mon www, il y a des fausses colonnes. Mais bon, mon fichier CSS mériterait d'être réecrit...

Le principe est simple: tu fais une div id="contenu" qui englobe toutes tes colonnes. Mettons que tu veuille faire 2 colonnes, le menu, sur 200px, et le corps sur 600px de large. Je met des dimensions arbitraires.

Mettons que le menu soit de couleur rouge, et le corps de couleur bleue.

Il faut faire un petit jpg (appelons le fond.jpg) de 10px de haut, de 800px (la largeur de la div contenu) de large, qui soit rouge sur 200px de large à gauche, et bleu sur les 600px de droite.

Ensuite tu fais

Code: Tout sélectionner

div#contenu {
   position: relative;
   width: 800px;
   background: black url(fond.jpg) center repeat-y;
}


Le position relative est là pour bien englober les elements flottants tel que le menu.

Ca marche tant que la div contenu contient bien le menu et le corps. C'est normalement le cas. Si ce n'est pas le cas, tu es probablement dans le cas discuté là:
http://www.webrankinfo.com/forums/viewtopic_87575.htm

[david11]

Merci vap, j'ai déja utilisé cette méthode mais il n'a pas bien marché, si quelqu'un peut me proposer une autre méthode, je serai reconnaissant.
merci

[Vap]

Qu'est-ce qui n'a pas bien marché?

[david11]

bonjour vap, certain bug s'affiche

[david11]

existe t il une autre methode????

[Vap]

bonjour vap, certain bug s'affiche

C'est vague comme description... Je ne peut pas t'aider plus avec si peu de détails.

Mais le nombre de sites qui utilisent les fausses colonnes devrait t'encourager à persévérer...

[david11]

Bonjour vap, si vous pouvez m'aider par msn je te donnerai mes deux pages html et css.

si quelqu'un ait pitié de moi

merci

[Vap]

On continue par mp? (message prive)

[Vap]

Ca mérite un petit résolu non?

[david11]

bonjour, comment faire ce petit résolu lol vap