Archiv für die Kategorie ‘Coding’

Transparente PNGs für den Internet Explorer 6

Mittwoch, 27. August 2008

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:DXImageTransform.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:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.png', sizingMethod='image');" />

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

Viele Windows-Schriftarten schnell installiert

Donnerstag, 05. Juni 2008

Im Laufe der Zeit sammeln sich bei mir immer mehr Schriftarten an, die ich natürlich immer schön gesichert hab. Sprich, einfach immer mal wieder den Ordner “Fonts” kopiert. Will man jetzt die Schriftarten aber wieder auf einem neuen System installieren kopiert man den Ordner Fonts einfach mit dem Windows-Explorer in das Windows-Verzeichnis. Ab jetzt kann man sich dann schonmal für die zig Pop-Up-Meldungen bereit machen, die man einzeln weg klicken darf, weil schon vorhandene Schriftarten, die Windows schon mitbringt oder die schon installiert wurden, nicht einfach überschrieben werden. Ein kopieren per Kommandozeile fällt jedoch auch flach, da die Schriftarten dann nur kopiert, aber nicht installiert werden. Das funktioniert nur über den Windows-Explorer oder Programme von Drittanbietern. Diese Programme sind zwar zum Verwalten usw. gut geeignet, will man aber nur die Fonts installieren, total überflüssig.

Im faq-o-matic-Blog habe ich jetzt ein VB-Script gefunden, dass Schriftarten aus einem Ordner namens “FontsToInstall” per Windows-Explorer kopiert und installiert und sich nebenbei auch noch um die Fehlermeldungen kümmert. Somit bleibt der sowieso schon genug gestresse User vom stupiden dauer-klicken verschont und kann sich wichtigerem widmen. Aufgerufen wird das Script per Kommandozeile, z.B. per C:\installfont.vbs.

Hier ist das Script nochmal als gepacktes ZIP-Archiv zum herunterladen.

Zeilenumbruch im pre-Tag

Mittwoch, 04. Juni 2008

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.

Alternative zum border-image mit CSS

Dienstag, 03. Juni 2008

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.

(more…)

Überblick bei CSS-Dateien behalten

Dienstag, 27. Mai 2008

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.

Kostenlose Bücher bei Terrashop und buecherbillig

Donnerstag, 17. April 2008

Buch mit BrilleFür alle Schnäppchenjäger da draußen, die gerne auch mal ein Buch in die Hand nehmen. Die Online-Buchhändler Terrashop und buecherbillig.de bieten über ihre Newsletter bzw. Kooperations-Plattformen immer mal wieder kostenlose Bücher an.

Diese Buchhändler bieten in der Regel ältere Exemplare an, bei denen der Ladenpreis aufgehoben wurde. Der Begriff “alt” ist hierbei jedoch relativ zu sehen. Gerade in der IT-Branche kann ein Buch recht schnell schon durch ein neues ersetzt werden.

Bei Terrashop kommt man wie gesagt entweder über ein kostenloses Newsletter-Abo an kostenlose Bücher oder man meldet sich (zudem) noch beim Newsletter von Tutorials.de an. Hier bekommt man auch noch andere Bücher geschenkt, die normalerweise irgendetwas mit IT zu tun haben. Aktuell bekommt man über den Terrashop-Newsletter das Buch “Noch mehr Profi-Rätsel von Dr. Ecco - Mathematik & Informatik” und gleichzeitig per Tutorials.de-Newsletter gibt es “AJAX mit ASP.NET und Atlas” vom Addison-Wesley-Verlag. Einzig die Versandkosten in Höhe von 3,95€ muss man zahlen.

Bei buecherbillig.de bekommt man kostenlose Bücher zum Thema (Web-)Programmierung, wenn man sich bei phpforum.de anmeldet. Über den phpforum-Newsletter wird man informiert, wenn es wieder etwas zum abgreifen gibt. Aktuell bekommt man “Exploring PHP Von Insidern lernen“. Das ganze schlägt auch hier wieder nur mit den Versandkosten von 3,95€ zu buche.

Ich war bisher immer sehr zufrieden mit den Büchern. Sie sind neu und oft sogar noch eingeschweißt. Falsch machen kann man also nichts. Sollte ein Buch jedoch Mängel, wie z.B. Druckfehler, beinhalten, wird dies in der Beschreibung mit angegeben.

WordPress 2.5 Upgrade

Sonntag, 30. März 2008

WordPress LogoNachdem jetzt die neue Version 2.5 von WordPress erschienen ist, hab ich meine Version 2.3.3 mal durch ein Upgrade geschickt. Also erstmal Backup der Datenbanken gemacht und das Daten-Backup von Wordpress aktualisiert. Man will ja schließlich im Notfall nix verlieren. Danach die aktuelleren Dateien einfach hochgeladen und überschrieben. Nach einem Aufruf von www.deinblog.de/wp-admin/upgrade.php sollte das Blog dann auch schon wieder laufen.

Sollte, nur leider gab’s da ein Problem in der Datei wp-blog-header.php. Hier hat sich in Zeile 11 ein kleiner Fehler eingeschlichen. Nach dem Befehl “wp_die” standen bei mir zwei ((. Eines sollte allerdings genügen. Sprich, der Befehl sollte heißen “wp_die(”blabla…”.

Geändert hat sich das komplette Design des Backends. Meiner Meinung nach ist es um einiges übersichtlicher geworden und sieht auch irgendwie eleganter aus.

Bei Golem.de gibt es natürlich einen, leider nicht all zu langen, Artikel darüber. Hier werden auch einige Änderungen angesprochen.

Jimdo und der Homepage-RSS-Feed

Donnerstag, 27. März 2008

Jimdo LogoLaut Golem.de bietet Jimdo, ein Betreiber von Homepage-Baukästen, ab sofort eine Möglichkeit an, um andere Jimdo-Nutzer bei Änderungen an der eigenen Homepage per RSS-Feed zu benachrichtigen. Leider klappt das aber eben nur unter Jimdo-”Freunden”. Interessant wäre diese Funktion, wenn man sie generell in seine Website einbauen und per RSS-Feed generell anderen Freundes-Homepages zur Verfügung stellen könnte. Somit würde man immer eine Nachricht erhalten, wenn sich etwas an einer Website geändert hat. Schön wäre allerdings die Möglichkeit gewisse Änderungen aus dem Nachrichten-System heraus zu nehmen. Schließlich benötigt ja niemand eine Info, wenn man mal Rechtschreibfehler korrigiert.

Generell aber eine sehr schöne Sache. Sollte man im Auge behalten. Oder gibt’s sowas schon für die klassischen CMS wie Joomla oder Typo3? Oder gar als Script für die “normale” Homepage?

Mit PHP Ordner über Netzwerklaufwerke auslesen

Mittwoch, 09. Januar 2008

Heute geht es darum, wie man erfolgreich mit einem PHP-Skript Ordner, Unterordner und Dateien über ein Netzwerklaufwerk ausliest und auflistet.

Ein solches Skript könnte z.B. so aussehen:
(more…)