1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
| <!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<title></title>
<style>#bloc {
width: 100%;
background-color: transparent;
background:url("/images/5.gif") repeat-x left top;
}
#bloc .bord_bas {
background:url("/images/7.gif") repeat-x left bottom transparent;
}
#bloc .haut_droite {
display: block;
float: right;
width: 46px; //remplacer XX par la largeur de votre bord
height: 45px; //remplacer YY par la hauteur de votre bord
background:url("/images/2.gif") no-repeat right top transparent;
}
#bloc .haut_gauche {
display: block;
width: 46px; //remplacer XX par la largeur de votre bord
height: 45px; //remplacer YY par la hauteur de votre bord
background:url("/images/1.gif") no-repeat left top transparent;
}
#bloc .bord_gauche {
background:url("/images/8.gif") repeat-y left top #000000; //la couleur correspond à la couleur de l'élément n°9
}
#bloc .bord_droit {
background:url("/images/6.gif") repeat-y right top transparent;
}
#bloc .bas_gauche {
display: block;
width: 46px; //remplacer XX par la largeur de votre bord
height: 45px; //remplacer YY par la hauteur de votre bord
background:url("/images/3.gif") no-repeat left top transparent;
}
#bloc .bas_droit {
display: block;
float: right;
width: XXpx; //remplacer XX par la largeur de votre bord
height: YYpx; //remplacer YY par la hauteur de votre bord
background:url("/images/4.gif") no-repeat right top transparent;
}</style>
</head>
<body>
<div id="bloc">
<div class="bord_bas">
<div class="haut_droite"></div>
<div class="haut_gauche"></div>
<div class="bord_gauche">
<div class="bord_droit">
<h2>Lorem ipsum</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
vulputate laoreet urna. Integer magna. Donec facilisis lectus sed
quam. Curabitur sit amet lacus id lacus facilisis venenatis. </p>
</div>
</div>
<div class="bas_droit"></div>
<div class="bas_gauche"></div>
</div>
</div>
</body>
</html> |
Partager