André Willemijns WebSite
Cadre avec une ombre
Modifié le 3 novembre 2007
| D'abord nous réalisons une boîte pour contenir l'ensemble sans couleur de fond délimitée ici par une bordure verte | |
| Puis nous plaçons la partie supérieure | |
| Puis la partie recevant le contenu | Paragraphe de votre choix Paragraphe de votre choix |
| Maintenant nous plaçons la partie inférieure | Paragraphe de votre choix Paragraphe de votre choix |
Code XHTML
<div class="ombre" style="width: 300px;">
<b class="otop"></b>
<div class="int">
<p>Paragraphe de votre choix</p>
<p>Paragraphe de votre choix</p>
</div>
<b class="obottom"></b>
</div>
Code CSS
div.ombre{margin: 10px}
b.otop {display:block; background: #ffd0a8; height: 3px;
overflow: hidden; border: 0; border-right:4px solid #fffff0; }
.int {margin: 0; border:0;border-right:4px solid #646464; background: #ffd0a8; padding: 10px;}
p{margin: 0} p{padding-bottom:0.3em}
b.obottom {display:block;height: 4px; overflow: hidden;
background: #646464;border:0;border-right:4px solid #646464;
border-left:4px solid #fffff0;}
Cadre avec une ombre et une bordure
Modifié le 3 novembre 2007
| D'abord nous réalisons une boîte pour contenir l'ensemble sans couleur de fond délimitée ici par une bordure verte | |
| Puis nous plaçons la partie supérieure | |
| Puis la partie recevant le contenu | Paragraphe de votre choix Paragraphe de votre choix |
| Maintenant nous plaçons la partie inférieure | Paragraphe de votre choix Paragraphe de votre choix |
Code XHTML
<div class="bombre" style="width: 300px;">
<b class="botop"></b>
<div class="bint">
<p>Paragraphe de votre choix</p>
<p>Paragraphe de votre choix</p>
</div>
<b class="bobottom"></b>
</div>
Code CSS
div.bombre{margin: 10px;}
b.botop {display:block; background: #ffd0a8; height: 3px;
overflow: hidden; border: 0; border-top: 1px solid #646464;
border-left: 1px solid #646464; border-right: 1px solid #646464;
margin-right: 3px;}
.bint {border:0;border-right:4px solid #646464; border-left:1px solid #646464;
border-bottom:1px solid #646464; background: #ffd0a8; padding: 10px;}
p{margin: 0}p{padding-bottom:0.3em}
b.bobottom {display:block;height: 3px; overflow: hidden; background: #646464;
border:0;border-right:4px solid #646464;border-left:4px solid #fffff0}