/*Der CSS-Code

Im ersten Abschnitt werden das Layout der Box festgelegt: 
*/

.rbox { 
background-color: #ffffff;
color: #000000; 
font-family: Verdana, Calibri, Arial, Helvetica, Sans-serif; 
font-size: 12px; 
width: 80%; margin: 1em auto; 
} 

/*
Mit "background-color" wird die Hintergrundfarbe eingestellt, wobei diese natürlich die selbe sein sollte wie sie bei den Eckbildern, verwendet wurde. 

Mit "color" wird die Schriftfarbe angegeben, mit "font-family" die zu verwendende Schriftart und mit "font-size" die Schriftgröße. 

Der Wert "width" wird angegeben wie Breit die Box im zur Verfügung stehenden Platz sein soll. Die Angabe wird in Prozent angegeben. 

Will man die Box links ausrichten wird statt dem margin, margin-left eingetragen, für rechts ausgerichtet margin-right. 


Im zweiten Abschnitt werden die Bilder positioniert: 
*/

.rbox_oben div { 
background: url(../images/li_oben.jpg) no-repeat top left; 
} 

.rbox_oben { 
background: url(../images/re_oben.jpg) no-repeat top right; 
} 

.rbox_unten div { 
background: url(../images/li_unten.jpg) no-repeat bottom left; 
} 

.rbox_unten { 
background: url(../images/re_unten.jpg) no-repeat bottom right; 
} 

/*In diesem Beispiel wird davon ausgegangen, das die Eck-Bilder in einem Ordner "images" liegen. */

/*Falls Sie Ihre Bilder andere Namen haben oder an einem anderen Ort liegen, passen Sie in diesem Bereich die Angaben an. 


Im dritten Abschnitt werden noch ein paar Angaben zu den Bildern und dem Abstand des Textes zum Rahmen fixiert. 
*/

.rbox_oben div, .rbox_oben, .rbox_unten div, .rbox_unten { 
width: 100%; 
height: 20px; 
font-size: 1px; 
} 

.rbox_inhalt { 
margin: 0 10px; 
} 

/*Wichtig ist hier die Angabe "height" diese sollte der Höhe, der verwendeten Bildern entsprechen. Hier haben diese Bilder eine Größe von 10x10 Pixel, also muss auch dieser Wert auf 10px eingestellt sein. 

Mit der Angabe "margin" kann der seitliche Abstand des Textes zum Rahmen verändert werden.