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 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135
| <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test bordures</title>
<style type="text/css">
body{
text-align:center;
}
div.conteneur_externe{
position:relative;
margin:2em auto;
padding:0;
width:70%;
height:auto !important;
height:0;
}
div.conteneur_interne{
padding:30px;
}
p{
margin:0;
padding:0;
text-align:justify;
}
div.div_extra1,
div.div_extra2,
div.div_extra3,
div.div_extra4{
position:absolute;
width:20px;
height:20px;
}
div.div_extra1{
top:0;
left:0;
background:#b88;
}
div.div_extra2{
top:0;
right:0;
background:#8b8;
}
div.div_extra3{
bottom:0;
right:0;
background:#88b;
}
div.div_extra4{
bottom:0;
left:0;
background:#b8b;
}
div.div_extra5,
div.div_extra6,
div.div_extra7,
div.div_extra8{
position:absolute;
overflow:hidden;
}
div.div_extra5 span,
div.div_extra6 span,
div.div_extra7 span,
div.div_extra8 span{
display:block;
position:absolute;
width:100%;
height:100%;
}
div.div_extra5{
width:100%;
height:20px;
top:0;
left:20px;
}
div.div_extra5 span{
right:40px;
background:#8ee;
}
div.div_extra6{
position:absolute;
width:20px;
height:100%;
top:20px;
right:0;
overflow:hidden;
}
div.div_extra6 span{
left:0;
bottom:40px;
background:#e8e;
}
div.div_extra7{
width:100%;
height:20px;
bottom:0;
left:20px;
}
div.div_extra7 span{
right:40px;
background:#e88;
}
div.div_extra8{
width:20px;
height:100%;
top:20px;
left:0;
overflow:hidden;
}
div.div_extra8 span{
left:0;
bottom:40px;
background:#88e;
}
</style>
</head>
<body>
<div class="conteneur_externe">
<div class="div_extra1"><span></span></div>
<div class="div_extra2"><span></span></div>
<div class="div_extra3"><span></span></div>
<div class="div_extra4"><span></span></div>
<div class="div_extra5"><span></span></div>
<div class="div_extra6"><span></span></div>
<div class="div_extra7"><span></span></div>
<div class="div_extra8"><span></span></div>
<div class="conteneur_interne">
<h1>Lorem ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</body>
</html> |
Partager