Typo3: Body id per TypoScript definieren für unterschiedliche CSS Definitionen

Dienstag, 3. Juni 2008

CSS Variationen für unterschiedliche Seiten

Um auf unterschiedlichen Seiten einer Internetpräsenz beispielsweise verschiedene Hintergrundbilder im Header per CSS anzeigen zu können, kann man ganz einfach per TypoScript jeder einzelnen Seite eine ID geben und dann die jeweilige Seite über diese ID ansprechen:

page = PAGE
page.bodyTag >
page.bodyTagCObject = TEXT
page.bodyTagCObject.field = uid
page.bodyTagCObject.wrap = <body id="seite-|">
...

Erst wird das einleitende body-tag gelöscht und dann neu definiert. Natürlich könnte man statt der id auch eine Klasse (< body class=”seite-|”>) angeben, aber da die uid ohnehin eindeutig ist und nur einmal pro Seite vorkommt gibt es hier keine Probleme. Das zugehörige CSS könnte dann so aussehen:

#seite-7 #header{ background: url(../img/tollesBild.jpg) 0 0 no-repeat}

Popularity: 21% [?]

Inline CSS überschreiben

Montag, 26. Mai 2008

Wie man Inline CSS Definitionen überschreiben kann

Ehrlich gesagt hätte ich nicht gedacht, dass das überhaupt möglich ist, aber mit ein paar Zeilen CSS kann man inline CSS Definitionen überschreiben. Das ganze funktioniert so:

span[style]{
color: inherit !important;
font-size: inherit !important;
}

Besonders nützlich ist das zum Beispiel wenn man es mit älteren CMS Systemen zu tun hat die gerne mal Schrift Definitionen in <Span> Tags nach dem Schema <span style=”color:#cc0000;”><h2>…</h2></span> verpacken.

Leider funktioniert das Überschreiben der inline Css Angaben nicht im IE6 aber dafür in den meisten neueren Browsern. Eine genauere Erklärung des Ganzen findet sich beim (Er)finder auf www.standardsforlife.com

Popularity: 15% [?]

DHTML JavaScript Bildergalerien

Montag, 21. April 2008

Hier sind zwei der meiner Meinung nach besten DHTML/JavaScript Bildergalerien.

noobSlide – Mootools Slide Show Image Galleries

noobSlide Image Gallerie

noobSlide ist eine auf Mootools basierende Slideshow oder Bildergalerie. Auf der Demo-Seite findet man zur Zeit 8 Beispiele welche die Möglichkeiten dieser Bildergalerie / Slideshow veranschaulichen. Besonders gefallen haben mir Beispiel 6 und 7. In Demo 4 und 8 wird gezeigt, dass man das Skript auch problemlos mit Text-Containern einsetzen kann.

Eine etwas bekanntere Bildergalerie die ebenfalls auf Mootools basiert, aber statt des Slide-Effekts Fading verwendet ist

JonDesign’s SmoothGallery

Smoothgallerie Image Gallerie

Auf der Demoseite werden auch hier zahlreiche Beispiele wie “timed gallerie etc.” gezeigt und neuerdings gibt es auch ein Beispiel mit “Sliding Transition”.

Außerdem gibt es von Georg Ringer eine schöne Typo3 Extension, die auf Smoothgallerie basiert:
http://www.rggooglemap.com/dev/rgsmoothgallery/

Popularity: 24% [?]

Internet Explorer zeigt Hintergrund nicht an

Dienstag, 1. April 2008

Ich hatte schon häufiger das Problem, dass im Internet Explorer bei CSS Definition nach folgendem Schema kein Hintergrund angezeigt wurde:

background:url(../img/footer-bg.png)center top no-repeat;

Das Problem lag aber nicht wie zunächst angenommen darin, dass der Internet Explorer beim background kein Shorthand CSS versteht. Diese Vermutung lag nahe, weil folgende Definition funktionierte:

background-image: url(../img/footer-bg.png);
background-position: center top;
background-repeat: no-repeat;

Des Rätsels Lösung war viel mehr, dass der Interne Explorer mit den fehlenden Leerzeichen im Shorthand CSS nicht zurecht kam. So funktioniert es nämlich:

background: url(../img/footer-bg.png) center top no-repeat;

Popularity: 23% [?]

Seiten: Zurück 1 2 3 4 5 6 7 8 9 10 ...12 13 14 Weiter

blogCloud bloggerei.de supported by www.rankingcloud.de Gelistet im Blog Verzeichnis