Salut,

J'ai quelques problème avec un rectangle à bouts arrondis. Je m'explique:
Un premier élément div gère le haut de mon rectangle avec donc une image en background.
Un deuxième élément, correspondant au corps de mon bloc, a des bordures à droite et à gauche (pour assurer la continuité avec le haut et le bas).
Un troisième élément gère le bas du rectangle.

Seulement voilà, pour que ces 3 éléments se collent bien, je leur affecté un margin:0; mais ca ne marche pas avec les blocs intérieurs. Un bloc <p></p> en bas du corps du rectangle "repousse" la partie image inférieure du rectangle. J'ai donc un trou entre le bas de l'élément content et le haut de l'élement content_bottom. Je pourrais mettre un margin:0; à mon élément paragraphe mais j'en ai d'autres dans le corps et je ne veux pas changer cette mise en forme.

Voilà le code HTML :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
<div id="content_top">&nbsp;</div>
<div id="content">
<!-- du contenu-->
<p>Un paragraphe de texte<p>			
</div>
<div id="content_bottom">&nbsp;</div>
Et le CSS:

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
#content_top {
	width:946px;
	margin:10px 0 0 22px; /* 0 en bas pour que ca "colle"*/
	background: url(background_top.png) no-repeat left bottom;
}
 
#content {
	background-color: #fff;
	width:944px;
	margin:0 0 0 22px; /* 0 en haut et en bas*/
	border-left:1px solid #f89d4f;
	border-right:1px solid #f89d4f;
}
 
#content_bottom {
	width:946px;
	margin:0 0 10px 22px; /* 0 en haut*/
	background: url(background_bottom.png) no-repeat left top;
}
J'espère que j'ai été assez clair et merci d'avance pour votre aide.