ImcDeDerselbeText - nur dass die beschriebenen Formatierungen so angezeigt werden, wie sie dann auch aussehen.

Die Eventspecial-Box (rechts \xFCber dem Newswire) wurde etwas ansehnlicher gestaltet.

Das ist \xFCbrigens \xFCberhaupt nicht kompliziert, und macht optisch schwer was her.

praktisch sieht das jetzt so aus:

<div style='background: #9CCECD; border: 1px solid #003333; padding: 4px;
font-size: 0.7em;'>
   Text der in der Infobox stehen soll. Incl. <b>Formatierungen</b> und
   zB <a href="dahin.html">Links</a>.
</div>
<br>

Das <div></div>-Tag schlie\xDFt einen beliebigen (Text-)Bereich auf einer
HTML-Seite ein, ohne sein Aussehen jedoch selbst zu ver\xE4ndern.
Es funktioniert nur als Klammer oder Container.

bunt wird das ganze erst in Verbindung mit der style=' '-Anweisung.
Damit kann mensch einem HTML-Tag Formatierungs-Eigenschafte nach
der Schreibweise von CSS-Stylesheets mitgeben.

Das funktioniert mit allen Tags die mensch so zur Textformatierung einsetzt.
also zum Beispiel

<p style='background: red'>text auf rot</p>

erzeugt einen Absatz der rot hinterlegt ist.


oder

<b style='border: 1px solid green; padding: 3px;'>umrandet</b>
anstelle von <b>nurfett</b>

macht nicht nur *fett* sondern auch noch einen
gr\xFCnen Rand (1 Pixel breit und "solid" also nicht gestrichelt oder gepunktet)
um den entsprechenden Text.

padding: 3px; sorgt daf\xFCr, dass der Rahmen nicht direkt an den Text st\xF6\xDFt,
sondern eine "Polsterung" von 3 Pixeln bekommt.

Zur\xFCck zu unserem Beispiel aus dem Eventspecial:

<div style='background: #9CCECD; border: 1px solid #003333; padding: 4px;
font-size: 0.7em;'></div>

macht folgendes:

background: #9CCECD;    -Hintergrund dunkelt\xFCrkies
border: 1px solid #003333; - rand dunkelblau
padding: 4px;   - 4 Pixel innere Polsterung
font-size: 0.7em; - Schriftgr\xF6\xDFe auf 70% verkleinern.
(normale Schriftg\xF6\xDFe entspricht 1em , 1.3em w\xFCrde auf 130% verg\xF6\xDFern)

Alle m\xF6glichkeiten von CSS-Styles sind bei SelfHTML erkl\xE4rt:
http://selfhtml.teamone.de/css/formate/direkt.htm

Farben unter HTML:
http://selfhtml.teamone.de/html/allgemein/farben.htm

Vielleicht l\xE4\xDFt sich mit diesen einfachen Tricks das eine oder andere Feature
noch sch\xF6ner gestalten?


Viel Spass beim "stylen"!

-- InIt - 09 Apr 2003
Topic revision: r2 - 10 Mar 2005, SkeP
This site is powered by FoswikiCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback