toms blog - the blog with the poorest subheadline

Ich hab mir mal wieder ein Buch gekauft. Nicht mein Tag heißt es und stammt vom Produzenten und Chefautor der meiner Meinung nach lustigsten deutschen Serien Stromberg und Dr. Psycho – Ralf Husmann. Auf der offiziellen Seite findet man den Buchrückentext und eine Autorenlesung. Ich bin zwar noch nicht komplett durch, aber soviel sei schon mal gesagt: ich liebe es. Sau lustig geschrieben, extrem spannend erzählt und Charaktere mit nur allzu hoffnungslos menschlichen Problemchen… es ist genau die Art von Witz, die mir an Stromberg so viel Freude bereitet. Kauft´s euch! Noch ein Zitat, das euch den Tag versüßen wird:

Der Mond ist rund, der Mond ist Rund, er hat zwei Augen, Nas und Mund … und Eier

Herr Rockn hat mir das Stöckchen für seine monatlichen Top 10 zugeworfen. Kein Problem dachte ich mir – das fang´ ich sogar mit den Zähnen. Denkste! Es fiel mir nicht gerade einfach, 10 Lieder zu finden, die ich in letzter Zeit am meisten höre, da ich quasi fast nur noch meine last.fm Radiostationen aufdrehe.

Wie auch immer – hier sind sie – meine persönlichen Top 10 des letzten Monats. Pennywise mometan ganz oben, weil ich erst vor einer Woche von dem nun schon nicht mehr ganz so neuen Album erfahren habe (wieso krieg ich sowas nicht mit?) und grad ganz geil auf die Jungs bin. Des weiteren hab ich mal grad wieder eine kleine Trompeten-Phase was man z.B. an dem Skacore Lied Scum Triumphant von Random Hand und an Snuff sieht. Die ruhigeren Lieder von Offsprings neuer Platte habens mir auch angetan, deswegen A Lot Like Me auf der drei.

1. We´ll Never Know – Pennywise
2. Scum Triumphant – Random Hand
3. A Lot Like Me – The Offspring
4. Who´s Laughing Now – Millencolin
5. Shadow Of The Dead – Anti-Flag
6. The Stories Are True – Time Again
7. Wine And Roses – Lars Frederiksen & The Bastards
8. Ye Olde Folke Twatte – Snuff
9. These Colors Flee The Scene – We Are The Union
10. Talking Bombs – The Unseen

Mit TYPO3 kann man wunderbare grafische Überschriften erzeugen. Doch was tun, wenn man kein TYPO3 verwendet, seine Überschriften aber trotzdem etwas aufpeppen möchte? Ich erinnerte mich an Tobi, der mal einen Beitrag über eine recht nette Technik auf khmerang.com verfasste, um Überschriften mittels CSS einen grunge-Look zu verpassen. Auf diese Art- und Weise lässt sich auch sehr hübscher Web 2.0 glossy-Style erzeugen wie er z.B. auch vom Logo Creatr verwendet wird – und das ohne für jede Überschrift ein Bild generieren zu müssen.

Alles, was man dazu braucht, ist ein PNG-Bild, welches mittels Stylesheet über die headline gelegt wird und den Glanz erzeugt. Nein, im IE 6 geht das natürlich nicht, da er mit dem Alpha-Wert nicht zurecht kommt. Aber hey – wer den IE6 jetzt immernoch nutzt ist meiner Meinung nach selber schuld und muss dann eben auch auf den tollen Glossy-Effekt verzichten. Kinofilmproduzenten optimieren ihre neusten Streifen ja auch nicht auf Schwarz-Weiß-Bildschirme :)

Das Bild, das ich dazu verwendet habe, liegt hier.

Da man hier in WordPress so schlecht Code einfügen kann, hab ich eine kleine Microseite gebaut, auf der ihr den Code und ein paar live-Beispiele genauer unter die Lupe nehmen könnt:

Glossy Web 2.0 Überschriften mit CSS

Wer XHTML / CSS Templates bastelt kennt die Problematik: Um DIV-Container nebeneinander darstellen zu können benötigt man für viele Problemstellungen floating boxen. Das heißt einen oder mehrere DIV-Container die mit “float: left” oder “float: right” positioniert werden. Problem an der Sache ist, dass der umgebende Container der floating-Boxen das “wrapping” nicht richtig hinbekommt. Positioniseverything hat dieses Problem schon ausführlich beschrieben und eine clearfix-Klasse für´s  CSS eingeführt, die auf den umgebenden Container gesetzt wird. Dieser fix funktioniert ganz gut, es geht aber besser. Über Sitepoint bin ich auf Paul O´Brian gestoßen, der beschreibt, dass der clearfix auch einfacher geht: nämlich dann, wenn man das umgebende Element einfach auf overflow: hidden (overflow: auto geht auch) setzt.

Ich war ziemlich verblüfft, dass das so einfach sein soll. Leider musste ich feststellen, dass der fix bei einfachen floatings zwar einwandfrei funktioniert, bei komplizierteren, verschachtelten Boxen im IE 6 dann leider doch noch Fehler auftreten.

Die Lösung des Problems: Um die IE 6 Problematik zu beseitigen bedarf es nur noch einem kleinen Trick. Sobald das umgebende DIV auf display: inline-block gesetzt wird, stellt auch der IE die floats richtig dar. Allerdings hätte das wieder Folgen für andere Browser, deshalb muss ein IE6 only-hack angewandt werden. Die finale clearfix Klasse sieht dann so aus:

/* the clearfix : ------------------ */
.cf {
display: inline-block;
}
.cf[class] {
display: block;
overflow: hidden;
}

Der Selector .cf[class] wird auf alle Browser außer dem IE 6 angewandt und bedeutet soviel wie “alle Elemente mit der Klasse cf, aber nur wenn das Attribut class gesetzt ist.” Und das ist ja logischerweise auch immer der Fall.

Wer sich das ganze mal im Browser angucken möchte der kann sich dieses Beispiel mal reinziehen. Ich hab den clearfix schon bei mehreren Seiten verwendet und bin bisher ganz gut damit zurechtgekommen. Einziger Wermutstropfen: Das margin-bottom der floating elemente im Container scheint im tollen IE 6 dennoch nicht korrekt zu funktionieren. Dieses Problem lässt sich aber meist durch ein padding-bottom am wrappenden Container umgehen.

Tjaa, mit diesem Problem hab ich mich 2 Stunden rumgeärgert. Nach der Installation von Firefox 3 konnte ich weder die die URL eines Bildes im Browser angeben, noch haben Seiten mit Frames nicht mehr richtig funktioniert. Es war so, als würde die Ansicht ständig aktualisiert. Erst dachte ich, die F5 Taste hat nen Hänger. Nachdem das ausgeschlossen werden konnte hab ich Firefox zweimal unterschiedlich neu installiert – auch kein Erfolg. Wo lag dann der Fehler? An Skype! Das Skype-Plugin (das nix weiter macht als Telefonnummern Skype-freundlich zu verlinken) wird anscheinend auch beim Neuinstallieren von Firefox mit aktiviert… grml. Nach Deaktivieren des Plugins gings dann wieder… gut zu wissen, aber nachdem der Bug gefunden wurde, musste ich trotzdem erstmal meine Entspannungsübungen machen. Warum ich das schreibe? Vielleicht hilfts ja jemanden, der die gleichen Probleme hat. Ach ja, in meiner neuen Kategorie “Toms tolle Tipps” gibts ab jetzt jede Woche einen tollen Tipp für den Alltag. Nicht verpassen :)