 Ornament - grafisches Trennzeichen
Ein Ornament als schmückende Grafik soll als trennendes Elemet zwischen einzelnen Textblöcken / Absätzen stehen. Mit CSS-Formatangaben soll dieses schmückende Beiwerk später leicht anzupassen oder zu verändern sein.
|
Als ich auf der Suche nach einer Lösung für die Formatierung von horizontalen Linen war, wurde diese Idee geboren. Diese Alternative zur Trennlinie ist anders als eine mit HTML-Tags eingetragene Grafik später leicht anzupassen / zu verändern.
|
|
 |
Ornament als optischer Trenner
Ich setze ein <div>-Tag ein. einziger Inhalt zwischen dem öffnenden und schließenden Tag ist ein Leerzeichen. Ich nutze das NBS (Non Breakable Space)ein, ein in HTML übliches Leerzeichen das keinen Zeilenumbruch zulässt.
Zwischen den zu trennenden Textblöcken meines Artikels trage ich also ein <div>-Tag ein, das als Attribut eine selbst bestimmte CSS-Klasse hat:
<div class="ornament"> </div>
Für die CSS-Klasse 'ornament' lege ich mit CSS eine Hintergrundgrafik fest.
Vorgaben: Grafik zentriert, keine Wiederholung, Abstand zum Text 15Px
.ornament {
background: url(ornament01.gif);
background-repeat: no-repeat;
background-position: center;
height: 22px;
margin:15px;
}
Dann steht das Ornament zentriert zwischen den Abschnitten!
Ja, das könnte man doch einfacher haben und ganz simpel eine Grafik mit HTML-Tags zwichen den Abschnitten notieren. Warum also dieser Umweg über CSS-Klasse und <div>-Tag?
Nun, wenn ich später meine Meinung oder das Layout ändere, setzte ich in den CSS-Anweisungen nur einmalig eine andere Grafik ein. Ich muss nicht in allen Dokumenten die Grafiknotierung ändern.
Wenn sie diese Formatierung in eine externe CSS-Datei auslagern, können sie später in einem einzigen Arbeitsschritt (mit nur einer manuellen Änderung) sämtliche Trenner innerhalb ihrer Seiten anders darstellen lassen. Tragen sie lediglich eine andere Grafik-URL ein.
Beispiel:
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Grafiken zum Download
Damit sie ein wenig experimentieren können, stelle ich ihnen einige Grafiken zum Download zur Verfügung. Die Grafiken habe ich selbst erstellt und können frei verwendet werden.
   
Eigene Grafiken können sie leicht aus Symbolschriften erstellen.
 
    
|
HOME
Quellcode 
ZURÜCK