Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

(X)HTML / CSS Tutorial: Ersten Artikel automatisch mit CSS hervorheben



Ranking: +1   Kommentare: 1   |   Bewertung: Keine Berechtigung!  

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



Code:


<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



Code:


/* 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:



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

Code:


.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!

Copyright - www.bugeyes.de

Veröffentlicht von: zackdelarocha
Veröffentlicht am: 16 Aug. 2008
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: before CSS first-child klassen pseudo


Themenverwandte Tutorials


Kommentar(e) (1)


m1LLo´rLp sagt:

Sehr gut geschriebens tut. auch wenn ich css schon kann musste ichs mir trotzdemm durchlesen und muss sagen für nen anfänger nur zum empfehlen.

gruß m1LLo

20 Aug. 2008 16:50:25 • Antworten



Anfang

<<

1

>>

Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder