blog.exotec

TYPO3 . XHTML/CSS . JavaScript/AJAX . iPhone/iOS

Archive for September, 2004

CSS Hack für IE

Montag, September 20th, 2004

John Hicks hat scheinbar eine neue Variante gefunden, um Styles nur für den IE sichtbar zu machen. Getestet habe ich es noch nicht selber, aber den Kommentaren in seinem Blog nach zu schließen geht es wohl problemlos.

HTML Layouts downloaden …

Freitag, September 17th, 2004

http://www.gordonmac.com/

CSS Redesign Contest Moblog UK

Mittwoch, September 15th, 2004

Win a Motorola V600!

40px of Frustration

Dienstag, September 14th, 2004

Ich weiß nicht wie es euch geht, aber wenn ich eine ungeordnete Liste als Menü verwenden will, und diese per CSS style, dann möchte ich auch das die UL 0px margin hat, nachdem die Bullets entfernt wurden. Das funktioniert auch im IE und Opera ohne Probleme mit diesem CSS Code:

ul {
list-style-type: none;
margin: 0;
}

Im Mozilla wird das so aber nicht das gleiche Ergebnis geben, wie es im IE und Opera bereits angezeigt wird. Ich habe hinter den Grafiken die jeweiligen HTML-Beispiele hinterlegt, welche ihr mal in den verschiedenen Browsern ansehen müsstet. Oder schaut euch einfach die Grafiken an:

Mozilla will nicht mit gehen

Wie man sieht hat der Mozilla diese margin Anweisung ignoriert. Ich habe keine Ahnung ob und welcher Browser hier das Richtige anzeigt. Aber für mich ist in diesem Fall die Anzeige des Mozilla unaktzeptabel, also gebe ich der UL, unter Anwendung der !important-Rule, ein negativ margin von 40px. Damit sieht das Ganze nun so aus:

ul {
list-style-type: none;
margin: 0 0 0 -40px !important;
margin: 0;
}

Opera macht Zicken

Wie man sieht hat der Opera die !important-Rule auch interpretiert, und die UL wird aus den sichtbaren Bereich gerückt. Fügt man nun noch der CSS Datei die folgenden Zeilen hinzu, so wird auch der Opera es so wie ich es wünsche anzeigen:


@media screen and (min-width: 550px){
ul {
margin: 0 !important;
}
}

Alles ist gut

CSS Code der in dieser Klammerung steht, wird nur vom Opera interpretiert. Dazu habe ich bereits einen Artikel verfasst gehabt, der hier nachzulesen ist. Beim Validieren der CSS werden nun zwar Warnungen ausgegeben, wegen dem Opera Hack, aber es ist trotzdem alles noch valider CSS Code.

Diese 40px können bei einem pixelgenauen Layout schon ordentlich nerven, ich habe diese Technik bereits öfter angewendet und bin recht zufrieden damit.

DIV —> Table

Mittwoch, September 8th, 2004

Diesen Codeschnipsel habe ich bei Eric Meyer gefunden:

<style>
div#layout {
display: table;
}
div#layout > div {
display: table-row;
}
div#layout > div > div {
display: table-cell;
}
</style>

<div id=”layout”>
<div>
<div>…table…</div>
<div>…table…</div>
<div>…table…</div>
</div>
<div>
<div>…table_row…</div>
<div>…table_row…</div>
<div>…table_row…</div>
</div>
<div>
<div>…table_cell…</div>
<div>…table_cell…</div>
<div>…table_cell…</div>
</div>
</div>

Das Ganze funktioniert zwar wiedermal nicht im IE, aber das ist man ja langsam gewohnt. Mit dem IE7 Patch von Dean Edwards, bekommt man aber auch den IE dazu es korrekt anzuzeigen.

Ten CSS tricks — corrected and improved by Tantek

Mittwoch, September 8th, 2004

Vor ein paar Tagen kamen auf Evolt.org Ten CSS tricks you may not know zum Vorschein. Tantek hat nun diese aufgegriffen und verbessert in seinem Artikel: Ten CSS tricks — corrected and improved veröffentlicht.

css_styled_imagetext besser nutzen

Dienstag, September 7th, 2004

Wer die Extension bereits getestet hat, wird sich mit Sicherheit genauso geärgert haben wie ich, als er die Tabelle sah welche um ein eingefügtes Bild herum gelegt wurde. Auch einen Alttext kann man nicht einfach angeben, wie man es ja sogar bei Bildern die man im RTE einfügt machen kann. Und im Head der Webseiten wird ein riesiges CSS Konstrukt hinein generiert.

Das muss alles nicht so sein, und geht auch anders! Ich kann hier lediglich den Weg zeigen, den ich gegangen bin um Alttexte aus dem Bildtext entstehen zu lassen, die Tabelle um die Bilder zu entfernen und das Stylesheet im Head los zu werden. Es kann, und wird sicherlich, auch andere Wege zu diesem Ziel geben, die meinetwegen eleganter oder auch inteligenter sind. Dies ist meiner:

Als erstes muss ich noch erwähnen, dass ich ohne die “gov_accessibility” Extension mit Sicherheit nicht so schnell die folgenden Sachen hätte umsetzen können.

Es sind wiedermal nur wenige Zeilen Typoscript notwendig, um die genannten drei Ziele zu erreichen. Um das Stylesheet aus dem Head los zu werden, fügt man seinem Setup Code diese Zeile hinzu:

plugin.tx_cssstyledimgtext._CSS_DEFAULT_STYLE >

Das wars auch schon, ab sofort ist das Stylesheet im Head nicht mehr vorhanden. Statt dessen schreibt man diese Angaben in eine externe CSS Datei, und hat seinen HTML Code etwas bereinigt. Einfach weglassen darf man sie aber auch nicht, denn sie sind nun verantwortlich für die Ausrichtung der Bilder im Text.

Damit der Bildtext in einen Atltext umgewandelt werden kann, muss zuerst der Datei class.tx_cssstyledimgtext_pi1.php in /ext/css_styled_imgtext/pi1/ hinter die Zeile 252 dieser PHP Schnipsel eingefügt werden:

if($conf['useCaptionForAlttext']==1) {
$imgConf[’altText’].=$captionArray[$imgKey];
}

Nun noch diese Zeilen in das Setup:

tt_content.menu.20.stdWrap.wrap = |
tt_content.text.20.wrap = |

tt_content.textpic.20 {
useCaptionForAlttext = 1
stdWrap.wrap = |
text.20.wrap = |
}

Und dieses in die Constants:

styles.content.imgtext.captionSplit = 1

Damit wird nun der Bildtext als Alttext des Bildes angegeben. Insgesamt ein für mich sehr befriedigendes Ergebnis. Aber wie gesagt, ohne die Entwickler der gov_accessibility Extension wäre ich nicht so schnell, oder aber auch gar nicht zu dieser Lösung gekommen:
Jan Wischnat – jan(at)wischnat.de
Ben Vantende – ben(at)netcreators.nl
Ingmar Schlecht - ingmars(at)web.de
Sacha Vorbeck – info(at)unlimited-vision.net
René Fritz – info(at)colorcube.de
Carlos Chiari – ccho(at)dimension-e.net
Hiro Protagonist - hiro-(at)gmx.de
Volker Biberger - info(at)sitekick.de

TYPO3 Accesskeys Tutorial

Dienstag, September 7th, 2004

In den TYPO3 Tutorials habe ich heute einen Artikel hinterlegt, in welchem ich zeige wie man in TYPO3 Accesskeys umsetzen kann.


92,135 Spam-Kommentare
blockiert von
Akismet