ref.thorstn.com /
private moziloCMS und CSS Referenzseite

Newsbox 1


Dieses ist eine grafisch gestaltete Newsbox und besteht aus drei Einzelbildern.
Diese Box ist rechtsbündig.
Da die Newsbox rechts aus drei Grafiken besteht, benötigt die .css Datei auch drei einzelne DIV:


div.newsbox {
    vertical-align:middle;
    width:170px;
    background-image: url("../grafiken/newsbox_mitte.png");
    background-repeat: repeat-y;
    padding:0px 15px;
    margin:0 0 0 10px;
    color:#747474;
}
div.newsboxoben {
    vertical-align:top;
    width:170px;
    height:31px;
    background-image: url("../grafiken/newsbox_oben.png");
    background-repeat:no-repeat;
    padding:0px 15px;
    margin:5px 0 0 10px;
}
div.newsboxunten {
    vertical-align:bottom;
    width:170px;
    height:30px;
    background-image: url("../grafiken/newsbox_unten.png");
    background-repeat: no-repeat;
    padding:0px 15px;
    margin:0 0 0 10px;
}

Die benutzerdefinierte Syntax sieht dann so aus:

newsbox = <div style="height:auto; width:200px; float:right;"><div class="newsboxoben"></div><div class="newsbox">{VALUE}</div><div class="newsboxunten"></div></div>

Eintrag in die Inhaltsseite:

[newsbox|Dieses ist eine grafisch gestaltete Newsbox und besteht aus drei Einzelbildern.
Diese Box ist rechtsbündig.]