taille des blocs non respectées - balise h1, h2, etc

**polo66** · 06/10/2009, 17h28

Bonjour à tous.

je rencontre un problème, surement basique (quoi que je n'ai pas trouvé d'autres posts similaire)...

je souhaite mettre des balises h1, h2, ... pour mes titres. Ces balises sont définis dans ma feuille CSS, du type:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
h2.cerise
{
	font:Calibri;
	font-size:18px;
	color:#CC9999;
	font-style:normal;
    font-style : normal;
	text-align:left;
	background-image:url(image/fondsdispo.png);
	vertical-align:text-top;
}

par la suite, j'insère dans mon HTML mon titre dans un bloc CSS "titrepages", qui a pour hauteur définie 30px:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div id="titrepages"><h2 class="cerise"> Sous-Titre 2 </h2></div>

Le résultat final:
ma balise h2 est bien respectée. Par contre, le bloc CSS "titrepages" ne respecte pas la hauteur définie. Sa hauteur est de 82px.

Quand je passe ma souris sur le bloc pour avoir plus d'informations, j'obtiens "hauteur: 30px (82px)"

en cas de besoin, je vous communique ci dessous le css de "titrespages"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
div#titrepages {
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	font-family:Calibri, Arial, Verdana;
	clear:both;
	margin:auto;
	width:912px;
	height:30px;
	background-color:#FFF3BD;
	}

Je suis désemparé

Merci par avance pour votre aide et vos conseils !!

polo

**tzilliox** · 06/10/2009, 18h24

Bonsoir polo66,

ne t'inquiètes pas, il n'y a rien de grave, ton problème va être rapidement réglé

En fait les navigateurs appliquent des styles par défaut à certains éléments. Ainsi une balise h2 représente un titre, alors si tu ne précise rien, les navigateurs vont automatiquement ajouter du padding et/ou du margin à cet élément.

Pour contrer cela, le code suivant suffit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
h2 {
	margin: 0;
	padding: 0;
}

Mais tu risques de te retrouver devant le même type de problème plus tard pour les éléments h1, h3, table, etc. Tu peux donc ajouter à ta page un feuille de style qui fasse un "reset" de ces styles par défaut. Le plus connu est celui d'Eric Meyer, mais il y en a plein d'autres !

Pour des remarques plus générales, ton CSS du sélécteur "h2.cerise" comporte deux fois "font-style : normal;". L'attribut "vertical-align" ne sert à rien, car elle n'est pas interprêtée sur les éléments block.

N'hésites pas si tu as d'autres problèmes,
Thomas.