|
 The advantage of the CSS and DIV tag is to be
able to create extensible blocks of various aspects; rounded edges or drop shadows for example.
By imbricating several DIV tags and by positioning them via the CSS the possibilities can be numerous…
1. Block with rounded edges
 In this example the only images used will be the 4 corners of the block.
 In HTML the goal is to structure the tags in a certain
order so that the various elements extend in a coherent way according
to the contents and the width of the block.
<div class="box">
<div class="box_tl"><div class="box_tr"></div></div>
<div class="box_content>
Text contained in the block.
</div>
<div class="box_bl"><div class="box_br"></div></div> </div>
In CSS
div.box {
width: 150px;
background-color: #ddd9d7;
}
div.box div.box_tl {
background: url("images/box_tl.gif") no-repeat 0 0;
}
div.box div.box_tr {
background: url("images/box_tr.gif") no-repeat 100% 0;
padding-top: 12px;
}
div.box div.box_bl {
background: url("images/box_bl.gif") no-repeat 0 100%;
}
div.box div.box_br {
background: url("images/box_br.gif") no-repeat 100% 100%;
padding-top: 12px;
}
The padding of 12 pixels in the classes “.box_tr” and” .box_br " makes it possible to reveal the 2 round-offs at top and the bottom of the block.
2. Drop shadow
 Broadly the installation of a block with a drop shadow is equivalent to a block with rounded edges.
For clarity reasons on this example I left on the basis a square to right angles but it is easy to cumulate rounded edges and drop shadow, all is question of images and cutting.
 The image division will consist in “slicing” only what
is necessary, i.e. the 3 corners and the vertical and horizontal ranges
will be multiplied in CSS.
<div class="shadow">
<div class="shadow_r"><div class="shadow_tr">
<div class="shadow_content>
Text contained in the block.
</div>
</div></div>
<div class="shadow_b">
<div class="shadow_bl"><div class="shadow_br"></div></div>
</div>
</div>
In CSS
div.shadow {
width: 150px;
}
div.shadow div.shadow_content {
background-color: #ddd9d7;
}
div.shadow div.shadow_r {
background: url("images/shadow_r.gif") repeat-y 100% 0;
}
div.shadow div.shadow_tr {
background: url("images/shadow_tr.gif") no-repeat 100% 0;
padding-right: 12px;
}
div.shadow div.shadow_b {
background: url("images/shadow_b.gif") repeat-x 0 100%;
}
div.shadow div.shadow_bl {
background: url("images/shadow_bl.gif") no-repeat 0 100%;
}
div.shadow div.shadow_br {
background: url("images/shadow_br.gif") no-repeat 100% 100%;
padding-top: 12px;
}
The padding of 12 pixels in the classes “.shadow_tr” and” .shadow_br "
makes it possible to reveal the shades of right-hand side and the
bottom of the block and to prevent the covering of the colour of the
block of contents.
 |
