Falls man (wie ich) den IE8 Beta zum Testen installiert hat, dieser den IE7 platt gemacht hat und die Seiten darin echt sch… (schlecht) aussehen, hier gibt es Hilfe – der Meta Tag, der dem IE8 sagt, wie er die Seite zu rendern hat.

Funktioniert sogar. Ich bekomme langsam Kopfschmerzen und schlage vor, einfach nur Screenshots mit Imagemaps auszuliefern.

Das ist auch ein wenig älter, fiel mir letzens ein. Ich hatte mal aus Spaß eine Seite machen wollen, die aussieht wie ein Browser und sich teilweise auch so verhält. Damals war Firefox 1 noch aktuell, also habe ich den nachgebaut. Exakt wie in einer 1024×768 Darstellung. Die Lesezeichen sind das Menü, die Icons sind nur Deko, die Adresszeile könnte ein Rootline-Menü sein und als Highlight – der Loader dreht sich beim Rollover. Ich finds schick und ein wenig nostalgisch (wo Firefox 3 als Beta schon da ist).

Firefox Template

Dieses Experiment ist schon ein wenig älter, trotzdem sehr schön. Jeder kennt Panoramen mit QuickTime oder Flash. Ich wollte eine Möglichkeit finden, das gleiche (wenn auch ein wenig simpler) mit JavaScript umzusetzen.
Beim Laden der Seite wird eine Funktion aufgerufen, die das Div, in dem gescrollt werden soll, ausmisst. Dieses Div wird mit drei Listenern versehen:
- beim Bewegen der Maus über das Div wird eine Variable gesetzt, dass gescrollt werden soll
- beim Bewegen der Maus aus dem Feld wird das Scrolling beendet
- beim Bewegen der Maus wird die Position ermittelt und falls die Variable “scrollActive” gesetzt ist, wird das Hintergrundbild verschoben
Im ersten Beispiel reiht sich der Hintergrund unendlich aneinander und man kann somit unendlich scrollen.
JavaScriptScroll unendlich
Im zweiten Beispiel wird nicht mehr gescrollt, wenn der Hintergrund um einen bestimmten Wert verschoben worden ist, so dass man das Verhalten vom QuickTime-Panorama etwas simulieren kann.
JavaScriptScroll begrenzt

Einen Input-Button zu stylen ist an sich nicht so schwer, die Probleme entstehen dann, wenn man es in mehrern Browsern (Firefox, IE6 und IE7) gleich haben möchte. Außerdem sollten die Buttons skalierbar sein und trotzdem einen schönen Hintergrund haben.
Dazu habe ich erstmal eine Klasse definiert, die für input-Buttons und Links gleichermaßen gelten sollte und darin folgendes definiert:

Die Eigenschaft padding passte aber nicht für Links, daher wird sie ein wenig angepasst. Gleichzeitig wird für Links ein Rand links definiert, was dem Button sein endgültiges Aussehen gibt. Damit wäre man erstmal mit allem fertig, wenn da nicht der IE wäre. Dieser gibt dem Button, sobald man irgendwie die Eigenschaft border setzt, einen Rand, und zwar häßlich und an allen Seiten.
Daher wird der Rand nur für den “unproblematischen” Browser Firefox definiert mit einem Selector, den der IE7 nicht versteht (html>body kann der mittlerweile auch).
Da man dem Input-Button im IE nicht einfach einen Rand geben kann aus dem eben genannten Grund, muss man sich mit einem Span drumrum gehelfen. Dieser Span definiert den Rand links neben dem Feld und löst gleichzeitig das Problem mit dem 3px-floating-bug.
Wenn man diese schicken Buttons in Typo3 benutzen möchte, besteht das Problem, dass die Formulare automatisch generiert werden und man keine Möglichkeit hat, einen Span um den Button einzufügen. Daher habe ich kleines Skript geschrieben, das diesen Span automatisch um einen Mailform-Button packt. So sollten die Buttons in allen Browsern aussehen, und hier ist das Beispiel zum Anschauen.

Ein ganz einfaches (korrekt verschachteltest) Menü:

<ul>
<li><a href="#">Seite eins</a></li>
<li><a href="#">Seite zwei</a>
  <ul>
    <li><a href="#">Seite zwei.eins</a></li>
    <li><a href="#">Seite zwei.zwei</a></li>
  </ul>
</li>
<li><a href="#">Seite drei</a></li>
<li><a href="#">Seite vier</a></li>
</ul>

Die zweite Ebene des Menüs soll rechts neben den jeweils Menüpunkt der ersten Ebene plaziert werden. In diesem Fall ist es ein Textmenü, natürlich kann man das gleiche CSS für Grafiken innerhalb der Listenelemente verwenden. Und hier das CSS und wie man darauf kommt.

Damit man später absolute Positionierung verwenden kann, muss man bei dem Hauptelement die Positionierung auf relative setzen, die Breite von 160px wurde hier einfach so gewählt. Beim untergeordneten Listenelement wird die Positionierung erneut auf relative gesetzt. Dadurch verändert sich erstmal nichts. Die zweite Ebene des Menüs wird nun über position:absolute aus dem Layout herausgelöst und rechts positioniert. Die Angabe absolut bezieht sich auf ein übergeordnetes Element, das relativ positioniert ist (deswegen ist die Angabe von position:relative bei den li-Elementen notwenig).

ul {
  position: relative;
  list-style: none;
  width: 160px;
}
li {
  width: 100px;
  position: relative;
}
ul ul {
  position: absolute;
  top: 0;
  left: 150px;
}

Mit ein paar zusätzlichen Angaben (wie margin:0 und padding: 0) läßt sich ein Menü generieren wie hier: amelinghausen.de