problème border et margin
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:
1
2
3
4
5
6
| <div id="content_top"> </div>
<div id="content">
<!-- du contenu-->
<p>Un paragraphe de texte<p>
</div>
<div id="content_bottom"> </div> |
Et le CSS:
Code:
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.
