In erster Linie wollte ich kein JavaScript anwenden, weshalb schon viele Lösungen weggefallen sind. Eine Möglichkeit per CSS besteht in der Nutzung von Microsoft’s AlphaImageLoader-Filter, der durch DirectX bereitgestellt wird. Zu beachten ist, dass man den Code nur auf das background-Element im CSS beziehen kann. img-Tags werden davon nicht angesprochen. Per Conditional Comment wird der entsprechende CSS-Code speziell dem IE6 zugewiesen.

Wichtig bei der Filter-Angabe ist, dass man keine Leerzeichen verwendet. In einigen Anleitungen sind diese leider vorhanden und das Copy&Paste funktioniert dann natürlich nicht. Auch die Pfadangabe zu den Bildern unterscheidet sich zwischen dem Filter und dem background-Element im CSS.

<style type="text/css">
div#logo {
background-image: url(../images/logo.png);
}
</style>
<!--[if lte IE 6]>
<style type="text/css"><!
div#logo {
filter:progid  XImageTransform.Microsoft.AlphaImageLoader(src='images/logo.png', sizingMethod='image');
background: none;
}
</style>
<!--[endif]-->

Der Filter bietet unterschiedliche Möglichkeiten, das Bild zu skalieren. Über die Werte crop, image bzw. scale, die dem Element sizingMethod zugewiesen werden können, kann man das Bild auf folgende Weise skalieren:

• crop – Container und Bild behalten die angegebene Originalgröße
• image – Container wird auf die Bildgröße skaliert und enthaltener Text wird abgeschnitten (entspricht overflow:hidden) (Default-Wert)
• scale – Bild wird auf die Containergröße skaliert

Update: Auch img-Tags können per Inline-Styles transparent gemacht werden. Hierbei wird dann das src-Element überschrieben.

<img src="../images/logo.png" style="width: 200px; height: 80px; filter:progid  XImageTransform.Microsoft.AlphaImageLoader(src='images/logo.png', sizingMethod='image');" />

Und hier noch zwei Links mit ähnlicher Beschreibung/Anleitung. Einmal WebmasterPro.de und .devSOURCE.

Generell macht der Browser eine ziemlich gute Figur. Gibt ja viele Seiten, die darüber schwärmen. Allerdings habe ich auch gleich wieder was zu mosern. So zeigt mir der Browser z.B. nicht immer alle Bilder einer Website an. Im nach hinein stellte sich jedoch meistens heraus, dass nicht Opera, sondern eher die Webdesigner die Schuld dafür tragen. Opera geht wohl u.a. eindeutig zu korrekt mit CSS-Einträgen um.

Bestes Beispiel ist Google mit seinem Mail-Dienst GMail. Hier kam es wohl dermaßen oft zu Problemen, dass Google ein JS herausgegeben hat, um die Problematik in den Griff zu bekommen.

Vielen Dank an Cybernetz, der mich auf das JS aufmerksam gemacht hat.

Trotz der immer größer werdenden Verbreitung und den umfangreichen Funktionen, die Opera von Haus aus mitbringt, werde ich allerdings beim Firefox bleiben. Hier muss man sich zwar erst alles per Addons nachträglich integrieren, allerdings finde ich ihn vom Gefühl her einfach angenehmer zu bedienen. Ist aber Geschmacksache.

Mit HTML kann man das “Problem” lösen, indem man im pre-Tag einfach width=50 eingibt. Somit wird nach maximal 50 Zeichen ein Zeilenumbruch durchgeführt. Je nach genutztem WordPress-Plugin wird dies jedoch wieder entfernt, wenn man pech hat.

CSS ist da schon etwas sicherer. Im Blog “Unwakeable” von Tyler Longren bin ich mal auf ein schönes CSS-Format gestoßen, dass jeden Browser gut bedient.

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
 width: 99%;
}

Alternativ dazu kann man sich natürlich auch einen div-Container drum herum bauen, mit fester Breite und Höhe und dem ganzen einen overflow verpassen. Kann man, muss man aber nicht, weil nicht wirklich elegant. Vorteil ist jedoch, dass es ins Layout passt und trotzdem die Formatierung erhalten bleibt.

Beim durchsehen des Quelltextes stößt man zur Zeit auf folgenden, leicht kuriosen, Eintrag:

<link style="display: none;" rel="stylesheet" href="http  /www.woopra.com/wp-content/themes/woopra/style.css" type="text/css" media="screen">

Der Fokus liegt hier auf dem style="display: none;", der im link-Tag meiner Meinung nach ziemlich überflüssig ist. Nach einem Test mit einer Beispielseite scheint dieser Eintrag jedoch vom Firefox wie auch vom IE6 gekonnt ignoriert zu werden. Ich habe mal über die Web Developer Toolbar für den Firefox das im link-Tag angegebene Stylesheet manuell eingebunden und siehe da, zumindest das Design wird wieder korrekt dargestellt. Allerdings ohne Bilder. Über die im Quelltext angegebenen Source-Links lässt sich jedoch darauf zugreifen und vor allem der IE6 zeigt diese auch ganz normal an.

Ich bastel ja jetzt schon seit einiger Zeit an Websites herum, aber diesen Effekt kann ich mir im Augenblick noch nicht so ganz erklären. Vor allem, da nur Firefox das Design und die Bilder verschmäht.

Update: Nach einigem suchen bin ich jetzt doch noch auf den Übeltäter gestoßen. Das Problem verursacht das Plug-In Adblock Plus. Hat man hier den “ABP Tracking Filter” abonniert erhält man eine Regel namens “.woopra.”. Diese deaktiviert jegliche Anzeige und Ausführung von Scripten, Bildern und Stylesheets, die über eine Website geladen werden. Ausgenommen ist hierbei die direkte Anzeige im Browser über einen URL-Aufruf, weshalb auch das direkte Laden der Bilder bzw. das manuelle Einbinden des Stylesheets funktioniert hat.

Manchmal sollte man schon wissen, was diverse Plug-Ins bzw. Addons so treiben und im Hintergrund anstellen.

Das ganze funktioniert jetzt erstmal nur bei der Vergabe einer festen Breite.

Erstmal benötigt man einen Rahmen, den man später um seinen Inhalt haben möchte. Ich habe diesen mit Photoshop auf die schnelle erstellt.

• PS öffnen, neues Bild erstellen (500x500px) und neue Ebene erstellen.
• Untere Ebene ist weiß, obere ist schwarz.
• Rechtsklick auf ober Ebene (schwarz) -> Fülloptionen…, “Schein nach innen” auswählen, Füllmethode: Normal, Deckkraft: 100%, Farbe: weiß (eben wie die untere Ebene), Größe: 40px, Kontur: Halbrund.

• Taste “K” drücken bzw. Slice-Werkzeug auswählen. Damit lassen sich jetzt einzelne Bereiche im nachhinein zurecht schneiden. Erstmal ein Rechteck in die mitte des Bildes ziehen. Größe und Form ist egal, hauptsache mittig.

• In der Werkzeugleiste klickt man jetzt etwas länger auf das Slice-Werkzeug um sich das Slice-Auswahl-Werkzeug zu holen oder man hält einfach die STRG-Taste gedrückt (die wechselt automatisch um).

• Doppelklick auf das Rechteck mit der Nummer 01 (links oben im Rechteck zu sehen).
• Slice-Typ: Bild, Name: lo (für links oben), X: 0, Y: 0, B: 40 (s.o. Größe des Rahmens), H: 40 (s. Breite), Slice-Hintergrundart: Ohne.
• Jetzt wählt man Slice 02 aus und geht genauso vor. Name: mo (mitte oben), X: 40, Y: 0, B: 10 (reicht erstmal), H: 40.
• Weiter zu Slice 03 – Name: ro, X: 460 (weil 500-40=460), Y: 0, B: 40, H: 40. Jetzt entsteht ein neues, aktives Slice 04. Nummer 03 bleibt grau und ist somit erstmal nicht aktiv.
• Nun zum Slice unterhalb von 01. Name: lm, X: 0, Y: 40, B: 40, H: 10.
• Slice unterhalb von 04 bekommt den Namen: rm, X: 460, Y: 40, B: 40, H: 10.
• Unten links (geht’s weiter mit Name: lu, X: 0, Y: 460, B: 40, H: 40.
• Nebendran wird ein Slice namens mu und den Werten X: 40, Y: 460, B: 10, H: 40 erstellt.
• Das letzte nennt man ru, X: 460, Y: 460, B: 40, H: 40.
• Jetzt dürfte man einige Slices auf dem Bild sehen, mit Glück nur 9, ansonsten eben mehr. Alles kein Problem, hauptsache man hat die 8 wichtigen lo, mo, ro, lm, rm, lu, mu und ru.
• Hat man diese, speichert man das ganze wie folgt: Datei -> Für Web speichern… .
• Mit einem Rechtsklick auf das Bild und “Auto-Slices ausblenden” verschafft man sich noch etwas Übersicht.
• Man wählt jetzt Slice 01 aus, danach mit gedrückter Shift-Taste das Slice daneben und darunter, dann das rechts oben und darunter, das links unten und daneben und das einzelne rechts unten. 8 sollten es jetzt schon sein.
• Ganz rechts wählt man nun das Dateiformat aus. Bei JPEG macht man in diesem Fall nichts verkehrt und schon kann man auf Speichern klicken.
• Am einfachsten ist das Speichern als “HTML und Bilder”. Hierbei werden die ausgewählten Slices mit den vorher eingegebenen Namen im Ordner “Bilder” abgespeichert. Nur diese werden nachher auch benötigt.
• Somit hat man nun 8 jpg-Bilder. Die vier Ecken, sowie 4 Teilstücke aus den Rändern.
• Die Datei “Abstandhalter.gif” wird nicht benötigt und kann gelöscht werden.

Der Einfachheit halber erstellt man jetzt eine html-Datei direkt im Ordner “Bilder”. Der Inhalt sollte einer Standard-HTML-Seite entsprechen und wird erstmal im Body um folgende Zeilen ergänzt:

<body>
<div id="page">
<div id="oben">
<div id="lo"></div>
<div id="mo"></div>
<div id="ro"></div>
</div>
<div id="rm">
<div id="lm">
<div id="text"></div>
</div>
</div>
<div id="footer">
<div id="lu"></div>
<div id="mu"></div>
<div id="ru"></div>
</div>
</div>
</body>

Jetzt braucht man nur noch die passenden CSS-Einträge:

<style type="text/css">
/* erstmal alles auf Anfang */
* {
padding  ;
margin  ;
border  ;
}
p {
color:white;
background-color:black;
}

/* Gesamt-Rahmen */
#page {
width:880px;
}

/* Oberer Rahmen */
#lo {
float:left;
background: url(bilder/lo.jpg) no-repeat black; /* Grafik wird nicht wiederholt */
height:40px;                                    /* Höhe und Breite sind 40px, wie bei PS angegeben */
width:40px;
}
#mo {
float:left;
background: url(bilder/mo.jpg) repeat-x black;  /* Grafik wird nur in x-Achse, also vertikal wiederholt */
height:40px;
width:800px;                                    /* ergibt sich aus 880px-40px-40px (#page-#lo-#ro) */
}
#ro {
float:left;
background: url(bilder/ro.jpg) no-repeat black;
height:40px;
width:40px;
}

/* Mittlerer Rahmen für Content */
#rm {
background: url(bilder/rm.jpg) repeat-y black right top;        /* erst der rechte Rahmen */
}
#lm {
background: url(bilder/lm.jpg) repeat-y transparent left top;   /* dann der linke Rahmen und Rest transparent */
color:white;
width:100%;                                                     /* wichtig, sonst klappt's nicht */
}

#text {
padding: 0 60px;
}

/* Unterer Rahmen */
#lu {
float:left;
background: url(bilder/lu.jpg) no-repeat black;
height:40px;
width:40px;
}
#mu {
float:left;
background: url(bilder/mu.jpg) repeat-x black;
height:40px;
width:800px;
}
#ru {
float:left;
background: url(bilder/ru.jpg) no-repeat black;
height:40px;
width:40px;
}
</style>

Das ganze kann man sich natürlich auch als gepacktes ZIP-Archiv hier herunterladen.

Für dieses Konstrukt kann man fast jede Rahmen-Grafik nutzen, die man findet. Auch lassen sich so z.B. Bilderrahmen erstellen. Dabei sollte man allerdings auf die Transparenz der Grafiken achten. Also nur als GIF oder PNG (Vorsicht: IE) speichern und ohne weißen o.ä. Hintergrund. Ebenfalls sollte man auf die Wiederholbarkeit der Ränder achten. Sprich, die Texturen sollten sauber aneinander gereiht werden können.

Beim durchstöbern vom Smashing Magazine bin ich zufällig über eine Anleitung oder auch Leitfaden gestoßen, der sich mit unterschiedlichen Ansätzen der Kommentierung auseinander setzt. Dementsprechend wird gezeigt, wie man seine CSS-Dateien durch Kommentare sauber aufbereitet, um auch nach Jahren immer noch den Durchblick zu behalten. Auch ist es eine große Hilfe bei Gemeinschafts-Projekten, wenn also mehrere Personen an einer CSS-Datei hantieren. Und generell bietet eine strukturierte Kommentierung einen schnellen Überblick des Inhalts und ein zügigeres Auffinden einzelner Elemente.

Für jeden, der effektiv, schnell und zukunftsorientiert “programmieren” will sollte sich diesen Leitfaden einmal ansehen und auch einige der Tipps und Vorschläge anwenden. Man macht dabei nur sich selbst und anderen damit das Leben und Umgestalten leichter.

Da heutzutage allerdings für jegliches erdenkliche Projekt auch spezielle Generatoren finden lassen, die einem das Leben leichter machen sollen, gibt es jetzt auch einen für WordPress. Das ganze nennt sich WordPress Themer Kit und ist derzeitig nur auf Englisch verfügbar. Lothar Baier (BlogPimp-Blog) hat sich im Dr. Web-Weblog jedoch dazu bereit erklärt, das ganze auch ins Deutsche zu transformieren.

Der Themer basiert, genauso wie das CSS-Zen-Projekt, auf einer HTML- und einer CSS-Datei. Da WordPress allerdings aus mehreren PHP-Dateien besteht, die miteinander verschachtelt werden, wurden diese einfach in eine einzelne Datei integriert. Somit wird das ganze auch etwas übersichtlicher. Ziel soll es sein, allein durch das Verändern bzw. Anpassen der CSS-Datei, sein eigenes Layout zu entwerfen. Die Funktionsweise bekommt man in den beiliegenden Text-Files und in 3 kurzen Videos näher gebracht.

Interessant ist dieses Prinzip generell für all diejenigen, die sich mit CSS ernsthaft auseinander setzten wollen und ihre Layouts damit gestalten wollen.

Das WP Themer Kit ist zur Zeit noch in der Entstehungsphase, was man an der aktuellsten Version 0.2 schon erkennt. Jedoch birgt das Projekt sicherlich viel Potenzial, um schnell und vernünftig von den 08/15-Themes wegzukommen.