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

WRInaute discret
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...
 
WRInaute discret
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
 
WRInaute impliqué
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:
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à:
https://www.webrankinfo.com/forum/t/css-petit-probleme-div-sous-firefox.87575/
 
WRInaute discret
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
 
WRInaute impliqué
david11 a dit:
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...
 
WRInaute discret
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
 
Discussions similaires
Haut