Dieser Artikel ist über 1 Jahr alt. Deshalb könnten die Informationen hier veraltet sein.

2. Februar 2009

Flexible Boxen mit abgerundeten grafischen Ecken

Dieser Artikel ist von 2009 und die hier beschriebene Technik ist veraltet. Runde Ecken können ganz einfach per CSS3 realisiert werden.

Ein ab und zu ganz gerne verwendetes Layout-Element sind Boxen mit abgerundeten Ecken. Wenn diese Boxen nur in einer fest definierten Breite erscheinen sollen, ist das auch kein Problem, dann reichen 3 Grafiken für den Kopf, den Mittelteil und den Fußbereich aus.

Aber in flexiblen oder elastischen Layout soll sich die Größe der Box vielleicht der im Browser eingestellten Textgröße und der Menge des Text-Inhaltes anpassen. Eventuell soll die Box auch, je nach Kontext, in verschiedenen Größen dargestellt werden (Breite 100% oder auch nur 33% zum Beispiel). All das lässt sich mit nur 4 Grafiken und ein wenig mehr HTML- und CSS-Code erreichen.

Für die Erstellung der Grafiken verwende ich in diesem Beispiel Adobe Fireworks.

Als erstes erstellen wir die Ausgangsgrafik für die abgerundete Box. Dabei muss dass Bild erst einmal wesentlich größer als wahrscheinlich benötigt sein. Damit die Box auch bei maximaler Größe auf einem modernen Breitbildmonitor korrekt dargestellt wird, erstelle ich die Grafik mit einer Auflösung von 2000 x 2000 Pixeln.

Dann erzeuge ich mit Hilfe des Werkzeugs „Abgerundetes Rechteck“ eine Box und passe die Rundung der Ecken nach meinem Geschmack an.

Dann verpassen ich der Box noch einen Schlagschatten, ganz nach Bedarf.

Zum Schluss entferne ich die überflüssigen Ränder der Arbeitsfläche durch einen Klick auf den Button „Leinwand anpassen“.

Jetzt müssen aus dieser Ausgangsgrafik 4 einzelne Grafiken erstellt werden, und zwar für die linke obere Ecke der Box, die rechte obere Ecke, die linke untere Ecke und die rechte untere Ecke.

Als erstes erstelle ich mir Hilfslinien, die mir das zerschneiden der Grafik in einzelne Segmente erleichtern.

Mit dem Werkzeug „Segment“ schneide ich die erste Grafik aus, und zwar vom oberen linken Eckpunkt des Bildes (Koordinaten 0,0) bis an die Hilfslinien unten rechts. Dieses Segment benenne ich „topleft“. Mit einem Rechtsklick auf das Segment kann ich das „ausgewählte Segment exportieren“. Ich benenne die erzeugte Grafik „topleft.gif“.

Analog erstelle ich für jede Ecke eine Grafik.

Die zweite Grafik beginnt im oberen rechten Eckpunkt und geht bis hinunter an die untere Hilfslinie und bis zur rechten vertikalen Hilfslinie. Dieses Segment exportiere ich und benenne es „topright.gif“.

Das dritte Segment geht von der unteren linken Ecke bis zur unteren Hilfslinie und nach rechts bis zur vertikalen Hilfslinie am rechten Rand. Dieses Segment benenne ich „bottomleft.gif“.

Das vierte und letzte Segment ist auch das kleinste und ergibt sich aus dem letzten unbenutzten Bereich unten rechts. Dieses Segment benenne ich „bottomright.gif“.

Damit ist die Erstellung der Grafiken beendet. Wenden wir uns als nächstes dem HTML-Code zu.

 

 

 

 

 

Zur Erstellung der Box verwende ich sechs verschachtelte DIV-Container, denen ich jeweils eine bestimmte CSS-Klasse zuweise.

Der äußere Container „roundedbox“ umfasst die gesamte Box. Über diesen Container wird die Breite der Box geregelt.

Die Container topleft, topright, bottomleft und bottomright dienen, wie die Namen schon vermuten lassen, zur Aufnahme der vorbereiteten Grafiken.

Der innerste Container rounded_content enthält schließlich die anzuzeigenden Inhalte, z.B. Text, Tabellen oder Bilder. Außerdem ist er nötig, um das Padding der Box einzustellen. Durch die Einstellung der Breite und des Paddings über zwei separate DIVs lässt sich außerdem geschickt der Box-Model-Bug des Internet Explorers < = 6 umgehen.

Jetzt zum nötigen CSS-Code:

Über den Universalselektor * werden zuerst einmal generell alle margins und paddings auf 0 gesetzt. Dadurch erreicht man eine gleiche Darstellung in verschiedenen Browsern (Vorsicht: Formular-Elemente wie input oder select werden dadurch unter Umständen zu klein dargestellt. Hier muss man evtl. per CSS gegensteuern!).

Dem p-Element geben ich dann wieder ein unteres margin von 1em.
Für unser Beispiel erhält der Body ein padding von 20px, als Hintergrundfarbe verwende ich weiß, da auch die Grafiken mit einem weißen Hintergrund erstellt wurden.

Das DIV roundedbox erhält in diesem Beispiel eine Breite von 33%, aber wenn man z.B die „Runde Box“ innerhalb von anderen DIVs anzeigen will, kann man auch eine Breite von 100% vergeben, damit immer der ganze verfügbare Platz ausgenutzt wird.

Jetzt werden die einzelnen Bilder den DIVs zugeteilt. Dabei werden die Bilder entsprechen ausgerichtet, also topleft.gif wird auch nach top left ausgerichtet, topright.gif nach top right und so weiter.

Als letztes erhält das DIV rounded_content die Textfarbe weiß und ein padding. Dieses Padding muss man je nach Größe der Eckrundung eventuell noch anpassen ( und je nach Geschmack). Ich vergebe noch eine min-height, um ein zusammenfallen der Box zu verhindern, falls kein Inhalt vorhanden sein sollte.

Jetzt hat man eine flexible Box mit einer grafischen Umrandung, die je nach Inhaltsmenge und Textgröße mit wächst

Aussehen mit nur einer Zeile Text:

Mit ein wenig mehr Text:

Mit skaliertem Text:

Noch ein Tipp: Wenn man die Breite des äußeren DIVs roundbox nicht in Prozent, sondern in em angibt, vergrößert sich die Box bei Textskalierung auch in die Breite, was dann ein wirklich elastisches Layout ergibt.

Artikel wurde gefunden mit den Suchbegriffen:
  • css flexible box
  • webdesign box
  • css3 flexible box

Wolfgang Wagner

lebt in Friedrichshafen und arbeitet als Web Developer bei der TYPO3 Agentur jweiland.net in Filderstadt. Weitere Orte im Web: Twitter, Facebook, Wolfgangs Blog

Kommentare (11)

  1. Vielen Dank für dieses Tutorial.
    Allerdings werde ich auch in Zukunft für abgerundete Ecken ausschließlich die CSS3-Eigenschaft border-radius verwenden. Browser, die auf den Rendering-Engines WebKit oder Gecko basieren, können diese abgerundeten Ecken ohne überflüssigen Code im Markup und zusätzlichen Grafiken bereits darstellen.
    Da ich Webdesign lediglich als Hobby betreibe, kann und will ich mir das erlauben. Wenn alles gut geht, ist das auch die Technik, die in einigen Jahren Standard sein wird.

    • Aber leider erst in einigen Jahren. Wenn man bedenkt, daß alle aktuellen Browser immer noch nicht einmal CSS 2.1 vollständig und korrekt unterstützen, wird es mit CSS 3 noch eine ganze Weile dauern.
      Du hast recht, bei einer privaten Seite ist es egal, ob jemand mit dem IE 6 oder 5.5 die Seite genau so sieht wie ein Besucher mit dem Firefox 3. Aber wenn du Kunden hast, die noch Windows XP mit dem IE 6 verwenden, und die unbedingt diese weichgelutschten Ecken haben wollen, muss man sich halt etwas überlegen.

  2. Servus,

    Eine sehr ausführliche Thread. Vielen Dank dafür :D Nun kann ich für meine Free SMS Seite auch mal sowas erstellen. Wird bestimmt super aussehen.

  3. dem IE kann man border-radius auch per htc (html-control) indirekt beibringen. (allerdings muss ich gestehen, es nie mit deaktiviertem javascript probiert zu haben).
    zu finden hier: http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
    leider musste ich feststellen, dass es nicht immer einwandfrei funktioniert, testen sollte man es also in jedem fall im bösen browser ie8, im noch böseren ie7 und in der nah-browser-erfahrung ie6 ;) – aber wenn, dann ist es die unkomplizierteste und ressourcensparendere variante (nur ein lookup für die htc, nicht vier für die grafiken, weniger markup) . . .

    • Der Vorteil meiner Variante liegt darin, dass man nicht auf runde Ecken beschränkt ist. Man kann den Ecken durch eine Grafik ein beliebiges Aussehen verpassen.

  4. Die Live Demonstration geht leider nicht, es erscheint nur die Error Page….

    MFG

Kommentare sind geschlossen.