Bloc conteneur et hauteur de page

un post pour la postérité!

Bonjour,
tout a commencé par l'exemple de cette page : modeles
j'ai modifié cette page pour arriver à celle-ci : page à problèmes
et son css:

nouveau css plus bas

comme vous le voyez,
sous FF, le conteneur prend bien toute la hauteur de la page mais le footer n'est pas collé en bas de page avec le menu qui s'allonge jusqu'en bas quelque soit son contenu.

sous IE, le conteneur dépend de son contenu et en plus, il y a un padding(?) entre le menu et le footer...

pourtant j'ai suivi à la lettre les conseils de footer en bas de page et de hauteur à 100% mais ça coince encore malgré tous mes efforts.

j'ai surement fait quelque chose de travers, peut-etre m'aiderez-vous à savoir quoi?
merci
Modifié par cevichero (09 Aug 2006 - 13:18)

#conteneur {
	min-height: 100%;
	height: auto;
}

Internet Explorer 6 (windows) ne comprend pas la propriété CSS min-height.
http://forum.alsacreations.com/faq/#item60

Par contre, plutôt que de passer par un hack CSS, on aura intérêt à utiliser les commentaires conditionnels pour appliquer un style spécifique à IE windows.
http://www.blog-and-blues.org/articles/Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows

Pour le pied de page, s'il doit être toujours en bas de page et non pas juste en dessous du contenu, on peut utiliser la méthode suivante :
http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-1.html

bonjour et merci de ta réponse,

je suis désolé je n'y arrive pas,
j'ai bien suivi tes conseils : résultat, le footer rest bien en bas de page mais avec
- la version courte (qui ne dépasse pas la hauteur de la page) :
sous IE et FF, j'aimerais que le menu (#gauche) prenne toute la hauteur disponible quelque soit son contenu, sans succès.

- la version longue (qui dépasse la hauteur de la page) :
sous IE, le menu dépasse la hauteur de la page et passe par-dessous le footer...
sous FF même chose sauf que le conteneur n'arrive pas en bas de page...?!

j'ai peut-être dévié du css d'origine, en voici le nouveau, en tout cas ça me rend dingue de jongler avec FF, IE page longue, courte...arrrghh!!

code à jour plus bas...

j'aimerias comprendre et résoudre ce problème ,merci encore de votre aide
Modifié par cevichero (10 Aug 2006 - 12:25)

Bonjour,

je tatonne, je tatonne mais je finis par avancer

cette fois l'effet voulu n'est pas loin, j'ai un peu simplifié le code et je touche presque le graal, il me manque toutefois, résoudre un souci de hauteur de deux blocs en float (left).
page1

J'aimerais que le bloc de contenu prenne la même hauteur que celle du bloc menu lorsque celui-ci est plus long. Et vice-versa.
Je sais, je sais, il y a des solutions dans la FAQ mais chacune d'entre elles apportent une partie de ce que je veux faire, j'essaie donc de prendre un peu de chacune.....le résultat n'est pas concluant.
Du coup je bloque là-dessus, svp un coup de pouce serait le bienvenu

encore une fois, le css concerné

body {
background-color: #333333;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
p { margin: 0 0 0 0; }


#conteneur {
position: absolute;
background-color:#FFFFFF;
left: 18%;
width: 750px;
margin: 0;
}

/*****  ENTETE RP et BARRE NAV HAUT  *****/
#header {
background-color: #FFFFFF;
height: 120px;
text-align: center;
padding: 2px 0 0 0;
}
#haut {
background-color:#FFFFFF;
height: 22px;
margin: 0 22px 0 22px;
padding: 0;
}
#bord_haut {
/*background-color: #CCCCCC;*/
background-image: url('Pics/Bord_bas_test.gif');
background-repeat: no-repeat;
background-position: center;
line-height: 10px;
}


/*****  MENU DE GAUCHE  *****/
#gauche {
background-color: #666666;
/*position: absolute;*/
float: left;  /** nécessaire? **/
width: 110px;
bottom: 0;
margin: 0 0 0 20px;
/*padding: 10px 0 15px 0;*/
}
....

/*****  CONTENU DE LA PAGE  *****/
#centre {
background-color:#9999CC;
margin: 0 20px 0 144px;
}

/*****  PIED DE PAGE  *****/
#footer {   				/***  + bordBas.gif  ***/
clear: both;
background-color: #FFFFFF;
background-image:url('Pics/Bord_bas_test.gif');
background-repeat: no-repeat;
background-position: top;
bottom: 0;
left: 0;
color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 7pt;
width: 710px;
height: 41px;
text-align: center;
margin: 0 0 0 20px;
padding: 13px 0 0 0;
}
...

Je tourne en rond, mais ne désespère pas!
merci