Webdesign- und Freeware-Tipps
DIV-Box und abgerundete Ecken
Hier möchte ich dir beschreiben, wie man in einfacher Weise von der üblichen Rechteckform der DIV-Boxen wegkommt und sich somit viele neue Gestaltungsmöglichkeiten für ein Website-Layout ergeben. Diese Methode arbeitet mit Grafiken. Wer auf diese komplett verzichten möchte kann auch eine rein CSS-basierte, aber in meinen Augen recht aufwändige Methode (von Stu Nicholls - englisch), verwenden.
Der DIV-Container bleibt flexibel, kann also nahezu jede Breite und Höhe annehmen. Insgesamt werden 4 DIV-Container benötigt.
Der erste DIV-Container ist das Grundgerüst, bzw. das zusammenhaltende Element für die restlichen 3 Container. Diese werden dann einfach untereinander in den umschließenden Container geschrieben.
<div class="box">
<div class="box_oben"></div>
<div class="box_inhalt"></div>
<div class="box_unten"></div>
</div>
Der Trick ist folgender: Die Klassen box_oben und box_unten erhalten jeweils eine Ecke als Hintergrundbild auf der linken Seite. Die rechten Ecken werden als Bilder im HTML-Code eingefügt. Also sieht der HTML- bzw. CSS-Code so aus:
HTML-Code:
<div class="box">
<div class="box_oben"><img src="ecke_or.gif" alt="" /></div>
<div class="box_inhalt">Lorem Ipsum</div>
<div class="box_unten"><img src="ecke_ur.gif" alt="" /></div>
</div>
CSS-Code:
.box_oben{
background: #000 url(ecke_ol.gif) left top no-repeat; /* Die Farbe #000 muss an eure Eckenfarbe angepasst werden */
text-align: right;
}
.box_unten{
background: #000 url(ecke_ul.gif) left top no-repeat; /* Die Farbe #000 muss an eure Eckenfarbe angepasst werden */
text-align: right;
}
.box_inhalt{
background: #000; /* Die Farbe #000 muss an eure Eckenfarbe angepasst werden */
padding: 0 20px; /* Abstand des Textes vom Rand links und rechts. Die 20px durch die Höhe der Eck-Grafik ersetzen. */
}
Wenn die Box eine bestimmte Breite haben soll muss in der CSS dem umschließenden DIV-Container einfach z.B. width: 300px; zugewiesen werden.
Wichtig: Alle Ecken sollten dieselben Dimensionen haben, damit es nicht zu unerwünschten Ergebnissen kommt. Sie müssen allerdings nicht zwingend quadratisch sein.
Beispiel 1:
Alle weiteren Angaben sind Gestaltungssache und abhängig von deinem Layout, bzw. deiner Farbgebung. Du musst eventuell die Schritfarbe, -größe und -art einstellen sowie die Hintergrundfarbe der Box. Für weitere CSS-Angaben verweise ich einfach mal auf www.css4you.de.
Beispiel 2:
Eine Alternative zu der von mir vorgestellten Variante bietet SelfHTML an. Dort ist bei dem DIV-Container auch Schatten möglich, allerdings sind dort sehr große Grafiken notwendig, was die Ladezeit verlängert.
