Abgerundete Ecken bei Spalten mit fester Breite

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Sie wollen Spalten, für die eine feste Breite definiert wurde, mit abgerundeten Ecken versehen.

Lösung

Erstellen Sie für die oberen und unteren Ecken jeweils ein gemeinsames Hintergrundbild (siehe die folgende Abbildung).

Je ein Bild für oberen und unteren Ecken

Abbildung: Je ein Bild für die oberen und unteren Ecken.

Umgeben Sie den Inhalt der Spalte mit einem div-Element:

<div id="box">
  <h2>I Met a Girl I&#8217;d Like to Know Better</h2>
  <p>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.</p>
</div>

Platzieren Sie das untere Hintergrundbild innerhalb des divs (siehe nächste Abbildung):

#box {
 width: 214px;
 background-image: url(bkgd_bottom.gif);
 background-position: bottom;
 background-repeat: no-repeat;
}

Für untere Endes der Spalte wurde Hintergrundbild definiert

Abbildung: Für das untere Ende der Spalte wurde ein Hintergrundbild definiert.

Das obere Hintergrundbild wird für das h2-Element definiert (siehe folgende Abbildung):

h2 {
 background-image: url(bkgd_top.gif);
 backgroung-position: left top;
 background-repeat: no-repeat;
 padding: 7px 7px 3px 7px;
 margin: 0;
 border-bottom: 1px solid #999;
 font-size: 1.3em;
 font-weight: normal;
 color: #eee;
}

Hintergrundbild wurde für oberes Ende der Spalte definiert

Abbildung: Ein Hintergrundbild wurde für das obere Ende der Spalte definiert.

Diskussion

Um auch unterschiedlichen Textgrößen gerecht zu werden, wie in der nächsten Abbildung gezeigt, sollten Sie für die Länge der Hintergrundbilder einen höheren Wert wählen als den im Design angegebenen Platz. Die für dieses Beispiel verwendeten Grafiken sind beispielsweise 600 Pixel lang, aber auch Längen über 1000 Pixel werden manchmal eingesetzt, um die Integrität einer Seite auch bei extremen Schriftgrößen sicherzustellen.

Auch bei hohen Textgrößen behält Design seine Integrität

Abbildung: Auch bei hohen Textgrößen behält das Design seine Integrität.

Da die Breite der Spalten mit einer absoluten Längeneinheit, z.B. Pixel, angegeben wurde, ist es möglich, die Grafiken für zwei Ecken in einer gemeinsamen Datei zu speichern. Bei Spalten ohne feste Breitenangabe würde diese Lösung jedoch nicht funktionieren.

Siehe auch

Die Rezepte Abgerundete Ecken (Sliding Doors-Technik), Abgerundete Ecken (Mountaintop-Technik) und Abgerundete Ecken mit JavaScript für das Erstellen von abgerundeten Ecken bei variablen Spaltenbreiten.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln