Monat: März 2010

CSS !important – So deklarierst du Befehle als wichtig

Wenn ihr vor dem Problem steht, dass eure CSS-Befehle nicht mehr greifen. Zum Beispiel wenn ihr ID-Elemente mit Klassen überschreiben möchtet, dann versucht es mal hiermit.

Diesmal gibt es keine Scripte zum Einbinden oder generell großen Erklärungsbedarf. Es geht um eine einfache Regel für CSS (Cascading-Style-Sheets): !important. Ihr habt vorgefertigte Web-Software wie eCommerce Shops oder einfach Content-Management- und Blog-Systeme? Darin befindet sich schon ein Template, welches ihr noch etwas tunen wollt?

Dann mal los! Die Hierarchie von CSS:

1. Element-Style
<div style=“…“>…

2. ID-Selektoren
<div id=“beispiel_id“>…

3. Klassen
<div class=“beispiel_klasse“>…

Der Text des folgenden Absatzes (<p>) würde laut Hierachie also nun 26 Pixel groß sein, da das ID-Attribut klaren Vorrang gegenüber dem Class-Attribut hat.

<p id="gross" class="klein">
	Testtext
</p>
#gross {
    font-size:26px;
}
     
.klein {
    font-size:10px;
}

Weiterlesen

Schneller PNG Fix für den IE6

Dass der IE6 keine PNG-Dateien mit Alpha-Transparenz unterstützt ist uns allen bewusst. Dafür gibt es jedoch ein paar mehr oder weniger gute Fixes.

Zuvor nutzten wir selber ein Fix bei dem eine transparente GIF-Datei hinterlegt werden muss. Dadurch wurden die transparenten PNGs zwar im IE6 auch transparent angezeigt, jedoch mit verspätung. Außerdem ist diese Lösung wahrscheinlich nicht die optimale für den IE6, da dieser sehr langsam wurde.

Jetzt gibt es eine sehr gute Alternative.

Der neue Fix für den IE6 und seinen PNG-Problemen benötigt weder ein transparentes GIF noch irgendwelche angaben von unvaliden Funktionen (behavior) in den CSS-Dateien.

Das Script ist zunächst hier zu finden:
DD_belatedPNG_0.0.8a-min.js von Drew Diller

Ist die Datei heruntergeladen, wird diese in unser Projekt kopiert und wie folgt in unser Dokument eingebunden.

<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
	DD_belatedPNG.fix('');
</script>
<![endif]-->

Weiterlesen

Browseroptimierung per CSS leicht gemacht

Ihr kennt das auch? 5 verschiedene CSS-Dateien für alle möglichen Browser? Am besten noch unterteilt zwischen Betriebssystemen? Wie auch immer. Das Grauen und euer Leid haben ein Ende. Wir zeigen euch, wie ihr in einer CSS-Datei für alle möglichen Browser und Systeme optimieren könnt. Bei uns ist dieses Script selbst seit einiger Zeit im Einsatz. Mit diesem JavaScript Einzeiler ist es euch möglich das Betriebssystem sowie die unterschiedlichen Browser direkt per CSS-Klasse anzusprechen und entsprechende CSS Befehle und Anweisungen nur für dieses Element zu hinterlegen.

css_browser_selector.js von Rafael Lima

Die Einbindung in unseren Head-Bereich erfolgt wie gewohnt:

<script type="text/javascript" src="js/css_browser_selector.js"></script>

Ihr müsst natürlich gegenfalls den Pfad zur JavaScript Datei nochmals überprüfen und anpassen – aber wie ich euch kenne, ist euch das ja klar.

Weiterlesen

TYPO3 Ext: sk_codebox in validem XHTML 1.1

Die TYPO3 Extension sk_codebox Version 2.0.1 (wie hier im Blog für Code-Schnipsel genutzt) ist standardmäßig leider nicht XHTML 1.1 valide sobald man die Zeilennummern der Extension einblendet.

Für Webdesigner, welche XHTML 1.1 validen Code erhalten möchten gibt es nur zwei Möglichkeiten: Entweder wird das Problem mit der Extension und dem Validierungsfehler behoben oder die Extension muss weichen.

Da wir diese Extension soweit ganz gut finden, haben wir uns natürlich mit der ersten Möglichkeit – das Problem wird behoben – beschäftigt. Folgende Änderungen müsst ihr in der geshi.php durchführen (Ordner: typo3conf/ext/sk_codebox/) damit ihr validen Code erhaltet.

Weiterlesen

Bugfreie Effekt-Navigation mit script.aculo.us

Hier zeigen wir euch, wie ihr ein schönes, bugfreies Effekt-Menü mit Hilfe von script.aculo.us zaubern könnt.

Der Nachteil solcher effektvollen Navigationen ist, dass sich diese – ohne spezielle Sicherheitschecks – von selber „kaputt-effekten“. In unserem Script sind einige solcher Sicherheitschecks für ein (fast) reibungsloses Effekt-Menü – wie oben zu sehen.

Das hier zur Verfügung gestellte Script lässt ein Menü via script.aculo.us nach unten und oben blenden. Die „Unternavigation“ steht dabei unter dem eigentlichen Menüpunkt. Falls ihr einen anderen script.aculo.us Effekt wünscht, müsst ihr lediglich die Effekte in diesem Script wechseln und gegenfalls etwas Feintuning betreiben.

Lasst uns beginnen. An sich ist es sehr einfach diese Script in eine Website einzubinden. Zunächst benötigen wir jedoch die Navigation, auf welcher wir den Effekt anwenden möchten.

Weiterlesen

Alternativer Lightbox 2 Bildtitel: Wahlweise ohne MouseOver-Effekt

Wenn ihr das hübsche Bildpopup Lightbox 2 kennt, werdet ihr vielleicht einmal vor dem Problem stehen, dass ihr der Lightbox einen etwas längeren Bildtitel mitgeben möchtet. Bildtitel werden der Lightbox über das Titel-Attribut im Link um das Bild zugewiesen, daher wird bei einem mouseOver über dem Bild dieser (in dem Fall sehr lange) Titel angezeigt.

Heute zeigen wir euch, wie ihr die Lightbox so modifizieren könnt, dass ihr Beispielsweise einen Bildtitel im Lightbox Popup zu sehen bekommen, jedoch keinen beim mouseOver über dem Bild.

Die Modifizierung der Lightbox bezieht sich auf Version 2.04. Diese könnt ihr hier herunterladen.

Weiterlesen