 Ornament - grafisches Trennzeichen
Ein Ornament als schmückende Grafik soll als trennendes Elemnet zwischen einzelnen Textblöcken / Absätzen stehen. Mit CSS-Formatangaben soll dieses schmückende Beiwerk später leicht anzupassen oder zu verändern sein.
|
|
Trennlinie mit Ornament
|
Während der Suche nach einer Lösung zur Formatierung von horizontalen Linen, wurde diese Idee geboren. Als Alternative zur Trennlinie wollte ich keine mit HTML-Tags eingetragene Grafik verwenden. CSS-Anweisungen sollten diese Arbeit erledigen. Schließlich sollte das Trennsymbol später leicht anzupassen / zu verändern sein.
|
|
 |
Ornament als optischer Trenner
An der Position wo das Trennzeichen erscheinen soll, setze ein <div>-Tag ein. Der einzige Inhalt zwischen dem öffnenden und schließenden DIV-Tag ist ein Leerzeichen. Ich nutze das NBS (Non Breakable Space), 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' möchte ich eine Grafik einbinden. CSS bietet die Möglichkkeit, das über den Umweg einer Hintergrundgrafik zu tun. 'background:url' legt für ein Element ein Hintergrundbild fest. Für das gerade geschaffene Elemet mit der id 'ornament' bestimme ich nun die Grafik.
Die Notierung für die CSS-Klasse 'ornament' mit Hintergrundgrafik
Vorgaben: Grafik zentriert, keine Wiederholung, Abstand zum Text 15 Pixel
.ornament {
background: url(ornament01.gif);
background-repeat: no-repeat;
background-position: center;
height: 22px;
margin:15px;
}
Dann steht das Ornament horizontal 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, notiere ich in meinen CSS-Anweisungen eine andere Grafik. Ich muss also nur eine Änderung an zentraler Stelle vornehmen und nicht in allen Dokumenten die HTML-Anweisungen für die Grafik ändern.
Wenn Sie also die CSS-Anweisungen 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.
Wenn Sie die Anweisung 'background-image' in einer externen CSS-Datei notieren, beziehen sich relative Pfadangaben für die Grafik auf das Verzeichnis, in dem diese Stylesheet-Datei abgespeichet ist!
Wenn Sie mehrere Ornamet-Trenner (mit unterschiedlichen IDs) definieren, könnten Sie z.B. auch noch farblich variieren.
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.
 
    
 horizontale Linie <hr> mit CSS formatieren
|
Home • CSS • Ornament als Trenner
Quellcode