Schon seit dem Beginn im 2000 verwendet tilllate gerundete Ecken als Design-Element. Doch wie kriegt man diese mit elegant hin? Ein Vergleich der Techniken.
Methode 2000: Ich hatte keine grosse Ahnung von HTML und arbeitete noch mit <font>-Tags. *tschudder*. Mein Trick, um die runden Ecken hinzukriegen war trivial:
Die runden Ecken waren im Hintergrundbild drin. Mit Hilfe von unsichtbaren Tabellen wurde der Inhalt dann pixelgenau über dem Hintergrundbild platziert. Unflexibel und unelegant. Jede Aenderung am Design bedurfte ein erneutes Erzeugen des Hintegrundbildes.
Methode 2003
Dieses Verfahren ist jetzt noch auf tilllate zu finden: Ueber halsbrecherische Tabellenkonstrukte baue ich den Rahmen aus 8 verschiedenen Bildern zusammen:
Diese Tabelle erzeugen wir mittels einer Helper-Funktion:
[source:php]echo tl_getTemplateBox(“the content of the table”,130,43,true,true);
[/source]
Das Ergebnis sind flexible Rahmen (so genannt “liquid”), welche in jedem Browser korrekt angezeigt werden. Aber damit ist schon fertig mit den Vorteilen. Der Code ist schwer, lang, unleserlich, erzeugt 8 teure HTTP-Requests, ist semantisch falsch (Inhalt und Darstellung ist nicht getrennt). Kurz: Ich möchte diese Methode so schnell wie möglich loswerden.
Methode 2007
Für unser neuestes, (noch geheimes) Projekt habe ich nach einer neuen Methode gesucht, welche die genannten Nachteile nicht hat. Die Methode soll folgendes erfüllen:
- flexible Dimensionen
- bisherige Rahmenelemente wiederverwendbar
- PHP-Entwickler muss nicht auf Hacks zurückgreifen
- Erzeugter HTML-Code muss schlank sein
- Inhalt und Darstellung getrennt. Darstellung wird im CSS definiert.
Ich habe Verfahren von hier und von Sitepoint komibiniert, um die genannten Anforderungen zu erfüllen.
Will der PHP-Code einen Inhalt in eine Box mit gerundeten Ecken einfügen, erzeugt er folgenden Code:
[source:html][/source]
Ein 10-Zeilen-Javascript wird nun ins window.onload eingehängt. Diese Funktion findet alle DIVs, welche zur Klasse autoround gehört und fügt die notwendigen “Hilfs-DIVs” ein, um die runden Ecken zu erzeugen. Schaut euch mal den “generated HTML-Source” an. Zugegeben, sieht abenteuerlich aus. Aber dieses Konstrukt lässt sich wunderbar per CSS gestalten.
Ganz glücklich bin ich mit der Methode noch nicht. 8 verschachtelte DIVs finde ich ziemlich wild. Und mit der Javascript-Funktion fügen wir eine neue Komponente ein, welche ausfallen könnte.
Aber von den 43 hier vorgestellten Methoden finde ich es die beste für unsere Bedürfnisse.
Falls ihr bessere Vorschläge habt: Her damit! 🙂
auf CSS3 warten 😉 [1]
ev. wäre das mit zwei flash komponenten lösbar!? im html code statt einer tabelle 3 div’s:
1. div: 100% width flash, welches tl,t und tr generiert [2]
2. div: content
3. div: gleich wie 1. div nur bl,b und br
das gleiche mit 3 divs könnte so gehen, dass im ersten div der tl als img eingefügt ist und der tr als css bild. das gleiche im 3. div nur b statt t
ev. wären die eckbilder auch mit float etwas manipulierbar.
so viele div’s wie im beispiel finde ich auch ein wenig viel, auch wenn diese schneller geladen sind als die absolut tödlichen tables (tables werden ja erst angezeigt, wenn sie vollständig geladen sind (/table) natürlich nicht in jedem browser.
es ist schon zu spät um ganze beispiele (brauchbare) aus meinem kopf zu bringen… 😉
vielleicht morgen noch was konkreteres.
gruss
dhe
[1] http://www.w3.org/TR/css3-background/
[2] TopLeft, Top, TopRight resp. BottomLeft…
Tolle Lösung, schön schlank und so! Evtl. könnte man das CSS für die Endlösung noch ein wenig schlanker machen (und ich glaube ich habe da eine nicht definierte Variable gesehen, solche Dinge können böse Enden).
Ansonsten wirklich auf CSS 3 warten (anständige Browser-Unterstützung vermutlich irgendwann 2020) oder mit den -moz-border-radius für wirklich coole Browser schon heute zaubern. Was ich mir noch überlegt habe (aber nicht ganz so flexibel ist) das Hintergrundbild als ganzes jeweils in der richtigen Grösse auf dem Server dynamisch, gecacht zu erzeugen.
Nachtrag: Diesen Link (http://24ways.org/2006/rounded-corner-boxes-the-css3-way) hatte ich eben nicht zur Hand. Wenn dein Mac noch wo rumsteht hast kannst du css3 schon mal austesten und nachher wieder trauern, dass das nicht in allen Browsern funktioniert.
@dhe:
Zum Flash:
Das ist ein interessanter Tipp. Folgendes spricht für mich dagegen:
1. Wir bringen hier wieder eine neue Technologie ins Spiel, welche ausfallen könnte und man beherrschen und warten muss.
2. Ich kann die bestehenden Bitmaps nicht wiederverwenden.
3. Der notwendige HTML Code hätte drei DIVs drin. Anstatt einer wie im aktuellen Muster.
4. Ich hasse grosse OBJECT/EMBED-Tags im Code. Die brauchen so viel Platz.
Zur Variante 2:
Das ähnelt m.E. der Sliding-Doors-Technik welche sehr beliebt ist.
@leo
Die Idee mit der serverseitigen Bildgenerierung habe ich mir auch schon überlegt.
Wir machen das schon, allerding momentan nur Text. Für unsere Business-Tilllate-Sites wie redbull-gallery.ch
Für die Ecken könnte man es es ähnlich machen… Auch mit der GD-Library.
Hier was zum spielen.
http://www.roundedcornr.com/
Werde im Büro mal schauen ob es ohne Bilder möglich ist.
Greez
Malaxo
File Upload wäre hier nicht schlecht;)
HTML
—-
Runde Ecken
•
•
•
•
Text text TEXT tExT Text text TEXT tExT Text text TEXT tExT Text text TEXT tExT
nach “BR” Text text TEXT tExT Text text TEXT tExT Text text TEXT tExT Text text TEXT tExT
—
CSS
—
body {
background-color: #FFF;
margin: 0px;
padding: 0px;
font-size: 16px;
font-family: Verdana;
}
div.runde-box{
position:relative;
width: 9em;
background-color: #E6E6E6;
margin: 3px;
}
/*********************
GLOBALE WERTE
*********************/
div.oben-links-aussen, div.unten-links-aussen, div.oben-rechts-aussen, div.unten-rechts-aussen{
position:absolute;
width:20px;
height:20px;
background-color:#FFF;
overflow:hidden;
}
div.oben-links-innen, div.unten-links-innen, div.oben-rechts-innen, div.unten-rechts-innen{
position:relative;
font-size:150px;
font-family:arial;
color:#E6E6E6;
line-height: 40px;
}
/*********************
SPEZIFISCHE WERTE
*********************/
div.oben-links-aussen{
top:0px;
left:0px;
}
div.unten-links-aussen{
bottom:0px;
left:0px;
}
div.oben-rechts-aussen{
top:0px;
right:0px;
}
div.unten-rechts-aussen{
bottom: 0px;
right:0px;
}
div.oben-links-innen{
left:-8px;
}
div.unten-links-innen{
left:-8px;
top:-17px;
}
div.oben-rechts-innen{
left:-25px;
}
div.unten-rechts-innen{
left:-25px;
top:-17px;
}
div.box-text{
position: relative;
padding: 8px;
color:#000;
}
Html hat es wie erwartet nicht übernommen.
Für das Script könnt ihr mich unter
mese_t@hotmail”DOT”com
kontaktieren.
Greez