Fusionality

Für ColdFusion gibt es etliche Tutorials in denen das Umschreiben von URLs beschrieben wird. Jedoch immer mittels CFML. Dabei kann der Apache das viel einfacher:

Options -Multiviews

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteCond %{REQUEST_FILENAME} !-l

RewriteRule ^([a-zA-Z0-9-_]+)   index.cfm?site=$1   [QSA]

What the hell?

Der Reihe nach:

Options -Multiviews
Wenn Multiviews aktiviert ist und ein Request auf index.html erfolgt, index.html aber nicht existiert, wird eine Suche in Gang gesetzt. Findet der Apache z.B. eine index.php oder index.css, wird diese ausgeliefert. Keine gute Idee und für unser Vorhaben hinderlich.

RewriteEngine on
Die RewriteEngine, die unsere URLs umschreibt, muss erst mal aktiviert werden.

RewriteCond
%{REQUEST_FILENAME} !-f
Der Pfad in der URL verweist nicht auf eine existierende Datei

%{REQUEST_FILENAME} !-d
Der Pfad in der URL verweist nicht auf einen existierenden Ordner

%{REQUEST_FILENAME} !-l
Der Pfad in der URL verweist nicht auf einen symbolischen Link

RewriteRule
RewriteRule ^([a-zA-Z0-9-_]+) index.cfm?site=$1 [QSA]
Alle Buchstaben, Zahlen, sowie die Zeichen – und _ werden als Variable an index.cfm?site= angehängt.

Das [QSA] bewirkt, das weitere Parameter mit Übergeben werden können.

Aus www.example.com/fotos/ wird intern www.example.com/index.cfm?site=fotos.

Weitere Parameter können per URL übergeben werden. Aus www.example.com/fotos/?jahr=2009 wird dann www.example.com/index.cfm?site=fotos&jahr=2009

Heute wäre mir fast (aber eben nur fast) das sprichwörtliche Latein ausgegangen.

Die Aufgabe:
Eine Liste mit Teasertext und einem "mehr…"-Link am Ende. Die gesamte Liste soll bei Mouseover gehighlited werden, allerdings soll nur der "mehr…"-Button aktiv sein. So soll es dann aussehen:

Kinderspiel, dachte ich. Ich muss ja, laut Auftraggeber, keine Rücksicht auf den IE 6 nehmen. Also kann ich ja gemütlich mit li:hover arbeiten, das kann der IE ja seit Version 7. Hier also das XHTML dazu:

<ul>
<li>Lorem ipsum dolor<a href="#">» mehr...</a></li>
<li>Lorem ipsum dolor<a href="#">» mehr...</a></li>
<li>Lorem ipsum dolor<a href="#">» mehr...</a></li>
<li>Lorem ipsum dolor<a href="#">» mehr...</a></li>
</ul>

Dazu passend das CSS:

#content ul{
list-style-image:url(Bilder/list-point.jpg);
margin-left:16px;
}

#content li{
margin-bottom:15px;
margin-top:15px;
line-height:20px;
padding:0 5px;
height:20px;
}

#content li:hover{
background:#eb7305;
color:#fff;
}

#content li a{
float:right;
text-decoration:none;
color:#fff;
}

Und jetzt wird es komplizierter:
Im Firefox 3.5 und IE 8 wird es, wie auf dem Screenshot, korrekt dargestellt. Der Firefox 3.0 hingegen packt das "mehr…" in eine neue Zeile, unterhalb des Listeneintrages. Der IE 7 verhält sich, ausnahmsweise, wie der Firefox 3.0.

Also dem IE 7 folgendes "untergejubelt":

* + html #content li a{
margin-top:-20px;
}

Aber was mache ich jetzt mit dem Firefox 3.0? Google kennt zwar einen CSS Hack für den Firefox 3.0, aber der ist a) kein valides CSS und b) betrifft auch den Firefox 3.5. Ich möchte ihn aber trotzdem erwähnen:

html>/**/body #content li a, x:-moz-any-link, x:default {
float:right;
text-decoration:none;
color:#fff;
margin-top:-20px;
}

Es muss aber auch mit validem CSS gehen. Die Lösung brachte der CSS Selector Test auf CSS3 Info:

#content li a{
float:right;
text-decoration:none;
color:#fff;
margin-top:-20px;
}

#content li a:only-of-type {
margin-top:0px;
}

Also den margin-top "normal" zugewiesen und über :only-of-type wieder zurück deklariert.Den CSS3 Pseudoselektor :only-of-type versteht der Firefox 3.0 nämlich nicht, der 3.5er schon. Doch die Freude war von kurzer Dauer, denn der IE 8 kennt den auch nicht.

Zurück zu CSS3 Info und checken, was der IE8 nicht kann, der Firefox 3.0 aber und hier greifen könnte. :only-child klingt doch gut. Alles zusammen gestückelt mit Kommentaren:

#content ul{
list-style-image:url(Bilder/list-point.jpg);
margin-left:16px;
}

#content li{
margin-bottom:15px;
margin-top:15px;
line-height:20px;
padding:0 5px;
height:20px;
}

#content li:hover{
background:#eb7305;
color:#fff;
}

#content li a{
float:right;
text-decoration:none;
color:#fff; //Hier können wir den margin nicht deklarieren, da sonst auch der IE8 davon betroffen wäre
}

#content li a:only-child{
margin-top:-20px; // Den Selektor kennt der IE 8 nicht, der FF 3.0 schon
}
#content li a:only-of-type {
margin-top:0px; //Und wieder zurück. Diesen kennt der FF 3.5, der IE kennt ihn weder in Version 7 noch 8
}

* + html #content li a
margin-top:-20px; // Der gute alte StarHack für IE7
}

Und genau sowas macht den Unterschied zu den ganzen "Ich-klick-mir-eine-Homepage-zusammen"-Tools vom Nachbarsjunge ;)

Damit eine Website mit JavaScript als XHTML validiert muss das JavaScript einfach nur als CDATA deklariert werden:

<script type="text/javascript">
/* <![CDATA[ */
alert('So validiert das Dokument');
/* ]]> */
</script>

Um die Standardspalten Link, Normal, Rechts und Rand individuell zu benennen, oder weitere Spalten anzulegen, muss man die Datei typo3conf/extTables.php editieren:

Und in der Datei typo3conf/localconf.php folgende Zeile einfügen:

Jeder Webdesigner/Webentwickler kennt die Tücken und Macken des Internet Explorers, speziell der Version 6. Das CSS muss also entsprechend angepasst werden. Hierfür werden leider oft obskure CSS Anweisungen verwendet:

Der Internet Explorer führt diese Anweisung aus und setzt die Breite auf 150px, allerdings sind solche Konstrukte natürlich alles andere als valides CSS.
Doch es geht auch valide: