 SELFHTML aktuell Artikel CSS | |
 |
CSS:
|
 |
|
 | |
| E-Mail: |  info@andreas-kalt.de |
|---|---|
| Homepage-URL: |  http://www.andreas-kalt.de/ |
Bei Fragen zu diesem Beitrag bitte den Autor des Beitrags kontaktieren!
Dieses Beispiel zeigt, wie man eine skalierbare Box mit grafischer Umrahmung mittels Hintergrundgrafiken gestalten kann, ohne dabei auf Tabellen zurückgreifen zu müssen. Der HTML-Code der hier gezeigten Lösung ist wesentlich leichter zu lesen und damit zu pflegen, als dies bei einem Tabellenlayout der Fall wäre.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Beispiel Runde Ecken</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
/* grundlegende Seiteneinstellungen */
body {
font:100% Verdana, Arial, Helvetica, sans-serif;
background-color:#F1EDCF;
margin:0 5%;
}
h1,h2,h3 {
font-family:"Times New Roman", "Trebuchet MS", Georgia, serif;
font-weight:normal;
color:#667553;
}
h1 {
font-size:250%;
}
h2 {
font-size:200%;
}
h3 {
font-size:150%;
}
/* hier beginnt das für die Box relevante CSS */
div {
margin:0;
}
.ro {
background:url(roundedbox_ro.gif) top right no-repeat;
}
.lo {
background:url(roundedbox_lo.gif) top left no-repeat;
}
.ru {
background:url(roundedbox_ru.gif) bottom right no-repeat;
}
.lu {
background:url(roundedbox_lu.gif) bottom left no-repeat;
}
.inhalt {
margin:0;
padding:2.5em 2.5em 3.5em 2.5em;
}
.inhalt p {
margin:0;
padding:0;
}
-->
</style>
</head>
<body>
<h1>Beispielseite "Runde Ecken" </h1>
<h2>Fertige Box </h2>
<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 diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation
ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis
at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p> </p>
<p>Li Europan lingues es membres del sam familie. Lor separat existentie
es un myth. Por scientie, musica, sport etc., li tot Europa usa li
sam vocabularium. Li lingues differe solmen in li grammatica, li
pronunciation e li plu commun vocabules. Omnicos directe al desirabilit‡ de
un nov lingua franca: on refusa continuar payar custosi traductores.
It solmen va esser necessi far uniform grammatica, pronunciation
e plu sommun paroles.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Unsere Box besteht aus fünf ineinander verschachtelten <div>-Tags, von denen die vier äußeren
jeweils eine Ecke und einen Teil der Fläche der Box mit einer Hintergrundgrafik versehen. Damit die Box skalierbar ist, wird die
Ausgangsgrafik sehr großzügig gestaltet (ca. 1.200 x 1.000 Pixel) und dann per Slice-Funktion des Grafikprogramms in vier Teile
zerschnitten. Durch Überlappung ist immer nur ein Teil jeder Grafik zu sehen.
Da Hintergrundbilder ausschließlich innerhalb der Fläche des zugehörigen Elements sichtbar sind, dient ein Großteil jeder Grafik als Reserve für eine mögliche Skalierung und wird auch nur dann sichtbar, wenn der Bereich vergrößert wird.
Wir werden die Grafiken so anordnen, dass auf jeder Seite und in jeder Ecke der „richtige“ Teil der Grafik sichtbar ist.
Die vier <div>-Tags und somit deren Hintergrundgrafiken werden so übereinander gelegt, dass sie sich gegenseitig
teilweise verdecken, beim Skalieren aber „hinein- und herausgleiten“.
Ob eine Hintergrundgrafik weiter unten oder weiter oben im „Stapel“ liegt, hängt davon ab, welchem Element sie zugeordnet ist. Tiefer verschachtelte liegen mitsamt deren Hintergrundgrafiken über ihren Elternelementen.
Um nun den einzelnen Containern verschiedene Hintergrundgrafiken zuordnen zu können, weisen wir jedem <div>-Tag
ein individuelles Attribut zu. Zur Verfügung stehen das id- und das class-Attribut. Eine id darf
allerdings in jedem HTML-Dokument nur einmal, das selbe class-Attribut hingegen in mehreren Elementen vorkommen. Da
unsere Seite möglicherweise mehrere gleiche Boxen enthalten soll, entscheiden wir uns daher für das class-Attribut.
Nacheinander erhalten die Elemente die Klassen ro (für rechts oben), lo,
ru und lu, das innerste die Klasse inhalt.
Die Reihenfolge der Elemente ist wichtig, da nur so die gewünschte Stapelreihenfolge eingehalten wird (siehe oben). Eine
Verschiebung in der Tiefe mittels z-index ist damit nicht notwendig.
Nun wird den einzelnen Elementen ihr jeweiliges Hintergrundbild zugeordnet. Der Selektor .ro { ... }
weist dem <div>-Tag mit der Klasse ro ein Hintergrundbild zu (url(...)), positioniert es in der
rechten oberen Ecke (top right) und gibt an, dass das Bild nicht gekachelt (wiederholt) wird
(no-repeat). Die im Beispiel 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;
Näheres zur 
background-Eigenschaft
gibt es hier bei SELFHTML.
Außerdem stellen wir mit margin:0 und padding:0 sicher, dass nicht irgendein Browser in seinen
Standardeinstellungen andere margin- und padding-Werte für <div>-Tags verwendet.
Anschließend gehen wir bei den übrigen drei Containern ebenso vor. Jeder bekommt sein eigenes Hintergrundbild,
das in der jeweils richtigen Ecke positioniert wird.
Anzeigebeispiel: So sieht's aus
In diesem Beispiel können Sie die vier Elemente des Rahmens, den Text, sowie Innenabstände zur besseren Nachvollziehbarkeit ein- und ausblenden.
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 1.200 x 1.000 Pixel sein. Die Grafik muss auch keine runden Ecken haben, auch andere grafische Gestaltungsmöglichkeiten stehen Ihnen offen.
Der Internet Explorer und Opera 7.11 scheinen Probleme zu haben, wenn das innerste Element (inhalt)
padding-bottom und gleichzeitig der <p>-Tag margin-bottom aufweist. Es sollte also immer nur eine
der beiden Eigenschaften genutzt werden. In unserem Fall haben wir beim <p>-Tag alle margins auf 0 gesetzt.
Die folgenden Stellen werden empfohlen, um das obige Beispiel besser zu verstehen, oder um weitere Möglichkeiten und Details zu erfahren.
Beispiele für weitere Boxen vom Autor dieses Beitrags
A List Apart: Søren Madsen: Creating Custom Corners & Borders
A List Apart: Sliding Doors
Albin.net: Bullet-Proof Rounded Corners
"The ThrashBox" / Rounded Corners for All
Doug's easyCorners
Rounded corners in CSS (per generiertem Inhalt)
W3C CSS tips & tricks / Rounded corners and shadowed boxes
W3C CSS3 Working Draft / Border Module / border-image:
Erstellung abgerundeter Ecken mit Photoshop