23″

Homepage von Siro, Sobe und Sven
Uncategorized

Runde Ecken (für liquide Layouts)

März 4, 2018

infache CSS-Layouts wirken oft starr und langweilig. Mit bunten Bildern überfrachtete Layouts wiederum lenken zu stark vom Inhalt ab. Kleine Highlights, wie z.B. abgerundete Ecken hingegen lockern die starre Struktur auf, ohne aufdringlich zu wirken. Mit ein bisschen Geschick kann man diese auch bei liquiden Layouts verwenden.

Beim Lesen anderer Artikel zu diesem Thema ist mir aufgefallen, dass es meist darauf hinausläuft, große Hintergrundbilder zu nehmen und diese sich überlappen zu lassen.

Wer allerdings ohne diffusen Schatten oder exklusive Schnörkelrahmen auskommt und eine Alternative sucht, die mit allen Auflösungen funktioniert und dabei mit möglichst wenig Bildern auskommt, dem soll der folgende Artikel helfen.

Woher nehmen…

Benötigt werden zusätzlich zum Element mit dem Rahmen vier Elemente, die die Ecken aufnehmen. Dabei können sowohl Elemente innerhalb, als auch außerhalb des Bereichs verwendet werden. Gibt es nicht genug Elemente, so müssen zusätzliche angelegt werden, wobei man darauf achten sollte, seinen HTML-Code möglichst vom Layout freizuhalten.
Wenn der Bereich eine feste Höhe oder Breite bekommen soll, reichen auch zwei Elemente.

Der HTML-Code könnte z.B. so aussehen:

 <div id="content">
   <div id="link_weiter"><a href="#">nächste Seite</a></div>
   <h1>Überschrift</h1>
   [...]
   <div id="link_oben"><a href="#oben">nach oben</a></div>
 </div>
 <div id="timestamp">zuletzt aktualisiert am 01.01.1970</div>

An HTML reicht uns das völlig, also weiter…

Das Stylesheet

Zuerst geben wir dem content-Div eine Hintergrundfarbe und einen Rahmen.

 #content {
   background: #EDEEF7;
   border: 1px solid #252A6B;
 }

Passend dazu basteln wir uns vier Ecken mit jeweils 9 Pixeln Höhe und Breite.

   

Diese werden über die background-Eigenschaft eingebunden, wobei darauf zu achten ist, dass die Position des Hintergrunds mit der Position der Ecke übereinstimmt, also die Angabe für die linke obere Ecke top left lautet.

 #link_weiter {
   background: url(border_ro.png) top right no-repeat;
 }
 h1 {
   background: url(border_lo.png) top left no-repeat;
 }
 #link_oben {
   background: url(border_lu.png) bottom left no-repeat;
 }
 #timestamp {
   background: url(border_ru.png) top right no-repeat;
 }

Jetzt müssen wir die Elemente in die richtige Position bringen. Mit float:right lassen wir das link_weiter-Div rechts fließen. Damit haben wir an allen vier Ecken jeweils ein Element.
Zusätzlich entfernen wir den Außenabstand des h1-Elements.

 #link_weiter {
   float: right;
 }
 h1 {
   margin: 0;
 }

Nun verschieben wir die Elemente mittels relativer Positionierung an die gewünschten Stellen. Die inneren Elemente müssen jeweils nur um einen Pixel in Richtung der Ecke verschoben werden. Das timestamp-Div muss um die Höhe des Hintergrundbilds nach oben verschoben werden, so dass die Unterkante des Hintergrundbilds auf dem Rahmen liegt.

Schließlich geben wir noch allen Elementen einen Innenabstand von 10px, was allerdings nur der Optik dient

Das fertige Stylesheet

Hinweis: Wenn ihr mit den Mauszeiger kurz über den Quelltext haltet, bekommt ihr eine kurze Erklärung dazu.

 #content {
   background: #EDEEF7;
   border: 1px solid #252A6B;
 }
 #link_weiter, h1, #link_oben, #timestamp {
   padding: 10px;
   position: relative;
 }
 #link_weiter {
   background: url(border_ro.png) top right no-repeat;
   float: right;
   top: -1px; right: -1px;
 }
 h1 {
   background: url(border_lo.png) top left no-repeat;
   margin: 0;
   top: -1px; left: -1px;
 }
 #link_oben {
   background: url(border_lu.png) bottom left no-repeat;
   bottom: -1px; left: -1px;
 }
 #timestamp {
   background: url(border_ru.png) top right no-repeat;
   top: -9px;
 }

Wie es aussieht könnt ihr im Beispiel sehen.
Ändert ruhig auch mal die Schrift- oder die Fenstergröße um zu sehen, wie sich die Box an die Gegebenheiten anpasst.

Das Beispiel funktioniert in den folgenden Browser problemlos:
Firefox 1.0, IE 5.5 / 6, Konqueror 3, Opera 6 / 8.
Dabei ist zu beachten, dass der Doctype angegeben werden muss, damit das Beispiel richtig funktioniert.

Natürlich könnte man die Elemente auch absolut positionieren, allerdings funktioniert dies erstens nur mit Elementen, die innerhalb unseres Rahmens liegen und zweitens interpretieren ältere Opera-Browser die Angaben right und bottom in Verbindung mit absoluter Positionierung nicht.

verwendete CSS-Eigenschaften

Hinweis: Die Links führen zu den entsprechenden Kapiteln in der HTML-Dokumentation SELFHTML.

  • background
  • border
  • float
  • margin
  • padding
  • position

Probleme?

Die Sache mit dem Gecko

Da wir Elemente ‚missbraucht‘ haben, die vorher schon eine Funktion hatten, wollen wir sie natürlich noch weiter formatieren. Wer jetzt allerdings den Innenabstand der Eck-Elemente in der Einheit em definiert, kann bei Betrachtung in Browsern, die die Gecko-Engine verwenden ( Firefox, Mozilla, … ) eine böse Überraschung erleben, da die Ecken auf Grund von Rundungsfehlern nicht mehr auf dem Rahmen liegen.
Das Einzige, was in diesem Fall immer hilft ist, den Abstand in Pixeln anzugeben.

Links nicht erreichbar?

Ein weiteres Problem tritt in Zusammenhang mit dem Opera-Browser auf. Wenn man ein Element mit floatversieht, liegt es automatisch hinter den Elementen, die es umfließt. Dadurch sind enthaltene Links nicht mehr erreichbar. Hier hilft auch eine mittels z-index explizit vereinbarte höhere Position nicht.
Das Einzige, was man hier tun kann ist, das umflossene Element in seiner Breite zu beschränken.

Falls jemandem noch andere Probleme auffallen oder andere Fragen zu diesem Artikel hat, kann er sich über unser Mail-Formular an mich wenden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.