Kategorien
Design HTML/CSS

Elegante Zwischenüberschrift

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. Demo im neuen Fenster. Elegante Zwischenüberschriften Beispiel…

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.

Demo im neuen Fenster.

Screenshot
Elegante Zwischenüberschriften

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.

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