Links mit Bildern durch CSS

Ich stand gerade vor dem Problem, das jeder Link mit einem kleinen Pfeil ausgestattet werden sollte. Im Ursprungszustand soll dieser Pfeil grau sein und beim Hover-Zustand weiß:
Links mit Grafik
Da ich jetzt nicht hinter jeden Link noch ein Bild einfügen wollte musste eine andere Lösung her und zwar wollte ich das ganze mit CSS lösen. Nach ein wenig Frickelei war es dann geschafft:
a:link { color:#7f7f7f; text-decoration:none; background-image: url(../img/arrow-grey.gif); background-repeat: no-repeat; background-position:100% 54%; margin-right:10px; padding-right: 10px; } a:visited { color:#7f7f7f; text-decoration:none; background-image: url(../img/arrow-grey.gif); background-repeat: no-repeat; background-position:100% 54%; margin-right:10px; padding-right: 10px; } a:hover { color:#FFFFFF; text-decoration:none; background-image: url(../img/arrow.gif); background-repeat: no-repeat; background-position:100% 54%; margin-right:10px; padding-right: 10px; }
Hier noch die beiden Grafiken zum nachbauen:
Pfeil weißPfeil grau

Flashfilme besser integrieren

Mir ist gerade aufgefallen, das Flashfilme im IE immer einen häßlichen, weißen, gepunkteten Rahmen haben und zudem auch erst einmal angeklickt werden müssen bevor eine Interaktion im Film möglich ist. Dies ist mir noch nie so bewusst aufgefallen, aber da ich jetzt gerade ein Menu baue, ist Interaktion „ziemlich“ wichtig.
Natürlich gibt es für das Problem bereits eine elegante Lösung: SWF Object
Gelöst wird das ganze via JavaScript. Man muss lediglich ein externes JS einbinden und bindet man den Film folgender Maßen ein:
<div id="flashcontent"> <strong>You need to upgrade your Flash Player</strong> </div> <script type="text/javascript"> var so = new SWFObject("../flash/menu_test.swf", "Menu", "135px", "400px", "6", "#2a2a2a"); so.addParam("quality", "high"); so.addVariable("actualPage", "<?echo $PHP_SELF;?>"); so.write("flashcontent"); </script>

Funktioniert Super! Variablenübergeben klappt und eine Hintergrundfarbe für den Platzhalter kann natürlich auch angegeben werden.

Weißer Hintergrund beim Flashfilm laden

Wenn ein Flashfilm geladen wird hat er immer eine Platzhalter mit weißem Hintergrund bis der Film geladen ist. Dies ist ziemlich unansehnlich, vor allem wenn die Seite an sich einen dunklen Hintergrund hat.
Gelöst bekommt man dies in dem folgende 2 Anweisungen mit einfügt:
param name="movie" value=".." name="BGCOLOR" value="#000000;"> embed src=".." bgcolor="#000000"></embed>

Kimai – Zeiterfassung leicht gemacht

Da es mich auch immer genervt hat meiner Arbeitszeiten irgendwie zu protokollieren, war ich schon lange auf der Suche nach einem Tool dafür. Idealerweise natürlich webbasierend damit es egal ist an welche Maschine man gerade arbeitet. PHPProject und Co waren mir einfach zu mächtig und haben zu dem auch zig Funktionen die einfach überflüssing sind in diesem Fall, da es ja schließlich nur um die eigene Zeiterfassung geht.
Derzeit nutze ich Kimai. Es hat eine nette GUI und ist easy zu bedienen.
Man kann Firmen, Projekte und Tätigkeiten erstellen. Ein überdimensionaler Play-Knopf startet die Zeiterfassung. Diese läuft auch weiter wenn man die Seite schließt und sie läuft auch über mehrere Tage falls man mal vergisst den Stopp-Button zu drücken =). Sollte das passiert sein, kann aber im Anschluss die Arbeitszeiten noch ein wenig pimpen und mit Kommentaren versehen.

Derzeit fehlt mir eigentlich nur eine schöne Statistik. Am besten eine, die man sich selber via Filter schön zusammenhäckseln kann.
Zeige von Projekt oder Firma im Zeitraum von XY an. Vielleicht kommts ja noch, derzeit wird an einer Userverwaltung gebastelt.

Opera 9.2

Seit ein paar Tagen ist die neue Version von Opera frei gegeben. Folgende Neuerungen sind mir aufgefallen:
1. eine Schnellauswahl mit 9 freibelegbaren Seiten wenn man ein neuen Tab öffnet
2. eine abgespeckte Version des Firebugs, welche aber bei weitem nicht an die Funktionalität ran kommt. Man kann zwar durch die „Tags“ browsen allerdings nicht so schnell und bequem wie beim Firebug. Man merkt einfach, das sich dahinter nur ein dickes JavaScript-Konglomarat verbirgt und irgendwie lässt sich das Teil auch nicht in der Sidebar unterbringen sondern ist ein extra Tab. Das heißt wenn man einen Part auf der Seite auswählen will um sich den Quellcode dazu anzusehen, verschwindet dieser Tab erst einmal in der Versenkung. Also da muss noch was getan um dem Firebug das Wasser zu reichen.

The price is right!


Wer auch schon immer die Melodie von der Preis ist heiß als Klingelton haben wollte, wird hier fündig. Klasse gemacht. Sogar mit Stotter-Telefon-Kommentar vom Harry. Da muss ich doch glatt mal wieder meine Autogrammkarte rausholen. So und jetzt guck ich mir Walter an wie er eine 12 MILLIONEN PIXEL (3 MP interpoliert) Kamera an den 600 Käufer diese Stunde verschachert. GO WALTER GO!

Intellisense in Skin-Dateien

Üblicherweise hat man kein Intellisense in den „Microsoft-CSS-Dateien“. Warum Microsoft dies weggelassen hat bleibt wohl allen ein Rätsel aber glücklicherweise lässt sich das ganze beheben:

1. Extras -> Optionen auswählen
2. Im linken Bereich wählt man Text-Editor -> Datei Erweiterungen
3. In folgendem Dialogfenster fügt man die Endung skin in das Extension Feld ein und wählt aus dem DropDownMenü Editor den Eintrag Editor für benutzerdefinierte Steuerelemente.
4. Per Klick auf den Button Übernehmen den Eintrag hinzufügen und das Skin File erneut öffnen