Navigation überspringen: Zu den neuesten Einträgen oder zu den aktuellen Artikeln .

Runde und andere Ecken mit Sliding Doors

Andreas Kalt am 19.11.2003 – 115 Kommentare

In diesem Tutorial werde ich zeigen, wie man mit Hilfe einiger verschachtelter div-Tags und CSS eine nahezu frei skalierbare grafische Box gestalten kann.

Wie sieht es aus?

Bevor wir anfangen, können Sie gleich mal einen Blick auf das spätere Endergebnis werfen. Diese Box besteht aus fünf ineinandergeschachtelten divs, von denen die vier äußeren jeweils eine Ecke und einen Teil der Fläche der Box mit einer Hintergrundgrafik versehen.

Ohne CSS sieht das ganze so aus.

Wie funktioniert es?

Damit die Box skalierbar ist, wird die Grafik sehr groß gemacht (ca. 1200x1000 Pixel). Es ist aber immer nur ein Teil der Grafik zu sehen. Da Hintergrundbilder in CSS nur auf der Fläche des zugehörigen Elements sichtbar sind, dient ein Großteil der Grafik als Reserve für das Skalieren und wird auch nur dann sichtbar.

Die einzelnen Grafiken sehen wie folgt aus:
Grafik 1 (rechts oben, macht fast die gesamte Fläche aus)
Grafik 2 (links oben, ist am linken Rand sichtbar und bildet die linke obere Ecke)
Grafik 3 (rechts unten, ist am unteren Rand sichtbar und bildet die rechte untere Ecke)
Grafik 4 (links unten, schließt die linke untere Ecke) .

Die Grafiken wurden als eine komplette Box erstellt und dann mithilfe der Slice-Funktion des Grafikprogramms zerschnitten. Diese Funtion hat praktisch jedes vernünftige Grafikprogramm.

Wir werden die Grafiken so anordnen, dass auf jeder Seite und in jeder Ecke der richtige Teil der Grafik sichtbar ist. Die vier Grafiken werden so übereinander gelegt, dass sie sich gegenseitig teilweise verdecken, beim Skalieren aber herausgleiten.

Douglas Bowmann hat diese Technik bei A List Apart vorgestellt und sie Sliding Doors, also Schiebetüren genannt. Das trifft das Prinzip recht gut.

Ob eine Hintergrundgrafik weiter unten oder weiter oben im Stapel liegt, hängt davon ab, welchem div sie zugeordnet ist. Tiefer verschachtelte divs (und ihre Hintergrundbilder) liegen über ihren Elternelementen. Aber nun greife ich vor, denn zuerst brauchen wir natürlich das (X)HTML-Gerüst.

Das XHTML Gerüst

So sieht das Grundgerüst aus (das muss nicht XHTML sein, ist aber empfehlenswert; wenn Sie sich über XHTML informieren möchten, finden sie hier weitere Quellen):

<div>
<div>
<div>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamnonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis o</p>
</div>
</div>
</div>
</div>
</div>

Um nun den einzelnen divs verschiedene Hintergrundgrafiken zuordnen zu können, geben wir jedem div einen individuellen Namen.

Das kann man mit dem id-Attribut oder mit dem class-Attribut machen. Eine id darf in jedem HTML-Dokument nur einmal vorkommen, die selbe class kann aber auf mehrere Elemente angewendet werden. Da unsere Seite möglicherweise mehrere gleiche Boxen enthalten soll, nehmen wir für die Namen das class-Attribut.

Nacheinander erhalten divs die Namen ro (für rechts oben), lo, ru und lu. Das innerste div heißt inhalt.

Das XHTML-Gerüst sieht nun also so aus:

<div class="ro">
<div class="lo">
<div class="ru">
<div class="lu">
<div class="inhalt">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamnonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis no</p>
</div>
</div>
</div>
</div>
</div>

Die Reihenfolge der Namen ist wichtig, weil nur so die Stapelreihenfolge eingehalten wird (siehe oben).

Der CSS Code

Nun können wir den einzelnen divs ihr jeweiliges Hintergrundbild zuordnen. Die entsprechende CSS-Regel für das äußerste div lautet:

.ro { 
background:url("roundedbox_ro.gif") top right no-repeat;
margin:0;
padding:0;
}

Die Regel weist dem div ein Hintergrundbild zu (url("...")), positioniert es in der rechten oberen Ecke (top right) und gibt an, dass das Bild nicht gekachelt wird (no-repeat). Die verwendete Schreibweise für background ist eine Kurzform. Ausgeschrieben würde es heißen:

background-image:url("roundedbox_ro.gif");
background-position:top right;
background-repeat:no-repeat;

Außerdem stellen wir mit margin:0; und padding:0; sicher, dass nicht irgendein Browser in seinen Standardeinstellungen andere Rand- und Polsterungswerte für divs verwendet.

Sehen Sie sich die Datei in diesem Stadium an: nur die rechte obere Ecke ist rund, alle anderen haben sichtbare Schnittkanten.

Nun gehen wir für die übrigen drei divs genauso vor. Jedes bekommt sein eigenes Hintergrundbild, das in der jeweils richtigen Ecke positioniert wird. Der CSS-Code sieht dann für die vier äußeren divs folgendermaßen aus:

.ro { 
background:url("roundedbox_ro.gif") top right no-repeat;
margin:0;
padding:0;
}

.lo {
background:url("roundedbox_lo.gif") top left no-repeat;
margin:0;
padding:0;
}

.ru {
background:url("roundedbox_ru.gif") bottom right no-repeat;
margin:0;
padding:0;
}

.lu {
background:url("roundedbox_lu.gif") bottom left no-repeat;
margin:0;
padding:0;
}

Nun haben wir schon eine komplette Box, allerdings sitzt der Text noch sehr dicht an den Rändern. Um das zu beheben, müssen wir lediglich dem innersten div (inhalt) ein wenig padding geben. Und um mögliche Browservoreinstellungen zu umgehen, bekommt auch das

<

p>-Tag noch eine Regel.

.inhalt {
margin:0;
padding:2.5em 2.5em 3.5em 2.5em;
}

.inhalt p {
margin:0;
padding:0;
}

Hierzu ein Hinweis: der Internet Explorer und Opera 7.11 scheinen Probleme zu haben, wenn das innerste div (inhalt) padding-bottom und gleichzeitig das

<

p>-Tag margin-bottom aufweist. Es sollte also immer nur eine der beiden Funtionen genutzt werden. In unserem Fall haben wir beim

<

p>-Tag alle margins auf 0 gesetzt.

Fertig

Damit sind wir fertig und können das Ergebnis begutachten. Der komplette CSS-Code findet sich in der Datei runde_ecken.css.

Schlussbemerkungen:

Diese Box ist voll skalierbar und macht auch Änderungen der Schriftgröße mit. Wie weit das gut geht, liegt nur daran, wie groß die Hintergrundgrafik ist. Wenn Sie also nur einen kleinen Kasten brauchen, kann die Grafik ruhig kleiner als die hier verwendeten 1200x1000 Pixel sein.

Die Grafik muss auch keine runden Ecken haben. Auch andere grafische Gestaltungsmöglichkeiten stehen offen. Weitere Beispiele liefert diese Testseite.

Diese Technik funktioniert in allen gängigen Windows-, Linux- und Mac-Browsern.

Weitere CSS-Ressourcen gibt es unter www.andreas-kalt.de/webdesign/links/css.htm

115 Kommentare

  1. ist des so gewollt, das es ab einer brosergröße von mehr als 1600px die box teil? Gruß KY

    ky-programming am 06.02.2008

  2. gewollt oder nicht gewollt... es ist abhängig von der Bildgrösse, soll dieser Effekt nicht eintreten, muss die Rechts-Oben-Grafik entsprechend grösser sein.

    jak am 24.06.2008

  3. also ich finde die Lösung ja genial und ansatzweise nutze ich es auch genau so. könnte man nicht es irgendwie hinbekommen, dass sich der mittelteil, unendlich oft wiederholt? Gruß KY

    KY am 18.07.2008

  4. OMG. Das darf ja wohl nicht wahrsteiner sein... Da stecken ja so viele Fehler drinn.. 1. Den Hintergrund (wenn er einfarbig ist) als grafik zu machen ist schwachsinnig, dafür gibts background-color 2. Alle Grafiken für die Seitenteile können auf 13px oben (in diesem Beispiel) 171px rechts 31px links usw reduzieren, sie werden als hintergrund gesetzt und einfach widerholt. dann bleiben dann nur die Ecken übrig, die dann oben links 2019px rechtsoben 33*25 usw 3. wenn man solche Grafiken erstellt, sollte man PNGs mit durchsichtigem hinterwählen. Warum? klar: heute ist die Seite gelb morgen grün die Grafik bleibt die selbe. Nun bei dieser art stimmt nun das Gerüst nicht mehr ganz.. aber insgesammt die bessere Lösung: Da 1. kleiner, 2. flexibler

    Lisa am 01.08.2008

  5. Ziemlich schmal den blog so zu kritisieren, Anregungen ok, Verbesserungstipps ok, einen auf neunmal schlau zu machen und in einer unglaublichen Art und Weise den Eintrag nieder zu machen, nicht ok.

    Peter K am 06.10.2008

Kommentar hinzufügen

Bitte füllen Sie alle Felder mit einem * aus. Ihre E-Mail-Adresse wird nicht veröffentlicht. HTML ist nicht erlaubt, dafür Markdown.






Zur Spamvermeidung nutzt das Formular ein sogenanntes Captcha.
Bitte tragen Sie das Ergebnis der Rechenaufgabe in das nachfolgende Feld ein.
(Beispiele: max(3,5) = 5; min(2,8) = 2; 3 + 5 = 8)

3 * 2