ref.thorstn.com /
private moziloCMS und CSS Referenzseite

Newsbox 2 (mit Mouseover-Effekt)


Dies ist eine einfach Newsbox mit Mouseover-Effekt.
Hierfür wird nur eine Angabe in der .css Datei benötigt.
Diese Newsbox ist wesentlich schlichter gehalten und wird auch den meisten Ansprüchen genügen.
Der Text innerhalb der Box ist zentriert. Den Text kann man natürlich auch links- oder rechtsbündig anbringen oder im Blocksatz (text-align:justify).

Desweiteren färbt sich die Hintergrundfarbe der Newsbox beim Herüberfahren mit der Maus in Rot und die Schriftfarbe wird weiß.

In der .css Datei wird folgendes definiert:

div.newsboxeinfach {
    vertical-align:top;
    float: right;
    border:1px solid #000000;
    background-color: #ffffff;
    width:165px;
    padding:10px;
    margin:0px 0px 5px 10px;
    color:#767676;
    text-align:center;
   }

div.newsboxeinfach:hover {
    background-color:#ff0000;
    color:#fff;
   }

Als benutzerdefinierte Syntax wird folgendes angelegt:

newsboxeinfach = <div class="newsboxeinfach">{VALUE}</div>

Eintrag in die Inhaltsseite:

[newsboxeinfach|Dies ist eine einfach Newsbox mit Mouseover-Effekt.
Hierfür wird nur eine Angabe in der .css Datei benötigt.]