28172 sujets

CSS et mise en forme, CSS3

Bas de page qui descend trop sous Firefox

Bonjour à tous Smiley cligne
À part la solution que je sollicite, j'ai tout essayé, en vain...

Sous IE8 et GC (Google Chrome), tout est parfait. Sous FF, la page descend trop bas (vide inutile sous les derniers éléments - rouge et orange - qui devraient être collés sur le bas).

Dans tous les cas, les 4 éléments (colorés pour faciliter l'aide au problème) sont en bonne place au pixel près. Seul l'espace vide en bas de page demeure un mystère.

Précision : en supprimant les <div> (olive et marine) internes au bloc orange, le problème n'a plus lieu, mais naturellement les 4 blocs sont nécessaires. Pour simplifier l'exemple, j'ai inclus le CSS dans le <head> de la page.

Merci d'avance pour votre tentative d'aide !


<!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">
<head>
<title>Pourquoi cette page descend trop loin sous Firefox ?</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<style type="text/css">
<!--

html, body {
height: 100%;
margin: 0;
}

#tout {
padding-left: 15%;
padding-right: 35%;
float: left;
}

#rouge{
background: #f00;
float: right;
width: 100%;
height: 300px;
margin-top: 10px;
margin-right: 0;
}

#orange {
background: #f80;
position: relative;
float: right;
top: 206px;
width: 777px;
height: 95px;
}

#marine {
background: #004;
position: relative;
float: right;
top: -420px;
width: 290px;
height: 500px;
}

#olive {
background: #570; width: 124px; height: 200px; margin: 260px -200px;
}

-->
</style>
</head>

<body>
<div id="tout">
<p>Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page.</p>
<p>Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page.</p>
<p>Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page.</p>
<p>Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page. Texte de la page.</p>

</div>
<div id="rouge">
	<div id="orange">
		<div id="marine">
			<div id="olive"></div>
		</div>
	</div>
</div>
			

</body>
</html>
Mabelle a écrit :
Bonjour, la meilleur chose est de revoir les bases du positionnement.

Guide de survie du positionnement


Merci, ces rappels font toujours du bien. Hélas, je n'y ai pas trouvé la solution à mon problème.

Mabelle a écrit :
Sur Chrome aussi il y a un espace en bas de tes blocs.


Non, sur Chrome il n'y a aucun espace sous les blocs rouge et orange (si ce n'est 1 seul pixel de différence entre l'un et l'autre). Sur Firefox, l'écart est d'environ 341 pixels.

Merci de me porter secours...
Bonjour,

Sur le rendu dans Firefox: j'ai le même espace blanc en bas dans Firefox 4 et Opera 11. Je ne l'ai pas sous Safari 5 et Chrome 7. Ce n'est à priori pas une lubie de certains navigateurs mais une conséquence d'un mode de positionnement des éléments pour le moins aléatoire. Je pense que c'est surtout la mauvaise utilisation du positionnement relatif qui est en cause.

Sans vouloir me jeter de fleurs, le Guide de survie du positionnement CSS est une bonne ressource, à lire et à relire. La section «Erreurs de débutant à ne pas commettre» dit notamment:
Guide de survie du positionnement CSS a écrit :
Le positionnement relatif est très utile mais ne s'utilise que ponctuellement, pour décaler légèrement un élément par rapport à sa position normale. On ne l'utilise pas, par exemple, pour placer deux blocs côte-à-côte. Si vous vous retrouvez à écrire des position: relative; top: -291px;, vous utilisez probablement le positionnement relatif à mauvais escient.

C'est typiquement ce que tu fais: tu places des blocs en les décalant de plusieurs centaines de pixels par rapport à leur position «normale». Mais cette position normale est encore considérée par les navigateurs comme étant la position «réelle» de l'élément, ce qui explique en partie tes espaces blancs. Voilà pourquoi c'est une erreur de débutant à ne pas commettre. Smiley cligne

Autre erreur que tu commets: utiliser float à tort et à travers. Tu utilises float pour presque tous les éléments, alors qu'il ne faudrait l'utiliser que pour un ou deux (ou zéro, je n'ai pas analysé le design en détail).

Je pense qu'il faut revoir complètement le positionnement de tes blocs. Tu peux appliquer la méthode donnée dans le guide de survie, en utilisant chaque méthode de la section «Quel type de positionnement utiliser en priorité?» dans l'ordre donné, si tu pense que la méthode est pertinente dans ton cas bien sûr.

Je donnerais bien des conseils plus précis mais je n'ai pas la moindre idée de ce que tu veux mettre dans tes blocs rouge, jaune, vert et bleu; je ne sais pas s'ils doivent être extensibles en hauteur ou non, quels types de contenu ils accueillent, etc. Tu dois pouvoir placer les blocs jaune, bleu et vert en absolu, par rapport au bloc rouge parent (qui doit alors être en position:relative pour jouer le rôle de référent, mais sans pour autant être décalé via une propriété top ou autre). À voir en fonction du design et du contenu exacts.
En se penchant un peu sur ton pb, on voit en effet que tu as mélangé plein de choses et revoir les bases ne serait pas un luxe Smiley lol .

Voila un code plus propre

<style type="text/css"> 
<!-- 

html, body, p, div {
margin: 0;
padding:0;
}

html, body {
height:100%;
}

#toutTout {
min-height:100%;
width:100%;
position:relative;
background-color:yellow;
}

#tout { 
width:760px;
margin:0 auto;
} 

#blocCouleurs {
width:100%;
height:300px;
position:absolute;
bottom:0;
}

#rouge{ 
width:100%;
height:300px;
background-color:red;
position:relative;
}

#orange { 
background: #f80;
width: 777px; 
height: 95px; 
position: absolute;
right:0; bottom:0;
} 
 
#marine { 
background: #004; 
width: 290px; 
height: 500px; 
position: absolute;
right:0; bottom:16px;
} 
 
#olive { 
background: #570;
width: 124px;
height: 200px;
position: absolute;
bottom:41px;
right:360px;
}  

--> 
</style> 
</head> 
 
<body> 
<div id="toutTout">
	<div id="tout">
	<p>Texte de la page.</p> 
	<p>exte de la page.</p> 
	<p>Texte de la page.</p> 
	<p>Texte de la page.</p> 
	</div> 

	<div id="blocCouleurs">
		<div id="rouge"> 
			<div id="orange"> 
				<div id="marine"> 
					<div id="olive"></div> 
				</div> 
			</div> 
		</div>
	</div>
</div>
             
 
</body> 
</html>


Les blocs "#toutTout" et "#blocCouleurs" sont optionnels, tout dépend du design que tu veux faire. Ils servent à positionner tous tes blocs de couleurs tout en bas de la page.

a+
Je ne sais comment te remercier, Cinqcenttreize ! Merci également à toi Florent pour tes enseignements qui nous sont si précieux.

Je vous aurais bien invité à boire une tasse de thé !

Bien, ...me reste plus qu'à faire un coup de nettoyage dans le code de mes pages.
Sujet clos
Aller à