28173 sujets

CSS et mise en forme, CSS3

[Résolu] Page qui dépasse en largeur

Bonjour,

Je suis en train de commencer un squelette SPIP, mais dès le départ, ça va mal: pour une raison que j'ignore totalement, la page "déborde en largeur" sans raison apparente. D'où un vilain scroll horizontal Smiley decu

Help!

Le code HTML:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html dir="ltr" lang="fr">
<head>
<title>KaDanS.gp</title>
<meta name="description" content="Danse et culture en Gwada" />


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<meta name="generator" content="SPIP 1.9.2b [9381]" />


<link rel="shortcut icon" href="squelettes/favicon.ico" />


<link rel="alternate" type="application/rss+xml" title="Syndiquer tout le site" href="http://localhost/web/kadans/spip.php?page=backend" />


<link rel="stylesheet" href="squelettes/spip_style.css" type="text/css" media="all" />





<link rel="stylesheet" href="squelettes/impression.css" type="text/css" media="print" />


<link rel="stylesheet" href="squelettes/kadans.css" type="text/css" media="projection, screen, tv"  />



<script src="http://localhost/web/kadans/spip.php?page=jquery.js" type="text/javascript"></script>

<!-- insert_head -->

</head>
<body class="page_sommaire">
<div id="page">
  <div class="entete">
   
	 <div id="entete">



<a rel="start" href="http://localhost/web/kadans/">
<img src="local/cache-vignettes/L196xH56/siteon0-94496.png" alt='KaDanS.gp'  width='196' height='56' class='spip_logos format_png'  style='height:56px;width:196px;' title='KaDanS.gp' />

	
</a>




<br class="nettoyeur" />
</div>	 
	 


<div class="rubriques">
	<ul>
	
		<li>
			<a href="spip.php?rubrique1">Danse</a>

			

		</li>

	
		<li>
			<a href="spip.php?rubrique9">Editos</a>

			

		</li>
	
		<li>
			<a href="spip.php?rubrique2">Konsyans</a>

			

		</li>
	
		<li>

			<a href="spip.php?rubrique8">Rézonans</a>

			

		</li>
	

	</ul>
</div>

<div class="bandeau">&nbsp</div>
	 
	 <div id="hierarchie">Accueil du site</div>
  </div>
  
  <div class="contenu">

  </div>
  
  <div class="encart">
  </div>
  
  <div class="pied">
  </div>
</div>
</body>
</html>


Et le fichier kadans.css:

body{
  background-color: #000000;
	font-size: 100%;
  color: #72994D;
	font-family: Verdana, Tahoma, Arial, sans-serif;
}

/*  ------------------------------------------
/*  Disposition a l'ecran des blocs principaux
/*  ------------------------------------------ */
#page{
  position: absolute;
  width: 100%;
  }
#entete{
  text-align:center;
}

div.rubriques{
  text-align:center;
}
.rubriques ul{
  width:100%;
}
.rubriques ul li{
  display:inline;
}

div.bandeau{
  background-image:url('images/dansers.jpg');
  width:100%;
  height:68px;
}

div.encart{
  position: absolute;
  right:0;
  width:250px;
}

div.contenu{
  margin-right:250px;
}


Les div contenu, encart et pied sont donc vides, pour l'instant.
Je comprends vraiment pas ce qu'il se passe...
Modifié par deor (30 Oct 2007 - 19:13)
Petite modif: l'id entete était redondant avec la class entete, j'ai remplacé l'id par "logo".
La feuille de style styles_spip.css ne contient rien concernant mon code.

D'après l'inspection de firebug, c'est l'ul contenant le menu qui dépasse.
Pourtant aucune règle de positionnement ne lui est appliquée et seule width: 100% est précisée Smiley fache
Salut,

Ce sont les paddings et margins par défaut qui te provoque ce scroll
1) le padding de ton ul
2) le margin de body

pour le ul, ben rajouter: padding: 0;
pour le body, pareil margin: 0; ou une variante avec ta #page en absolute top: 0; left: 0 ou mieux la laisser dans le flux (eliminer absolute car je ne vois pas son utilité) et body margin: 0; ul padding: 0; Smiley cligne Smiley cligne
Merci soo much Smiley smile
C'est étrange, quand même, cet affichage par défaut.

Pour le positionnement absolute, j'en ai besoin pour la suite.

Merci encore...
Bon ben c'était bon, jusqu'à ce que je rajoute des éléments à ma page...
Cette fois, c'est le même problème, mais uniquement sous IE (testé avec le 6), plus sous firefox...
Je poste les motifs sur mon site de test ce soir.

Y'aurait-il pas un tutorial que je pourrais lire une bonne fois pour toute sur ce sujet?
Salut,

Toutes les balises ont un margin et padding par défaut qui est de surcroit de valeur différente suivant le navigateur, soit tu te sers de 
*{margin: 0; padding: 0,}

Pour remettre tout le monde d'accord (* est le sélecteur universel, ce qui revient à placer à 0 les valeurs du padding et margin de toutes les balises) et tu codes ta css en fonction (c'est ce que je fais, mais il parait que ce n'est pas conseillé Smiley cligne ) soit tu te sers de ce code en test pour voir si tu as un élément perturbateur et tu le modifies localement...

Pas bien compliqué Smiley biggol
Sujet clos
Aller à