Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Headline Elemente mit CSS stylen

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Headline Elemente mit CSS stylen

Bei der Gestaltung moderner Webseiten stellt der richtige Einsatz von Headlines einen wichtigen Aspekt dar. Nach der Wahl eines passenden <h>-Elementes, beschränkt sich das Styling mit CSS meist auf Font, Farbe und Größe der Headline. Was darüber hinaus möglich ist, zeigt Alexander Hahn in diesem Praxis-Artikel.

Ich habe unzählige Anregungen zu meinem Beitrag über die Formatierung einfacher CSS Buttons mit der sliding doors Technik bekommen, daraufhin begann ich über ansprechende Formatierungen von Überschriften nachzudenken, welche auf einfache Weise auch auf andere Elemente angewendet werden können.

Alle Dateien können am Ende des Tutorials heruntergeladen werden, zudem habe ich eine Testseite mit mehreren Beispielen eingerichtet.

Headline Variante Nr.01

Anforderung an alle Überschriften ist es, dass sie bei Änderung des Textzooms mitwachsen und auch in flexiblen/fluiden Layouts funktionieren.

Zunächst weise ich dem <h2>-Element ein paar Grundeigenschaften zu:

<h2>HEADLINE STYLING</h2>

h2 {    font: 1.4em Georgia,serif;
letter-spacing: 2px;
font-weight: lighter;
text-align: center;
color: #58583b;
/* Die Hintergrundgrafik dient zum hinterlegen der Headline */
background: transparent url(images/line01.gif) repeat-x 0 50%;
} 

Die daraus resultierende Übeschrift hat nun eine vertikal zentrierte Linie zugewiesen bekommen, welche sich über den gesamten Inhaltsbereich erstreckt, da ein Blocklevel Element darstellt.

headline00.gif

Problem: Die Überschrift wird durch die Hintergrundgrafik durchgestrichen.

Um die Überschrift auf der Hintergrundfarbe stehen zu lassen, fügen wir ihr ein <span>-Tag hinzu, welchem ein seitliches padding und die passende Hintergrundfarbe zugewiesen wird.

<h2><span>HEADLINE STYLING</span></h2>

h2 span {
padding: 0 4px;
background: #F5F5DF;
} 

erste Headline Variante
headline01.gif

Diese Variante einer Überschrift ist in praktisch allen Layouts einsetzbar und passt sich dem jeweiligen Inhaltscontainer an.

Headline Variante Nr.02

Das Spiel mit <span>-Tags kann für weitere Formatierungen genutzt werden, im folgenden möchte ich der Überschrift jeweils rechts und links Sterne hinzufügen, welche beim Zoom des Textes mitwandern.

<h2 class="stars"><span><span>HEADLINE STYLING</span></span></h2>
Achtung: Die Formatierung mittels Klassen verwende ich in den Beispielen nur, um die verschiedenen Überschriften parallel in einer Beispielseite darstellen zu können. Zudem können bei der Verwendung von nur einer Headline Variante einige CSS Formatierungen verkürzt werden.

h2.stars {
letter-spacing: 0px;
font-size: 1.2em;
}

h2.stars span {
/* Stern für die linke Seite */
padding: 0 0 0 20px;
background: #F5F5DF url(images/star.gif) no-repeat left center;
}

h2.stars span span {
/* Stern für die rechte Seite */
padding: 0 20px 0 0;
background: transparent url(images/star.gif)
no-repeat right center;
} 

zweite Headline Variante
Headline mit Sternen

Headline mit 200% Textzoom
Headline mit Sternen, 200% gezoomt

Fazit: Durch die Verwendung von verkraftbar wenig Markup ist es auf einfache Weise möglich, kreative Überschriften zu formatieren. Ein wenig CSS und ein paar kleine Grafiken können somit aus einer einfachen Überschrift, eine Headline mit großen Wiedererkennungswert schaffen. Dabei geht es in keinster Weise um die Optik, für die ich mich in den Beispielen entschieden habe, eine Headline muss sich immer gut in den Gesamtaufbau des Layouts einfügen.

Ich wünsche viel Spaß beim ausprobieren und freue mich über Feedback jeglicher Art!

Tutorial Dateien herunterladen

Kommentare

Benny
am 03.06.2007 - 11:50

ich frage mich gerade, wieso die sterne mitwachsen? es ist doch keine raltive größenangabe dabei? oder hab ich jetzt gerade nen brett vorm kopf?

Permanenter Link

Peritus
am 03.06.2007 - 11:57

Viel schicker wär's natürlich noch, das ganze zusätzliche nicht-semantische Markup per JS nachzuladen. Wie z. B. hier:

http://www.ryanjlowe.com/?p=12

Trennt Layout und Markup - und auf die Sterne kann man verzichten ohne Javascript, ehrlich.

Permanenter Link
Alexander Hahn

Alexander Hahn (Autor)
am 03.06.2007 - 12:33

@Benny: Die Sterne wandern nach außen hin mit, (werden verdrängt) sie wachsen nicht, sondern passen sich der Breite des Inhalts an.

Permanenter Link
Alexander Hahn

Alexander Hahn (Autor)
am 03.06.2007 - 12:39

@Peritus: Du hast recht, jedoch habe ich dies bewusst nicht mit eingebracht, um nur etwaige CSS Lösungen in den Vordergrund zu stellen. Eine gute Verwendung von Javascript ist z.B. bei diesem Tutorial zu finden.

Permanenter Link

Jared
am 03.06.2007 - 15:16

danke dir alex! genau das hab ich für mein neues theme gebraucht ;) super tutorial, einfach erklärt und in 3 min selber gemacht!

bin vollends zufrieden

lg
Jared

Permanenter Link

Andreas
am 03.06.2007 - 19:19

Aber nur wegen zwei Sternen gleich so viel sinnlosen Markup? Neee :-).

Permanenter Link
Alexander Hahn

Alexander Hahn (Autor)
am 03.06.2007 - 19:23

Aber nur wegen zwei Sternen gleich so viel sinnlosen Markup? Neee :-) .

Es geht ja nicht um die Sterne/Markup an sich, sondern anzuregen kreativ mit Überschriften/Elementen umzugehen. ;-) feinste Grüße

Permanenter Link
Manuel Bieh

Manuel Bieh (Webkraut)
am 04.06.2007 - 08:45

die frage ist, ob man für sowas wirklich javascript verwenden will. ich würde anstelle des ziemlich hässlichen markups oder javascript einfach schon vorhandene css funktionalität nutzen, nämlich :before und :after pseudoelemente.

natürlich funktioniert das im IE nicht, aber irgendwann muss ja auch der letzte IE user mal aufwachen und erkennen das es noch andere browser gibt.

Permanenter Link

Peritus
am 05.06.2007 - 11:15

Nur mit :before und :after bekommst das nicht so hin ( vgl.
------------ * H1 * -----------
mit
* ------------ H1 ------------ * ).

Javascript habe ich nur für den Zweck vorgeschlagen, das unnötige Markup on-the-fly einzufügen. Damit separierst das aus deiner Server-Anwendung raus, hast ggf. ein style.js (und damit separierst das auch aus dem sonstigen Javascript raus). Dann siehts ohne alles gut aus, mit CSS sowieso - und mit CSS+Javascript eben noch viel besser. Und es ist wirklich wenig Code.

Permanenter Link

Thorben
am 07.06.2007 - 19:52

[…] fügen wir ihr ein -Tag hinzu […]

Da fehlt wohl ein „span“.
Taucht am Anfang des Abschnitts „Headline Variante Nr.02“ nochmal auf.

Permanenter Link

ralphs
am 15.06.2007 - 23:50

Schöne Anregung, es einfach auch mal anders zu machen. :-)

Permanenter Link

Rene Grassegger
am 20.06.2007 - 08:50

Hallo Krauts,

nana das hässliches Markup zu nennen ist eine kleine Übertreibung. Das Verhältnis von Wirkung und nötigen Einsatz hält sich in einer schönen, sauberen, vertretbaren Balance.

Schönes Beispiel.

lg

René

Permanenter Link

Vagabund
am 21.06.2007 - 08:45

Eine tolle Anregung zur Gestaltung von Überschriften. Zum sinnlosen Markup: Die paar Zeichen mehr, sind doch nicht dramatisch. Der Aufwand rechtfertigt auf jeden Fall den Nutzen.

Permanenter Link

andrej
am 21.06.2007 - 12:47

wirklich interessante Idee, grafisch ansprechende inhalte zu erzeugen. auch die debatte, ob js oder nicht: sehr anregend.

Permanenter Link

Peritus
am 21.06.2007 - 15:53

Ich nochmal ;)

Der Trick ist ja, die Javascript-Dinger 'reusable' zu schreiben, und nicht darauf angewiesen zu sein, dass das Markup passt. Einfach ein paar class-Attribute, das Javascript laden und - works.

Gruß,

Permanenter Link

Oliver Timmermann
am 02.08.2007 - 18:32

Danke für den guten Beitrag, da kann man einiges lernen, denke ich - und für das nächste Layout verwenden.

Permanenter Link

Matthias
am 08.08.2007 - 13:14

Schöne Tipps dabei! Eigentlich ganz einfach, wenn man weiß wie es geht! :)

Besten Dank dafür!

Permanenter Link

mcp
am 17.08.2007 - 11:53

Sehr schöne Beispiele!
Doch leider funktioniert Beispiel 5 nicht, wenn der Text in der Überschrift umgebrochen wird :(
Vielleicht kann mir ja jemand einen Tipp geben, wie ich das verhindern kann!

gruß
mcp

Permanenter Link

Thomas
am 12.09.2007 - 22:27

Respekt. Habe schon einige Tipps von Euch für andere Projekte anwenden können. Ist immer wieder interessant hier vorbeizuschauen.

"...natürlich funktioniert das im IE nicht, aber irgendwann muss ja auch der letzte IE user mal aufwachen und erkennen das es noch andere browser gibt."

Das halte ich aber für eine riskante Aussage. Solange der IE im Betriebssystem mitgeliefert wird, wird es User geben die ihn benutzen. Willst Du die durch schlechtes Webdesign vergraulen?

Permanenter Link

simon
am 30.09.2007 - 00:03

super tipps. danke für deine mühe.

Permanenter Link

Doggy
am 21.04.2008 - 10:26

Hallo,

was mache ich wenn ich anstatt einer Hintergrundfarbe ein Hintergrundmuster habe.

Permanenter Link
Alexander Hahn

Alexander Hahn (Autor)
am 21.04.2008 - 22:46

Hallo, was mache ich wenn ich anstatt einer Hintergrundfarbe ein Hintergrundmuster habe.

Auf der Testseite sind mehrere Beispiele zu sehen, in denen mehrere Hintergundvarianten aufgezeigt werden, sollte deine Frage damit nicht beantwortet sein, so stelle deine Frage bitte konkreter, dann kann ich dir genaue Informationen geben. feinste Grüße!

Permanenter Link

Doggy
am 22.04.2008 - 19:33

Hallo Alexander,

erst mal danke für deine Antwort. Also ich habe jetzt eine Ausschnitt von dem Screen hochgeladen:

vielleicht kannst du mir ja weiter helfen.

Grüße

Doggy

Permanenter Link

Doggy
am 22.04.2008 - 19:38

Sorry, löscht bitte den Rest!!!

Hier der Link: http://www.img-hosting.de/show.htm?bild=9923beispieljpg

Permanenter Link

Doggy
am 24.04.2008 - 11:01

...kann mir niemand helfen? Googlen hat auch nicht geholfen!!!

Grüße

Doggy

Permanenter Link
Alexander Hahn

Alexander Hahn (Autor)
am 24.04.2008 - 12:18

…kann mir niemand helfen?

Nein, leider ist es in deinem Falle kaum lösbar, da dein Hintergrund keine Kachel, sondern ein großformatiges Bild zu sein scheint. Du könntest den h-Elementen vielleicht diese große Grafik als bg geben, aber ich denke das wird nicht richtig zu formatieren sein.
Sor, mir fällt auch nach Absprache mit Christian Vogt leider wirklich keine bessere Lösung ein.

Permanenter Link

Markus
am 29.07.2008 - 16:00

Yes, cool! Danach habe ich gesucht. Einfach mal suchen und finden. Danke "Webkrauts"!!!

Gruss Markus

Permanenter Link

Ines
am 26.09.2008 - 10:19

Super Artikel, Danke...war sehr hilfreich =)

Permanenter Link

Die Kommentare sind geschlossen.