[résolu] Footer et etirement

Bonjour tout le monde,

Je suis en train de refaire mon site pro et j'ai un soucis de CSS sur Firefox ...
pour la page suivante du moins http://www.zerosept.com/references.html

En gros si j'ai bien cerné le truc, c'est que dès que le contenu depasse la taille de un ecran alors le fond de mon DIV "contenu" n'est pas répété et le footer ne descend pas...

A priori il n'y a que cela qui ne fonctionne pas (si vous trouvez autre chose dites le moi)

J'aimerias le faire fonctionnerm ais je ne vois pas par ou m'y prnedre (a noter que malgrès mes effort j'ai l'impression de toujours debuter en css)

Merci d'avance à tous ceux qui prendrons le temps de m'aider
Sur ceux, je m'en vais me chercher une corde et un CD de Vicent Delerm pour me suicider

Merci
Arnaud
Modifié par narno07 (06 Nov 2006 - 20:58)

Salut,

Le problème vient visiblement de la propriété suivante :

#page {height: 100%;}

Jette un coup d'oeil sur la faq pour en savoir plus.

Bonjour,

sous FF, les blocs hors du flux ne suivent pas spontannément la hauteur de leur contenu (c'est une propriété normale, IE bug lui ), une des solutions c'est de conférer à ton bloc #page la propriété overflow: hidden; et cela devrait régler ton problème (effectivement le height 100% ne sert à rien).

Bon courage
Modifié par ghost (06 Nov 2006 - 17:51)

le overflow : hidden; dans mon cas masque juste l'ascenceur et m'empeche donc de voir la suite de mon contenu (ce qui n'est pas le resultat voulu)

Pour ce qui est du height: 100%; je l'ai bien mis au html, body et #page donc il me semble que c'est ce qu'il faut faire non ? a moins, ce qui est possible, que j'ai mal compris

Merci a vous 2 en tous cas

Re:

Teste le overflow: hidden !! tu verras bien !!

je viens de le tester ca fais ce que je t'ai dis sur Firefox, ca me supprime l'ascenceur et donc ca me coupe ma page (la suite du contenu n'est pas accessible)

Il faut que tu utilises min-height.

Pour plus d'explications, il te suffit de suivre le lien que je t'ai donné vers la faq.

Ben alors on a pas le même FF !!!

	#page 

	{

		width: 761px;

		margin: 0 auto;

        overflow: hidden;

		position: relative;

		z-index:1;

		background-color:#FFFFFF;

		border-left:1px solid #392F21;

		border-right:1px solid #392F21;

		background-image:url(images/charte/fond_conteneur.jpg);

		/*border: 1px solid black;*/

	}

On doit pas avoir le m^me alors pasque moi ca me donne ca
http://img246.imageshack.us/img246/4089/alsana0.png

Fait un copier/coller du css du bloc ... ou supprime tes height dans ton bloc #page

Peut-être parce que tu as laissé

height: 100%;

Modifié par Eldebaran (06 Nov 2006 - 18:22)

Fort

Tres fort, vous êtes très fort

merci pour tout

Deja de votre patience et de votre compétence, maitnenant je vais essayer d'aller coller mon footer en bas de page comme ici

http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-2.html

Ah oui là ce n'est plus le même sport !!

	#page 

	{

		width: 761px;
		margin: 0 auto;
		min-height: 100%;
		position: relative;
		z-index:1;
		background-color:#FFFFFF;
		border-left:1px solid #392F21;
		border-right:1px solid #392F21;
		background-image:url(images/charte/fond_conteneur.jpg);
		/*border: 1px solid black;*/
	}

plus : ton hack ie6 dans ton code

<!--[if lte IE 6]>
<style type="text/css">
div#page {
	height: 100%;
}	
</style>
<![endif]-->

et en fin de page pour FF

<span style="padding-top: 45px;"> </span>

pour ne pas recouvrir la fin de ton contenu.

J'ai trouvé une autre technique et tout fonctionne a présent.

Merci de votre aide à tous

narno07 a écrit :
J'ai trouvé une autre technique et tout fonctionne a présent.

Merci de votre aide à tous

Merci à toi d'en faire profiter les autres. N'oublie pas qu'on est sur un forum de discussion et d'entraide

*
{
	margin:0;
	padding:0;
}

html, body
{
	height:100%;
	margin: 0;
	padding: 0;
	background-image:url(images/charte/fond.png);
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
}
body
{
	text-align:center;
}

#page
{
	position:relative;
	min-height:100%;
	height:auto !important;
	height:100%;
	margin:0 auto;
	text-align:left;
	width: 761px;
	background-color:#FFFFFF;
	border-left:1px solid #392F21;
	border-right:1px solid #392F21;
	background-image:url(images/charte/fond_conteneur.jpg);
	/*border: 1px solid black;*/	
}

#header
{	
	height: 50px;
	background-image:url(images/charte/header.png);
	background-repeat:no-repeat;
	background-color:#A69D7A;
	margin: 0px;
	padding: 0px;
}

#header p, form
{
	margin: 0px;
	padding: 0px;
	padding-top:3px;
	margin-left: 450px;
	color:#FFFFFF;
}
	
.form_login
{
	width: 120px;
	border: 1px solid black;
	font-size:10px;
	font-weight:bold;
	padding-left: 3px;
}
	
#bandeau_ambiance
{
	background-image:url(images/charte/bandeau_deco_bleu.jpg);
	background-repeat:no-repeat;
	height: 132px;
}

#contenu
{
	position:relative;
	padding:10px 10px 50px 10px;
	width: 520px;
	margin-left: 220px;
}

#contenu:after 
{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	font-size:0;
	margin:0;
	padding:10px;
}
/* Hack IE 5.0 Mac \*/
* html #corps {height:1%;}
/* Fin hack IE 5.0 Mac */

#contenu
{
	margin:0 0 0 200px;
}

#contenu p
{
	text-align:justify;
	margin-top: 15px;
}

#contenu h1
{
	font-family: "Trebuchet MS", Tahoma, Verdana, sans-serif;
	font-size:18px;
	font-weight: bold;
	color: #392F21;
	border-bottom:3px solid #A69D7A;
}
	
#contenu h2
{
	font-family: "Trebuchet MS", Tahoma, Verdana, sans-serif;
	font-size:14px;
	font-weight: bold;
	color:  #A69D7A;
	border-left:20px solid #392F21;
	padding-left: 5px;
}
	
#contenu h3
{
	font-family: "Trebuchet MS", Tahoma, Verdana, sans-serif;
	font-size:13px;
	font-weight: bold;
	color:  #392F21;
}
	
#contenu h4, h5, h6
{
	font-family: "Trebuchet MS", Tahoma, Verdana, sans-serif;
	color:  #392F21;
}
	
#contenu ul
{
	list-style-type:none;
	margin-left: 50px;
}
	
#contenu li
{
	background:transparent url(images/charte/puce.jpg) no-repeat top left;
	padding-left:30px;
	height: 15px;
}
	
#contenu a
{
	font-weight: bold;
	color:#3399FF;
	text-decoration: none;
}
	
#contenu a:hover
{
	color:#A69D7A;
	text-decoration:none;
}

#bandeau_gauche
{
	width: 205px;
	float:left;
}
	
#menu
{
	background-image:url(images/charte/fond_menu.jpg);
	background-repeat: no-repeat;
	height:250px;
	width: 205px;
	margin-left: auto;
	margin-right: auto;
}
	
#menu ul
{
	margin:0px;
	padding:0px;
	padding-top: 76px;
}
	
#menu ul li
{
	list-style:none;
	padding:0px;
	margin:0px;
}
	
#menu a.portrait
{ 
	padding:0px;
	margin:0px;
	display: block; 
	width: 205px; 
	height: 27px; 
	background-image: url("images/charte/menu/portrait.jpg"); 
	background-repeat: no-repeat;
}
	 
#menu a.portrait:hover 
{ 
   	background-image: url("images/charte/menu/portrait-2.jpg"); 
}
	
#menu a.solutions
{
	padding:0px;
	margin:0px;
	display: block; 
	width: 205px; 
	height: 30px; 
	background-image: url("images/charte/menu/solutions.jpg"); 
	background-repeat: no-repeat;
}
	 
#menu a.solutions:hover 
{ 
   	background-image: url("images/charte/menu/solutions-2.jpg"); 
}
	
#menu a.references
{ 
	padding:0px;
	margin:0px;
	display: block; 
	width: 205px; 
	height: 30px; 
	background-image: url("images/charte/menu/references.jpg"); 
	background-repeat: no-repeat;
}
	 
#menu a.references:hover 
{ 
   	background-image: url("images/charte/menu/references-2.jpg"); 
}
	
#menu a.contacts
{ 
	padding:0px;
	margin:0px;
	display: block; 
	width: 205px; 
	height: 29px; 
	background-image: url("images/charte/menu/contacts.jpg"); 
	background-repeat: no-repeat;
}
	 
#menu a.contacts:hover 
{ 
   	background-image: url("images/charte/menu/contacts-2.jpg"); 
}

#piedpage
{
	position:absolute;
	bottom:0 !important;
	z-index:2;
	width:760px;
	height:50px;
	background-color:#A69D7A;
}
	
#piedpage p
{
	color: #FFFFFF;
	text-align: center;
	padding-top:3px;
	margin: 0px;
}
	
#piedpage a
{
	color: #ffffff;
	text-decoration:underline;
}
	
#piedpage a:hover
{
	text-decoration:none;
	color:#FFFFFF;
}
	
.spacer
{
	padding-top: 20px;
	clear: both;
}

Voila pour mon code CSS

Bonne soirée et a bientot je pense ^^