28172 sujets

CSS et mise en forme, CSS3

"bug" surprenant

Bonjour, j'étais en train de créer un menu pour un site lorsque je me suis aperçu d'un "bug" (je met entre parenthèses parce que c'en est peut être pas un) surprenant.

J'ai créé du coup un exemple très simple pour vous le soumettre et tenter de comprendre d'où vient le problème.

<!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" xmlns:fb="http://api.facebook.com/1.0/">
<head>
<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
#header {
  overflow: hidden;
  background: yellow;
  width: 100%;
  height: 55px;
}
#header a {
  text-decoration: none;
}
#header li {
  list-style-type: none;
}
#header ul#content {
  width: 980px;
  height: 100%;
  margin: auto;
}
#header ul#content #logo {
  float: left;
  margin: 0 40px 0 0;
}
#header ul#content #nav {
  float: left;
}
#header ul#content #connect {
  float: right;
}
#center {
  width: 980px;
  height: 1000px;
  background: grey;
  margin: auto;
}
</style>				
</head>
<body>
	<div id="header">
		<ul id="content">
			<li id="logo"><a href="/" id="title">logo</a></li>
			<li id="nav"><a href="/">Page1</a></li>
			<li id="connect"><a href="/">login</a></li>
		</ul>
	</div>	
	<div id="center">
	</div>
</body>
</html>


Voila donc un exemple très basique avec un menu (jaune) et une simulation de contenu de page (gris).

Le problème :
Lorsque l'on rapetisse la fenêtre du navigateur jusqu'à ce que la barre de scroll apparaissent et que l'on tente de se déplacer latéralement avec celle ci, le background et le contenu du header disparaissent.

La question :
Pourquoi ?

Smiley cligne
Modifié par titi12 (24 Jun 2012 - 15:53)
titi12 a écrit :
La question :
Pourquoi ?

Parce que c'est ce que tu demandes dans ton code. Smiley smile

Tu as déclaré une largeur de 100% pour ton #header. Pour commencer, c'était rigoureusement inutile car un élément de type bloc prendra par défaut 100% de la largeur disponible dans son conteneur. De plus une fois que tu as déclaré un width:100%, si tu rajoutes des marges, du padding ou une bordure sur les côtés, la largeur totale occupée par l'élément sera supérieure à 100% de la largeur disponible (c'est le modèle de boite CSS), et ça va dépasser allègrement. Donc le width:100%, à moins de savoir très exactement ce qu'on fait et pourquoi on l'utilise: à éviter.

Ensuite, dans tous les cas ton bloc va prendre 100% de la largeur disponible dans le conteneur, ici l'élément BODY, et cette largeur va être limitée par la largeur du viewport (la largeur de la fenêtre du navigateur, moins une éventuelle barre de défilement). Si ton contenu est plus large que le viewport, ça dépasse. C'est normal, ça marche comme ça.

Deux solutions si vraiment tu as des contenus plus larges que le viewport et que ça pose problème:
1. Utiliser display:table plutôt que display:block (par défaut) sur certains conteneurs. Attention, le mode de rendu display:table a un certain nombre de caractéristiques spécifiques, donc il faudra gérer ces spécificités.
2. Utiliser des Media Queries pour adapter la disposition des contenus quand le viewport est moins large que Npx (ou autre largeur de référence).
Sujet clos
Aller à