[HOW TO] CSS Code Example 3 - Quote Boxes

[iamtheoneneo]

This is the 3rd tutorial on CSS implementation for Xippy websites. (can be moved if needed)
At the time of writing there is no support for html on the forums however the below code can be used in news items etc, when xippy allows html on the forums this will be a good way of quoting if that is not set up at that time.

This code will implement what i consider as being a 'quote box' , obviously it can be used for more then just that.
The Result


Quick Tutorial
All i am doing here is defining 4 containers for what is effectively 2 boxes on top of each other, take a container or two away and your only have one box. Be careful when editing as you must match the inner container variables to the outer.

The Code Part 1 CSS

<style type="text/css">
.curlycontainer{
border: 1px solid #828282;
width: 350px;}

.curlycontainer .innerdiv{
position: relative;
left: 200px;
top: 2px;}

.shiftcontainer{
position: relative;
left: 7px;
top: 5px; }

.shadowcontainer{
width: 350px;
background-color: #828282;}

.shadowcontainer .innerdiv
{position: relative;
background-color: #FFFFFF;
padding: 6px;
left: 5px;
top: -5px;}
</style>

HTML Code to display the box in a specified area and to display your text

<div class="shiftcontainer">
<div class="shadowcontainer">
<div class="innerdiv">
<b>Quote</b> <br/>
code by neo<br/>
demo<br/>
for xippy
</div></div></div>