Anpassbare Vorlage für drei Spalten

seitliche Spalten als dekoratives Element - oder als vollwertige Spalten für Links und Infos

Hier könnte Text stehen - muß aber nicht

Hier kannst du:

  • die Farbe des linken und rechten Randes (getrennt) ändern zu deiner Lieblingsfarbe oder passend zum Shop

  • die Breite der Ränder ändern und damit eine oder zwei seitliche Spalten erzeugen

  • Textabschnitte mit farbigen Trennlinien abgrenzen - einfach etwas experimentieren.

  • und eine Liste wie diese hier mit farbigen Zeichen erstellen. Die gibt es z.B. hier oder hier.

Bitte die beiden Schattenbilder speichern und auf eigenen Webspace laden:    und  
Alternativ dazu gehen auch diese beiden in gold:    und  
oder diese in metallic:   und


Quelltext stylesheet

<style type="text/css">

#linkespalte {
    /*hier die Farbe der linken Spalte eintragen und die Bildadresse */
    background: #BF0000 url(http://domain/ordner/shadow.gif) repeat-y right;
    padding: 15px 18px 5px 5px;    /* Randabstände des Textes */
    text-align: left;              /* Textausrichtung */
    color: #ffffff;                /* Schriftfarbe */
    font-size: 85%;                /* Schriftgröße im linken Rand */
    width: 85px;                   /* Spaltenbreite links */
}
#rechtespalte {
    /*hier die Farbe der rechten Spalte eintragen und die Bildadresse */
    background: #BF0000 url(http://domain/ordner/shadow2.gif) repeat-y left;
    padding: 15px 5px 5px 18px ;   /* Randabstände des Textes */
    text-align: left;              /* Textausrichtung */
    color: #ffffff;                /* Schriftfarbe */
    font-size: 85%;                /* Schriftgröße im rechten Rand */
    width: 85px;                   /* Spaltenbreite rechts */
}
#text {                            /* mittleres Feld für die Beschreibung */
    color: #663399;                /* Schriftfarbe */
    font-size: 100%;               /* Schriftgröße */
    padding: 0px 15px;             /* Randabstände des Textes */
    background: #ffffff;           /* Hintergrundfarbe in der Mitte */
}
#text hr {                         /* Formate der Trennlinie */
    background-color: #ffffff;     /* innere Farbe der Linie */
    border: dotted #ee0033 3px;    /* Farbe, Stil und Dicke des Linienrahmens */
    height: 6px;                   /* Höhe/Dicke der Linie */
    width: 100%;                   /* Breite der Linie */
    text-align: center;            /* Ausrichtung wenn unter 100% */
    margin: 15px 0px 15px 0px;     /* Abstände zum Text */
}
.liste {                           /* Listenzeichen */
    list-style-image: url(http://domain/ordner/reddiamo.gif);
}
</style>

Bei dunkler Hintergrundfarbe in der Mitte die beiden Schattenbilder vertauschen.


Quelltext HTML

<table cellpadding="0" cellspacing="0" border="0" width="100%" >
<tr>

<!--linker Rand - löschen für Rand nur rechts -->
<td valign="top" id="linkespalte">
Hier der Inhalt der linken Spalte
</td>
<!-- Ende linker Rand -->

<!--Feld für Beschreibung -->
<td id="text">
<p>Text</p>

<hr>

<p>Text</p>

<ul class="liste">
<li>Listenpunkt<br><br></li>
<li>Listenpunkt<br><br></li>
</ul>

<hr>

</td>
<!-- Ende Beschreibungsfeld -->

<!--rechter Rand / löschen für Rand nur links -->
<td valign="top" id="rechtespalte" >
Hier der Inhalt der rechten Spalte
</td>
<!-- Ende rechter Rand -->

</tr>
</table>
<p style="color: #C0C0C0; text-align: right; font-size: 75%;">Design: terrenal</p>

Vorsicht, kein Semikolon, Anführungszeichen oder Raute mit löschen bei den Änderungen.
Hier könnte Text stehen - muß aber nicht

Design: terrenal

Statistik
heute: 132 
online: 5