14.08.2008 - geschrieben von mrvn in Tutorials

12 Ersten Artikel automatisch mit CSS hervorheben

csspseuso

Nehmen wir mal an, wir haben eine Seite, auf der eine Reihe von Artikeln in gleicher HTML-Struktur ausgegeben werden! Nun wollen wir aber den ersten Eintrag ein wenig hervorheben, ohne aber die HTML Struktur noch erweitern zu müssen.

Hierfür eignet eignet sich CSS, durch verschiedene Pseudo Klassen & Elemente besonders gut. Mit z.b. :before und :first-child kann man da einiges erreichen! Im Folgenden werde ich das an einem Beispiel präsentieren!

Definieren der Artikel

<div id="gesamt">
    <div class="eintrag">
        <h1>Lorem ipsum dolor</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua.</p>
    </div>
    <div class="eintrag">
        <h1>Lorem ipsum dolor</h1>

        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua.</p>
    </div>
</div>

Wie man sieht besteht das Markup eines Artikels also aus einem div – Container mit der Klasse “Eintrag” (class="eintrag"), der eine Überschrift (h1) und einen Fließtext bzw. Absatz (p) beinhaltet. Diese Elemente werden wir nun in der CSS für die Gestaltung gebrauchen!

Der CSS Teil

/* CSS Abstands Reset*/

* { margin:0px;}

/* Allgemein */

body {
font-family:Arial;
font-size:0.8em;
background:#444;
color:#666;}

/* Gesamter Container */

#gesamt {
padding:10px;
background:#fff;
margin:50px auto;
width:750px;	}

/* Container für ein Artikel */

.eintrag {
padding:10px;}

Das wäre also nun unser Grundgerüst (HTML+CSS), das wie folgt aussieht:

Grundgerüst

Nun sehen beide Artikel jedoch noch identisch aus. Genau das wollen wir aber bei gleichem HTML-Markup nun verändern und versuchen den obersten Artikel anders zu stylen, da dieser hervorstechen soll! Das lässt sich mit CSS sehr einfach realisieren, indem wir, wie bereits erwähnt, die Pseudo Klasse :first-child benutzen!

Hier der zusätzlich nötige CSS Code:

/* Selektor für den ersten Artikel */

.eintrag:first-child {
background:#f0f0f0;
font-size:1.3em;} 

/* Selektor für die erste Artikel-Überschrift */

.eintrag:first-child h1 {
color:#679fbf;
font-family:Georgia;
padding-bottom:5px;
margin-bottom:5px;
border-bottom:1px dotted #679fbf; }

/* Selektor für den ersten Fließtext */

.eintrag:first-child p {
font-weight:bold; }

Jetzt kommt :before ins Spiel

Um nicht nur das Styling zu ändern, sondern sogar noch einen Hinweis zur Überschrift (z.b. Aktuell:) per CSS hinzuzufügen, können wir noch zusätzlich das Element :before nutzen. Es bestimmt den Inhalt vor einem Element! Der folgende CSS-Selektor bestimmt sozusagen den Inhalt vor (:before) der Überschrift (h1) im ersten Kind (first-child) der Klasse .eintrag

.eintrag:first-child h1:before {
content:"Aktuell: ";}

Beides im Stylesheet ergänzt, sieht meine kleine Artikelseite wie folgt aus:

Demo

Hinweis:
Leider unterstützt IE6 “before” und “first-child” nicht, aber das sollte nicht weiter schlimm sein! Des weiteren ist das lediglich ein Beispiel, um zu verdeutlichen was man alleine mit CSS alles entwickeln kann, ohne das HTML-Markup anzufassen! Wenn man zusätzlich noch ein wenig mit :first-line und :first-letter rumexperimentiert sind der Phantasie fast keine Grenzen gesetzt, außer vielleicht ein paar Gestaltungsgrundsätze ;)

Hoffe euch hat das Tutorial gefallen. Wenn Fragen auftreten sollten, könnt ihr diese natürlich in die Kommentare schreiben! Vielen Dank für das Interesse!

Tags:

12 Kommentare

Trackback - RSS Kommentare zu "Ersten Artikel automatisch mit CSS hervorheben"

Dein Gedanke dazu?...