18073 sujets

Questions générales et questions de débutants

[Résolu] Problème avec height: 100%

VOilà, en me servant de ce qui est dit sur cette page : ici, c'est à dire en mettant un height: 100% aux balises html, body et conteneur, j'ai réussi à faire en sorte que mon bloc prenent toute la largeur de ma fenêtre...seulement si ça marche avec IE (pour une fois !) c'est pas le cas avec mozilla firefox Smiley decu J'ai essayé de mettre des margin: 0px et padding: 0px un peu partout lol, mais peu importe ce que je fais, il y a toujours une marge entre le rebord superieur du navigateur et le rebord superieur de mon désign, alors que je veux pas de marge Smiley sweatdrop Le problème à ça, c'est que du coup le désign prend plus de 100% de la page à cause de la marge, et ça fait apparaitre le scroll vertical du body, ce que je ne veux pas.

Le seul moyen que j'ai trouvé pour enlever cette marge, c'est de mettre un {position: absolute; top: 0px} au conteneur, mais alors là, nouveau problème Smiley eek C'est que du coup ça prend plus en compte le margin: auto que j'avais mis pour que le désign soit centrer horizontalement Smiley ohwell

Donc voilà ma question, comment centrer un désign quand on est ne positionement absolu ???
Modifié par manzelle_bidule (23 Jul 2005 - 19:55)
Smiley cligne

Bon, maintenant : si tu as suivi les indications de l'article en question, notament en faisant attention aux indications de marges et au problème de doctype/prologue XML, le positionnement absolu ne pose pas de problème.

Peux-tu donner une url avec un exemple de ton code ? A défaut, reproduire brièvement celui-ci ?
Modifié par Laurent Denis (23 Jul 2005 - 14:45)
BOn, j'en suis qu'au tout début début de mon site lol (et j'ai déjà des problèmes -_-), donc je copie le code en entier ici, pour être sûr de rien oublier:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>.:Les Rat-masse miettes:. Bienvenue !!!</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Language" content="fr" />
		<link rel="stylesheet" media="screen" type="text/css" title="design" href="design.css" />
	</head>
	
	<body>
	<div id="conteneur">		
		<h1 id="header"><a href="accueil.html" title=".:Les Rat-masse miettes:. Accueil"><span>Les Rats-masse miettes</span></a></h1>

		<ul id="menu">
			<li><a href="">Accueil</a></li>
			<li><a href="">Le Rat</a></li>
			<li><a href="">Chez les Rat-masse miettes</a></li>
			<li><a href="">Le monde de Bidule</a></li>
			<li><a href="">Liens</a></li>
		</ul>
		
		<div id="contenu">
			<h2>Titre</h2>
			<p>Blabla</p>
		</div>
		
		<p id="footer">Tous droits réservés - © Géraldine alias Bidule</p>
	</div>
	</body>
</html>
			


html
{ height: 100%;
}

body
{text-align : center;
 font: 0.8em "Trebuchet MS", Verdana, serif ;
 background: rgb(188,220,245);
 margin: 0px;
 padding: 0px;
  height: 100%;
}

#conteneur
{
	width: 760px;
	background-image: url("degradebleu.jpg");
	background-repeat: repeat-y;
	border-left: 2px dashed rgb(0,51,153);
	border-right : 2px dashed rgb(0,51,153);
	height :100%;
	margin: auto;
}
#header
{
	height: 220px;
}


Le code marhce sous IE, ça fait bien ce que je veux, mais sous Firefox j'ai une horrible marge au dessus...donc je suis obligé après de positionner le bloc, mais là ça pose le problèem du centrage...
Ah... Ce sont les marges verticales de ton premier élément (le h1#header) et de ton dernier élément (le p#footer) qui font apparaître cet espace et la barre de scroll.

Si tu ne veux pas passer par un positionnement absolu, il te faut préciser :


#header {
height: 220px;
margin: 0 auto;
}
#footer {
margin: 0 auto;
}


Ou, si tu veux être plus précis, le margin-top de #header et le margin-bottom de #footer doivent être nuls.
Modifié par Laurent Denis (23 Jul 2005 - 15:50)
Merci beaucoup !!! Franchement si tu me l'avais pas dit, j'aurais pas trouvé...j'avais essayer de mettre des margin et padding 0px un peu partout, sauf là Smiley rolleyes ...
Sujet clos
Aller à