Der tägliche Computer-Ärger hat ein Ende… oder doch nicht!?
Posts tagged css
Transparente PNGs für den Internet Explorer 6
01731 Tagen
Auf der Suche nach einem Workaround für die Darstellung von transparenten PNG-Grafiken im Internet Explorer 6 findet man ja mittlerweile zig Webseiten im Netz. Hier möchte ich die bei mir wunderbar funktionierende Lösung präsentieren.
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
Und hier noch zwei Links mit ähnlicher Beschreibung/Anleitung. Einmal WebmasterPro.de und .devSOURCE.
Opera 9.5 und Google Mail aka GMail
11786 Tagen
Melde mich nach langem warten mal wieder mit einem neuen Artikel. Durch die doch recht groß gefeierte Veröffentlichung von Opera 9.5 konnte ich mich einem kleinen Test natürlich nicht verschließen.
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.
Zeilenumbruch im pre-Tag
31815 Tagen
Da ich doch immer mal wieder diversen Code hier niederschreibe hat sich ein Plug-In zum Syntax Highlighting namens “Snippet Highlight” in mein WordPress dazugesellt. Schlecht bzw. gut – weil ja eigentlich Sinn der Sache – ist, dass ein pre-formatierter Text eben genau so wiedergegeben wird, wie er eingetippt wurde. Die Folge ist meist, dass bei langen Strings diese regelmäßig schön über das Layout hinaus schießen oder, je nach Layout, auf einmal im nirgendwo verschwinden.
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.
Woopra-Website ohne Design
01815 Tagen
Wollte mir heute mal die Software für Woopra herunterladen und musste dementsprechend auf deren Homepage. Erstmal war ich leicht irritiert, da mir die Seite im Firefox gänzlich ohne Design präsentiert wurde. Im Internet Explorer 6 bekommt man zwar ein Design zu sehen, allerdings ist die Navigation leicht zerschossen.
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.
Alternative zum border-image mit CSS
01816 Tagen
Beim erstellen einer, wenn auch kleinen, Website stößt man doch immer mal wieder auf kleiner Probleme bei der Umsetzung. So hat sich z.B. jemand überlegt, es wäre doch ganz schick, wenn man um seinen Content einen grafischen Rahmen erstellt. Eine komfortable Funktion dafür gibt es im Bereich von CSS. Diese nennt sich border-image. Problem ist nur, dass es diese erst in der CSS-Version 3 geben wird. Aktuell nutzbar ist jedoch die Version 2.1, welche ohne eine solche Funktion auskommen muss. Dementsprechend muss man sich leider anderweitig behelfen. Hier jetzt eine kleine Anleitung zu meiner Lösung – es gibt ja bekanntlich immer mehrere für ein Problem.
Das ganze funktioniert jetzt erstmal nur bei der Vergabe einer festen Breite.
Überblick bei CSS-Dateien behalten
01822 Tagen
Seit einiger Zeit beschäftige ich mich schon relativ intensiv mit dem Thema CSS. Vom ersten Tag an, als ich davon hörte, war ich begeistert. Das strikte trennen von Inhalt und Design hat unschlagbare Vorteile. Vor allem bei einem Re-Design einer Website. Zu diesem Thema habe ich mittlerweile einiges an Büchern, Websites, Videos und anderen Quellen auf mich einprasseln lassen. Was bis dahin jedoch leider zu kurz kam, war das Kommentieren und Dokumentieren der CSS-Dateien. Es wird zwar überall mehr oder weniger kurz angeschnitten, aber jeder kommentiert eben auf seine Art und Weise.
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.
WordPress Themer Kit
01866 Tagen
Vor kurzem habe ich einen Artikel über das WordPress-Plugin “Theme Test Drive” geschrieben, mit dem man ungesehen von Besuchern, verschiedene Themes ausprobieren kann. Im selben Artikel habe ich unter anderem auch noch auf ein Tutorial verwiesen, welches sich der Theme-Erstellung widmet.
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.