header-xh-01 header-xh-02 header-xh-03 header-xh-04 header-xh-05 header-xh-06 header-xh-07 header-xh-08 header-xh-09 header-xh-10 header-xh-11 header-xh-12 header-xh-13 header-xh-14 headerimage1 headerimage2 headerimage3 headerimage4 headerimage5 headerimage6
Sie sind hier: Startseite > Templates > klr-3col-flex > stylesheet.css > Textformate
Letzte Bearbeitung:

Textformate

Viele der Beispiel habe ich von Michael Zajusch erhalten.

marquee

Das Laufschrift-Format ist eher ein Gag, dessen Format in der user.css eingetragen ist, um zu demonstrieren wie die user.css funktioniert. Wird der Mauszeiger auf den Text gestellt, bleibt der Text stehen. Wie man an den Beispielen sieht scrollt der Text nicht sauber durch, wenn die Textphrase zu lang ist.

p.marquee - Blockbildender Lauftext:

Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. 

div.marquee - Blockbildender Lauftext, der mindestens 150 Pixel hoch ist und der oberhalb und unterhalb einen Abstand von 50 Pixel hat. Zur Verdeutlichung ist das DIV hier mit Trennlinien umschlossen:

 

Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. Auf deiner rechten Seite fährt ein riesiges Feuerwehrauto und hält die gleiche Geschwindigkeit wie du. 

 

silbentrennung

span. p. und div.silbentrennung - aktiviert die Fähigkeit moderner Browser zur automatischen Silbentrennung:

Da ich für die gesamte Website die automatische Silbentrennung aktiviert habe schalte ich sie im folgenden Bereich ab. Besonders gut sehen kann man den Effekt der Silbentrennung in Verbindung mit span, wenn man das Browserfenster von Hand schmäler und wieder breiter macht.

 

Demotext zur Silbentrennung

span.Silbentrennung-Anfang: Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele! Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele! (span-Ende) Und ab hier keine Silbentrennung mehr: Sondersprachzusammenhang, Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele!

p.Silbentrennung / div.Silbentrennung + Blocksatz: Hier kommt der gleiche Testsatz zum Einsatz. Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele! Einzelhandelskaufleutegehälter, Donaudampfschiffskapitänsmützen und Problembärerfindervorname sowie Problembärerfindernachname sind natürlich selten genutzte Worte. Beispiele mit solchen Wörtern sind aber einfach gut für bestimmte Beispiele! 

 

underline

p.underline - eine Alternative zu <hr>, der gesamte Absatz wird auf der Höhe der Textzeilenbasis der letzten Zeile mit einer punktierten Linie über die gesamte Absatzbreite unterstrichen:

Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. Auf deiner rechten Seite fährt ein riesiges Feuerwehrauto und hält die gleiche Geschwindigkeit wie du. Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe. Das Schwein und der Hubschrauber haben exakt deine Geschwindigkeit.

span.underline - eine alternative Textunterstreichung, eine punktierte Linie unterhalb der Unterlängen statt einer geschlossenen Linie, die bei Unterlängen unterbrochen wird:

Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. Auf deiner rechten Seite fährt ein riesiges Feuerwehrauto und hält die gleiche Geschwindigkeit wie du. Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe. Das Schwein und der Hubschrauber haben exakt deine Geschwindigkeit.

 

blue

span. p.blue - stellt Text in einem besonderen Farbton dar. Bei nicht modifizierter colordefinition.css ist es der gleiche Farbton wie bei .underline und Links:

Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. Auf deiner rechten Seite fährt ein riesiges Feuerwehrauto und hält die gleiche Geschwindigkeit wie du. Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe. Das Schwein und der Hubschrauber haben exakt deine Geschwindigkeit.

Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. Auf deiner rechten Seite fährt ein riesiges Feuerwehrauto und hält die gleiche Geschwindigkeit wie du. Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe. Das Schwein und der Hubschrauber haben exakt deine Geschwindigkeit.

 

caption

span. p.caption - stellt Text mit 80% Zeichenhöhe, 150% Zeichendicke und in einem Grau mit 53,333% Schwarzwert dar:

Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. Auf deiner rechten Seite fährt ein riesiges Feuerwehrauto und hält die gleiche Geschwindigkeit wie du. Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe. Das Schwein und der Hubschrauber haben exakt deine Geschwindigkeit.

Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. Auf deiner rechten Seite fährt ein riesiges Feuerwehrauto und hält die gleiche Geschwindigkeit wie du. Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe. Das Schwein und der Hubschrauber haben exakt deine Geschwindigkeit.

 

noBr

span. p.noBr - verhindert den Zeilenumbruch im so formatierten Text (white-spacenowrap;):

Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. Auf deiner rechten Seite fährt ein riesiges Feuerwehrauto und hält die gleiche Geschwindigkeit wie du. Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe. Besonders gut sehen kann man den Effekt der nicht umbrechenden Bereiche, wenn man das Browserfenster von Hand schmäler und wieder breiter macht.

Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. Auf deiner rechten Seite fährt ein riesiges Feuerwehrauto und hält die gleiche Geschwindigkeit wie du. Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe. Das Schwein und der Hubschrauber haben exakt deine Geschwindigkeit.

 

col

div.col - stellt Text vor einem hellgrauen Hintergrund dar. Der Hintergrund hat einen Abstand von 1ex zum vorhergehenden Absatz. Der Text hält zum Hintergrundrand einen Abstand von 1ex. Bei Viewports ab 820 Pixel Breite wird der Text auf 2 Spalten verteilt:

Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. Auf deiner rechten Seite fährt ein riesiges Feuerwehrauto und hält die gleiche Geschwindigkeit wie du. Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe. Das Schwein und der Hubschrauber haben exakt deine Geschwindigkeit.

 

Lighter

span. p. div.Lighter - stellt Text in dünnerer Schrift dar:

Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. Auf deiner rechten Seite fährt ein riesiges Feuerwehrauto und hält die gleiche Geschwindigkeit wie du. Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe. Das Schwein und der Hubschrauber haben exakt deine Geschwindigkeit.

 

Bolder

span. p. div.Bolder - stellt Text in 25% dickerer Schrift dar:

Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. Auf deiner rechten Seite fährt ein riesiges Feuerwehrauto und hält die gleiche Geschwindigkeit wie du. Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe. Das Schwein und der Hubschrauber haben exakt deine Geschwindigkeit.

Das ist <b> formatierter Text (50% dicker als Normalschrift) ohne spezielle Schrifttypen-Formatierung </b> zum Vergleich mit der vorstehenen Formatierung. 

Das ist <b> formatierter Text ohne spezielle Schrifttypen-Formatierung </b> zum Vergleich mit der vorstehenen Formatierung.

Bold

span. p. div.Bold - stellt Text in 100% dicker Schrift dar:

Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. Auf deiner rechten Seite fährt ein riesiges Feuerwehrauto und hält die gleiche Geschwindigkeit wie du. Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe. Das Schwein und der Hubschrauber haben exakt deine Geschwindigkeit.

Das ist <b> formatierter Text (50% dicker als Normalschrift) ohne spezielle Schrifttypen-Formatierung </b> zum Vergleich mit der vorstehenen Formatierung.

 

smaller

span. p. div.smaller - stellt Text in 85% Größe der Schrift dar:

Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. Auf deiner rechten Seite fährt ein riesiges Feuerwehrauto und hält die gleiche Geschwindigkeit wie du. Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe. Das Schwein und der Hubschrauber haben exakt deine Geschwindigkeit.

 

bigger

span. p. div.bigger - stellt Text in 125% Größe der Schrift dar:

Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. Auf deiner rechten Seite fährt ein riesiges Feuerwehrauto und hält die gleiche Geschwindigkeit wie du. Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe. Das Schwein und der Hubschrauber haben exakt deine Geschwindigkeit.

 

subHeading

p.subHeading - stellt text als Unterüberschrift dar ohne das ein H-Tag (HTML: h1 - h6) verwendet wird (150% Größe und 150% Dicke):

Das ist eine Überschrift ohne H-Tag

 

clear

p. div.clear - beendet das Textfloating:

Dieser Text floatet um das Bild herum. Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. Auf deiner rechten Seite fährt ein riesiges Feuerwehrauto und hält die gleiche Geschwindigkeit wie du. 

Und dieser Text ist mit p.clear formatiert.

 

blockAuth und Zitat ()

p.blockAuth - stellt Text 'normal', also z.B. nicht kursiv und rechtsbündig dar:

Autorenangaben oder Quellenangaben

Dies ist insbesondere nützlich wenn man ein Zitat oder ganzen Artikel aus fremder Quelle als Zitat vormatiert und zusätzlich dann am Ende angeben möchte, woher der Text kommt. Da das Zitat ja kursiv formatiert ist und nach unten eine optische Abgrenzung hat, wäre es nicht ganz bequem die Nennung der Quelle optisch innerhalb des Zitates aber anders formatiert anzugeben.

dafür gibt es .blockAuth

 

autoFussn_Verweis

Halbautomatischer Fußnoten-Verweis mit automatisch hochzählenden Fußnoten

Dieses Format ist etwas kompliziert zu handhaben, da es eigentlich aus drei zusammengehörenden, jedoch unterschiedlichen Formaten besteht: span.autoFussn_Verweis, div.Headline_Fussnote und p.auto_Fussnote

Innerhalb eines Fließtextes1 formatiert span.autoFussn_Verweis den Verweis auf eine Fußnote2, die üblicherweise unter einer Seite zu finden ist. Das Besondere ist, dass die Absätze3 in den Fußnoten sich automatisch hochzählen. Somit muß man dann bei der Erstellung der Fußnoten darauf achten, sie in der Reihenfolge zu erstellen, in der im Text die Verweise  nummeriert sind.

Ein Verweis wird erzeugt indem man hinter dem Wort, das dem Verweis voran stehen soll, ohne Abstand die Nummer des Verweises folgen läßt: Verweiswort4
Dann schreibt man den Text weiter. Nun markiert man die Ziffer (Verweiswort4) und wählt im Drop-Down-Menü Formate span.autoFussn_Verweis. Als Ergebnis erhält man dann: Verweiswort4

Um die Fußnoten zu erzeugen benötigt man zwei leere Zeilen/Absätze (<p> </p> <p> </p>). Also an der gewünschten Stelle zwei mal die Return ↵ Taste drücken.

Die eigentlichen Fußnoten sollten als Abgrenzung zum vorstehenden Text eine Überschrift5 erhalten. Dafür gibt es das Format div.Headline_Fussnote. Man stellt einfach den Cursor in die erste der leeren Zeilen und wählt im Drop-Down-Menü das Format div.Headline_Fussnote. Dadurch wird die Headline erzeugt:

 

Dann stellt man den Cursor in die zweite leere Zeile und wählt das Format p.auto_Fussnote. Es erscheint eine hochgestellte 1 mit einem Abstand dahinter.

1 

Dort beginnt man dann mit dem Text der ersten Fußnote. Dieser Text darf dann keine harten Zeilenumbrüche enthalten ( Return ↵ Taste).
Neue Zeilen innerhalb einer Fußnote sind ausschließlich mit Shift Enter ( + Return ↵ ) zu erzeugen. Sobald man die Return ↵ Taste betätigt wird die nächste Fußnotenzeile mit automatisch hochgezählter Nummer erzeugt.

 

Text ohen seitentrennende Formatierung.

Kommentar oder Erklärung zum Verweisenden Text.

Textbereiche zwischen den HTML-Tags <p> und </p>.

Das Zeichen hinter dem Verweiswort muß eine Ziffer sein, sonst bricht das semiautomatische System der Nummerierung zusammen.

Man kann auch im fertig geschriebenen Text Verweise einfügen indem man den Cursor hinter das Wort stellt, das einen Verweise erhalten soll. Dann wählt man das Format span.autoFuss_Verweis aus. Es erscheinen die eckigen hochgesellten Klemmern [] und der Cursor blinkt dazwischen. Jetzt muss nur noch die richtige Verweis-Ziffer eingetippt werden.

 

Hat man die Fußnoten nicht am Ende der Seite eingefügt sondern darüber (zum Beispiel am Ende eines logischen Kapitels, das von einem andern Kapitel gefolgt wird), so erzeugt man nach der letzten tatsächlich notwendigen Fußnote einen weiteren Zeilenumbruch und wählt im Drop-Down-Menü das Format p.auto_Fussnote ab.
Damit hat man dann eine leere nichtvorformatierte Zeile und kann dann weiterschreiben.

 

foot_Verweis

span.foot_Verweis - erzeugt einen einzelnen nicht nummerierten Fußnotenverweise zu einer einzelnen Fußnote unter dem Text.

span.footnote - erzeugt die einzelne, nicht nummerierte Fußnote unter dem verweisenden Text.

Diese Formatkombination ist ausschließlich für sehr kurze Fußnoten geeignet, da der Oberstrich der Fußnote bei einem Überlaufen der Zeile auch in der Fortsetzungszeile erzeugt wird!

Den Fußnotenverweis erzeugt man indem man unmittelbar am Ende des Verweiswortes ein 'Blank' schreibt und dann erst mal den Text weiter schreibt (dabei das zweite 'Blank' für den normalen Wortabstand nicht vergessen). Dann geht man zurück zu dem 'Blank' hinter den Verweiswort, markiert dies und wählt das Format span.foot_Verweis aus dem Drop-Down-Menü Formate aus. Wird das Format ausgewählt ohne das ein Zeichen markiert ist, wird zwar zunächst das Fußnotenzeichen angezeigt, beim nächsten Speichern wird die 'vermeintlich leere' Formatierung vom Editor gelöscht bevor der Inhalt des Fensters gespeichert wird. 
Wählt man hinter dem Verweiswort das Format span.foot_Verweis aus dem Drop-Down-Menü Formate aus, ohne zuvor ein Zeichen markiert zu haben und schreibt einfach weiter, dann wird der gesamte Text innerhalb des <span> ... </span> - Bereiches stehen. Zum Beispiel: Dieser Text soll einen Verweis auf eine Fußnote haben.
Wenn man jetzt im weiteren Schreiben einen harten Zeilenumbruch eingibt ( Return ↵ ) erhält die neue Zeile sofort wieder eine Verweismarke:

 

Diese entfernt man indem man im Formate-Menü das Format span.foot_Verweis abwählt.

Hat man z.B. einen Absatz fertig geschrieben und möchte nachträglich einen Verweis einfügen, setzt man den Cursor an die betreffende Stelle und wählt aus dem Drop-Down-Menü Formate das Format span.foot_Verweis aus. Dann muss man jedoch noch ein Blank eingeben. Tut man das nicht erscheint zwar zuerst die Verweismarke  , jedoch wird der Editor den vermeindlich leeren <span></span> - Tag entfernen befor die Seite gespeichert wird.


Um die Fußnote zu schreiben (eine einzelne!), schreibt man einfach den Text, markiert ihn und wählt dann das Format span.footnote aus:

Dieser Testext war normaler Fließtext.

Alternativ kann man auch das Format auswählen und dann erscheint der * mit einem Oberstrich. Jetzt kann man einfach weiterschreiben und den Fußnotentext eingeben.

Das ist die kuerze Fußnote.

Will man danach noch weiterschreiben (als normaler Fleißtext), muss amn auch hier wieder das Format span.footnote abschalten.

Da das Format zur Zeit als SPAN-Format definiert ist, wird der Oberstrich genau so breit werden wie der darunter stehende Text! Demzufolge wird bei einem Zeilenüberlauf auch der Oberstrich mit in die nächste Zeile laufen und dort die darüberliegende Zeile durchstreichen.

 

floatRight

div. p.floatRight - stellt Text in einem 50% der Breite einnehmendem Block dar, der rechts steht, links umflossen wird und nach links mit einer gepunkteten Linie abgegrenzt wird.

floatLeft

div. p.floatLefht - stellt Text in einem 50% der Breite einnehmendem Block dar, der links steht, rechts umflossen wird und nach rechts mit einer gepunkteten Linie abgegrenzt wird.

Zur deutlicheren Darstellung werden die Texte im Blocksatz und mit frablicher Unterlegung dargestellt. Weder der Blocksatz noch die Farbe gehören zu der float-Formatierung.

Dieser Text ist ganz normale Fließtext ohne spezielle Formatierung. Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. Auf deiner rechten Seite fährt ein riesiges Feuerwehrauto 

Dieser Text ist der Mustertext für das Format p.floatRight. Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. Auf deiner rechten Seite fährt ein riesiges Feuerwehrauto und hält die gleiche Geschwindigkeit wie du. Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe. Das Schwein und der Hubschrauber haben exakt deine Geschwindigkeit. Dieser Text ist im normalen Fluss. Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. Auf deiner rechten Seite fährt ein riesiges Feuerwehrauto und hält die gleiche Geschwindigkeit wie du. Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe. Das Schwein und der Hubschrauber haben exakt deine Geschwindigkeit.

und hält die gleiche Geschwindigkeit wie du. Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe. Das Schwein und der Hubschrauber haben exakt deine Geschwindigkeit. Dieser Text ist im normalen Fluss. Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. Auf deiner rechten Seite fährt ein riesiges Feuerwehrauto und hält die gleiche Geschwindigkeit wie du. 

Dieser Text ist der Mustertext für das Format p.floatLeft. Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe. Das Schwein und der Hubschrauber haben exakt deine Geschwindigkeit. Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. Auf deiner rechten Seite fährt ein riesiges Feuerwehrauto und hält die gleiche Geschwindigkeit wie du.

Dieser Text ist ganz normale Fließtext ohne spezielle Formatierung. Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe. Das Schwein und der Hubschrauber haben exakt deine Geschwindigkeit. Dieser Text ist im normalen Fluss. Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. Auf deiner rechten Seite fährt ein riesiges Feuerwehrauto und hält die gleiche Geschwindigkeit wie du. Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe.

Das Schwein und der Hubschrauber haben exakt deine Geschwindigkeit.

 

centered_bordered

div.centered_bordered - stellt den Text im Flattersatz in einem centrierten Rahmen (max. 800px breit) mit Hintergrundfarbe dar:

Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. Auf deiner rechten Seite fährt ein riesiges Feuerwehrauto und hält die gleiche Geschwindigkeit wie du. Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe. Das Schwein und der Hubschrauber haben exakt deine Geschwindigkeit. Dieser Text ist im normalen Fluss.

 

flexContainer

div.flexContainer - Elemente werden innerhalb des Containers nebeneinander und gleich hoch angezeigt (bei Bildern, die in der Höhe skaliert werden können):

Block 1 Text

Block 2 Text, der in einer fortlaufenden Zeile geschrieben wird und dadurch immer mehr Breite in Anspruch nimmt und so daie anderen Elemente auf ihre absolut minimale Breite drängt.

Block 3 Text
der in zwei weitere Zeilen
umgebrochen wird.

Block 5 Text

Dier Text steht nach dem Container als normaler Fließtext.

Hier ein zweiter Container mit Bildern, das höchste Bild bestimmt, wie hoch die anderen Bilder gezogen werden.

 

 

imgL

img. div.imgL - zeigt das Bild links an und lässt Text rechts umfließen (ab Viewportbreite 640px Bildbreite max. 40%):

Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe. Das Schwein und der Hubschrauber haben exakt deine Geschwindigkeit. Dieser Text ist im normalen Fluss. Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. Auf deiner rechten Seite fährt ein riesiges Feuerwehrauto und hält die gleiche Geschwindigkeit wie du. Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe.

 

imgLB

img. div.imgLB - zeigt das Bild links innerhalb eines Rahmens an und lässt Text rechts umfließen (ab Viewportbreite 640px Bildbreite max. 40%):

Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe. Das Schwein und der Hubschrauber haben exakt deine Geschwindigkeit. Dieser Text ist im normalen Fluss. Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. Auf deiner rechten Seite fährt ein riesiges Feuerwehrauto und hält die gleiche Geschwindigkeit wie du. Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf

 

imgR

img. div.imgR - zeigt das Bild rechts an und lässt Text links umfließen (ab Viewportbreite 640px Bildbreite max. 40%):

Text zusätzlich im Blocksatz! Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe. Das Schwein und der Hubschrauber haben exakt deine Geschwindigkeit. Dieser Text ist im normalen Fluss. Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. Auf deiner rechten Seite fährt ein riesiges Feuerwehrauto und hält die gleiche Geschwindigkeit wie du. Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe.

 

imgRB

img. div.imgRB - zeigt das Bild links an und lässt Text rechts umfließen (ab Viewportbreite 640px Bildbreite max. 40%):

Text zusätzlich im Blocksatz! Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe. Das Schwein und der Hubschrauber haben exakt deine Geschwindigkeit. Dieser Text ist im normalen Fluss. Du fährst mit dem Auto und hältst eine konstante Geschwindigkeit. Auf Deiner linken Seite befindet sich ein Abhang. Auf deiner rechten Seite fährt ein riesiges Feuerwehrauto und hält die gleiche Geschwindigkeit wie du. Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe.

 

hovImg

img. div.hovImg - zeigt das Bild mit einer 5%igen Vergrößerung beim Hovern:

 

horizontScrollLine

div.horizontScrollLine - gibt einen Text in einer nichtumbrochenen Zeile aus mit einem horizontalen Scrollbalken:

Vor dir galoppiert ein Schwein, das eindeutig größer ist als dein Auto und du kannst nicht vorbei. Hinter dir verfolgt dich ein Hubschrauber auf Bodenhöhe. 

 

img-inner

div.img-inner - umgibt ein Blockbildendes Element mit einem äußeren Abstand von 0,75 em:

123456789012345678901234567890
123456789012345678901234567890

 

imgNrml

div.imgNrml - gibt einen Absatz mit einem oberen Abstand von 1 em zum vorhergehenden Absatz aus und fügt unter ein Bild innerhalb des Absatzes einen unteren Abstand von 0,5 em zum folgenden Text innerhalb des Absatzes:

Vorhergehender Absatz ohne Formatierung. <p> hat hier einen extra so eingestellten Rundumabstand von 0 em.

Folgeabsatz class="imgNrml" formatiert mit einem bedeutungslosen Fließtext der nur als Fülltext da ist und Platz verbrauchen soll damit das Bild nicht in der ersten Zeile steht. Das Bild ist zusätzlich zentriert:Hier ist deutlich zu sehen, dass unter dem Bild ein Freiraum bleibt. Dann beginnt wieder der sinnentleerte Text der nur dazu da ist Platz zu verschwenden um zu zeigen wie er in der nächsten Zeile mit oder ohne Verstand rumsteht.

Und das ist der dritte Absatz.

 

label-danger

span.label-danger - Text wird als Warnung ausgegeben. Format wird auch vom CMS verwendet:

Das ist normaler Fließtext. Gefolgt von einem Danger-Label. Gefolgt von normalem Text.

 

label

span.label - Text wird als "Etikett" dargestellt:

Das ist normaler Fließtext. Gefolgt von einem Label. Gefolgt von normalem Text.

 

rundrahmen

span.rundrahmen - umgibt ein Zeichen oder Zeichenfolge mit einem blauen Rahmen:

© oder  oder hier und dort ......

 

body

div.body - Dieses Format wird benutzt um die Website bei extra breiten Bildschirmen / Browserfenstern auf eine Breite von 1920 Pixes zu begrenzen und mit der Hintergrundfarbe zu versehen. Ab einer Viewport-Breite von 1920 Pixel wird hinter dem div.body ein Farbverlauf in der Akzentfarbe mit der Breite des Viewports aufgespannt.


| Seitenanfang | |  - - - By CrazyStat - - -

Please activate JavaScript in your browser.

» Sitemap