Nachdem ich heute mal interessehalber die Zitatebox von Lima-City in CSS rekonstruiert habe, möchte ich gern ein paar Tipps weitergeben, wie man so etwas auf seiner eigenen Homepage einbauen kann...sei es für ein selbstprogrammiertes Forum, für ein CMS o.ä.
Auf die Umwandlung einer Zeichenkette (z.B. [ quote ]) will ich hier nicht näher eingehen; dies kann z.B. über die PHP-Funktion str_replace geschehen.
Mehr dazu findet ihr in den PHP-Tuts oder über die Boardsuche (Stichwort: BBCode)
Im Folgenden möchte ich mich vorwiegend mit den nötigen CSS-Formatierungen beschäftigen.
Gehen wir einmal davon aus, dass mithilfe der oben genannten PHP-Funktion aus der Zeichenfolge [ quote ] folgende neue Zeichenfolge erzeugt wurde:
<div class='quotelima'><span style='font-size:12px;color:black;'>Zitat:</span><br>
dann muss das Ende der box, also [/ quote ], in folgende Zeichenfolge umgewandelt werden:
</div><br>(das br-Tag ist dabei optional)
Demnach wird also um den markierten Text ein div-Container geöffnet, der über die CSS-Klasse "quotelima" formatiert wird. Wie man sehen kann hat das Wort "Zitat" die Schriftgröße 12 Pixel (kommt dem Original schon sehr nah :wink:).
Kommen wir nun zu den eigentlichen CSS-Befehlen.
In einer externen Stylesheet-datei oder im Head-Bereich des Dokuments müssen nun folgende Formatierungsbefehle untergebracht werden:
.quotelima {
font-family:sans-serif;
font-size:11px;
color:black;
border:1px solid #999999;
background-color:#f0f0f0;
padding:2px;
margin-left:20px;
margin-bottom:3px;
position:relative;
left:0px;
float:left;
}
Wie ihr seht habe ich die Originalfarben ein wenig verändert. Wenn ihr sie übernehmen wollt, fertigt einen Screenshot an.
Die Schriftgröße beträgt 11 Pixel, damit der Text etwas kleiner ist als die Überschrift "Zitat:".
Die Befehle "position:relative;left0px;" sorgen in Zusammenhang mit "float:left;" und "Margin-left:20px;" dafür, dass die Zitateboxen immer untereinander erscheinen, und immer den gleichen Abstand zum Linken Seitenrand haben. Im "Original" ist der Seitenabstand nach links übrigens noch etwas größer, aber ich habe ihn zugunsten längerer Zitate verkleinert.
Ich hoffe ich konnte euch beim Nachbau einer solchen Zitatebox ein wenig weiterhelfen.
Wenn ihr Fragen zu diesem Tutorial habt, schreibt mir eine PN oder postet es ins Profilgästebuch.
Eine Funktionsreferenz zur PHP-Funktion str_replace findet iher hier:
http://www.selfphp.de/funktionsreferenz/string_funktionen/str_replace.php
Die Zitateboxen Im Einsatz könnt ihr euch hier auf lima oder unter
http://ssd_bonn.xardas.lima-city.de/cms/index2.php?page=quotes
ansehen.
Viel Spaß beim Nachbau!
Gruß
ssd_bonn