28173 sujets

CSS et mise en forme, CSS3

Height 100% ne s'applique pas sous IE et FF

Bonjour à tous,

j'ai un probleme avec la hauteur de ma page web. En effet, j'ai applique a ma page web la structure suivante :


<body>	
<div id="global">

	<h1 class="entete"></h1>
	<h1 class="barnavig">>> Navigation :: <? echo $navigation; ?></h1>
	<div class="menu">
		<br />
		<h3 class="navigation"></h3>
		blabla
		<h3 class="fatestaynight"></h3>
		blabla
		<h3 class="anime"></h3>
		blabla
		<h3 class="multimedia"></h3>
		blabla
		<h3 class="partenaires"></h3>
		blabla
		<h3 class="statistiques"></h3>
		blabla
		<br />
   </div>
   
   <div class="contenu"><? include ($include); ?></div>
   
	<div class="pied">Copyright ...</div>
	
</div>
</body>

Et voici une partie du fichier css qui pourrait servir :

html, body {
	margin:0;
	padding:0;
	height: 100%;
	color:black;
	font-family: Arial;
	font-size: 11px;
	background-image:url("images/fontpage.jpg");
 }
#global {
	padding-left:21px;
	padding-right:21px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	width:758px;
	background-image:url("images/fond.gif");
	background-repeat:repeat-y;
	background-color:#CBD2DA;
	border-bottom:1px solid black;
 }
.menu, .contenu {
	float:left;
 }
.menu {
	width:140px;
	background-color:#CBD2DA;
 }
.contenu {
	width:614px;
	border-left:4px double #757677;
	background-color:white;
	min-height: 625px;
 }
.pied {
	clear:left;
	margin-left:140px;
	width:314px;
	border-left:4px double #757677;
	background-color:white;
	background-image:url("imagesrecup/310400129447.jpg");
	background-repeat:no-repeat;
	padding-left:300px;
	padding-top:50px;
	text-align:right;
	font-size:0.8em;
	font-family:arial;
 }


En fait, dans mon fichier inclut, il y a quelque chose du genre :

<h2>Titre contenu</h2>
<br />
<p>

</p>

Rien de plus, et donc mon id global ayant un fond gris ( le meme que le menu ), comme j'ai mis un fond blanc à mon contenu, celui ci ne s'etire pas jusqu'au pied de page.

Le résultat en image : içi
( c'est tout de suite plus clair je pense ^^ )

J'ai reussi a régler partiellement le probleme avec FF, grâce en appliquant un min-height à .contenu, en lui donnant une valeur en px, mais bon si le menu s'aggrandit je dois modifier cette valeur, et avec IE cela ne fonctionne pas...

Si vous pouviez m'aider à résoudre mon probleme, car j'avoue être un peu dépassé Smiley sweatdrop , j'ai pourtant fait ce qu'il fallait faire selon moi ( apprement non ^^ )

Merci de votre aide.
Modifié par Blackelf (14 Mar 2006 - 19:24)
Il me semble que IE ne reconnait pas le "min-height". Il existe une méthode pour cela :
.contenu{	
	height : auto;
	min-height:100% ;
}

/* Pour IE */

* html .contenu{
	height: 100% ;
}
Merci de ta réponse, en effet, IE ne reconnait pas min-height, mais la méthode que tu ma donné ne corrrige pas le probleme, ni sous IE, ni sous FF.
Tu peux regarder : içi
( j'ai enlevé tout le code css qui ne servait pas pour mieux s'y retrouvé )
Arf bon ben problème résolu c'était tout bête j'avais oublié ceci à mon id #global :

margin:0;
padding:0;
height: 100%;


EDIT : non en realite ca ne marche toujours pas, car cette fois le contenu depasse de mon id #global, tout comme mon menu ( en image )

Je n'arrive pas à voir où est le probleme, si quelqu'un pouvait m'aider Smiley sweatdrop
Modifié par Blackelf (14 Mar 2006 - 19:27)
Salut,

Tu peux ajouter une <div> qui va englober le menu, le contenu et le footer, et lui donner une image de fond de 1px de hauteur, qui se répète verticalement, et décalée horizontalement.
background: url(fond.png) repeat-y 140px;

et retirer ceci de .contenu qui pose problème
height:100%;
width:614px;

Modifié par Alan (15 Mar 2006 - 04:16)
Sujet clos
Aller à