Nachdem zur zeit Webdesign mit runden (abgerundeten) Ecken immer populärer werden, war ich auf der Suche nach einer Lösung für dieses Problem. Während Firefox ja schon seit einigen Versionen eine properitäre (-moz-border..) bietet bleibt die Mehrheit der Internet (Explorer) Nutzer immer noch ausgesperrt. Hier helfen nur zwischen Lösungen mit einer oder mehreren Hintegrundgrafiken für die es hunderte Beispiele im Web gibt. Alle diese Lösungen sind aber mehr oder minder schwierig zu warten und erfordern eine Menge überflüssiges HTML und Grafik Dateien.
Gott sei Dank geht es auch einfacher. Bei meiner momentanen Liebingsjava Script Bibliothek jquery gibt es ein “corner” Plugin, das neben den hübschen aberundeten Ecken auch gleich noch einiges anderes mehr kann.
Die hübschen kleinen Bildchen in der URL Zeile oder bei den Favoriten haben sich mittlererweile ziemlich etabliert, nur wie erzeuge ich die Grafik im korrekten Format damit Sie auch von allen Browsern richtig angezeigt wird?
Eigentlich ist es nicht schwierig, man brauch nur die Datei und eine kleine HTML Meta angabe aber irgendwie war ich mir immer unsicher wie genau das auszusehen hat und welches Dateiformat ich verwenden muss. Als das Problem heute noch mal auftrat, habe ich die Seite FavIcon from Pics gefunden. Hier kann man nicht nur bequem aus einer beliebigen JPG oder GIF seine Favicons generieren lassen, sondern kann auch gleich noch die vorhandene Seite überprüfen und kriegt auch eine Anleitung wie man die Meta Tags aufbauen sollte.
Stück für Stück bin ich dabei meine Webseiten weg vom alten Tabellen orientierten hin zu reinen CSS Lösungen zu entwickeln. Immer wieder trifft man dabei aber auch auf ungewohnte Schwierigkeiten.
Ich wollte einen Text und ein Bild nebeneinander setzten, so dass das Bild links und der Text rechts steht. Soweit alles kein Problem, nun sollte aber der Text eine graue Hintergrundfarbe haben, die logischerweise den gesamten Bereich ausfüllt. Da mein Text aber u.U. länger ist als das Bild hoch ist, u.U. aber auch umgekehrt suchte ich nach einer Lösung die das entsprechende DIV auf eine Höhe von 100% bringt.
Letztendlich vergeblich, für das Problem scheint es nur zwei Lösungen zu geben, die aus meiner Sicht beide Workarounds sind:
- Man fügt eine Hintegrundgrafik mit verschiedenefarbigen Bereichen in das gesamte Element ein, und erhält dann Pseudospalten wie man es hier sehen kann.
- Man kann sagen welche der beiden “Spalten” garantiert eine ausreichende Länge hat, und kann dann mit einer verschachtelten Lösung wie sie hier beschrieben ist leben.