Vorlage 3 Spalten

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