Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Sven Lennartz 10. September 2003

Elegante Zwischenüberschrift

Kein Beitragsbild

Wenig Arbeit, aber große Wirkung. Diese Überschriften beziehen ihre Wirkung aus der doppelten Unterstreichung. Sachlich, aber elegant eignen sie sich besonders gut für geschäftliche Auftritte.

Anzeige

Demo im neuen Fenster.

Screenshot
Elegante Zwischenüberschriften

Anzeige

Beispiel 1 verwendet eine linksbündige Ausrichtung, Beispiel 2 tut dasselbe nach Rechts. Klappen sollte das mit allen CSS-fähigen Browsern.

 <h3 style="text-align:
left; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 0px"><span style="font-family:
Verdana, sans-serif; font-size: .8em; border-bottom: 3px solid black;">Betonte
Überschrift</span></h3>
      <p
style="border-top: 1px solid black; padding-top: .8em; padding-top: 0; margin-top:
0;font-size: 1em;"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

Das H3-Element ist nicht zwingend nötig, doch mit ihm bleibt die logische Struktur erhalten. Um den erhöhten Platzbedarf der H3-Überschrift auszugleichen, wurden „margin“ und „padding“ hinzugefügt.

Sven Lennartz

Sven Lennartz

Ex Webdesigner, Gründer von Dr. Web und Smashing Magazine. Heute ist Sven als Schriftsteller und Blogger unterwegs. Schau was er jetzt macht…

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.