Discussion :

[mikael2235]

Bonjour à tous,

Je cherche à faire un cadre en css avec 3 images :
top
middle
bottom

J'ai donc défini 3 styles :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
.cadregauchetop{
	background-image:url("./images/design1_12.png");
	background-repeat: no-repeat;
	height: 23px; /*Hauteur element - padding-top*/
	color:#fff;
	font-size: 12pt;
	font-weight: bold;
	padding : 3px 10px 0px 10px;
}
.cadregauchemiddle{
	background-image:url("./images/design1_16.png");
	background-repeat: repeat-y;
	padding : 5px 10px 5px 10px;
}
.cadregauchebottom{
	background-image:url("./images/design1_19.png");
	background-repeat: no-repeat;
	height: 6px;

Lorsque je mets ceci, ça fonctionne parfaitement :

Code :

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

1
2
3
4
 
<div class="cadregauchetop">Mon titre</div>
<div class="cadregauchemiddle">Mon texte</div>
<div class="cadregauchebottom"></div>

Par contre, si je remplace mon div par un h2, tout s'affiche mais j'ai un espace entre mon top et mon middle :

Code :

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

1
2
3
4
 
<h2 class="cadregauchetop">Mon titre</h2>
<div class="cadregauchemiddle">Mon texte</div>
<div class="cadregauchebottom"></div>

Je précise que je n'ai pas de style h2 dans mon css.

Savez vous d'ou cela peut venir ?

Merci. Mikael

[Torgar]

Salut,

C'est justement parce que tu n'as pas de style pour la balise <h2></h2> que les espaces s'affiche.

Rajoute ça pour voir :

Code :

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

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

Les balises <h*> possèdent des styles par défaut. Notamment des marges internes et des espacements.

[mikael2235]

Merci, ça fonctionne parfaitement