Seitenaubau unterschiedlich zwischen Browsern

[Smartiie]

Hallo Markus,

eine frohe Ostern Dir ebenfalls.

Eine schöne Seite hast Du da. Nicht gerade einfach, das Layout richtig aufzubauen.

Folgendes ist mir zu Deinen Fragen aufgefallen und kann Dir evtl. Weiterhelfen:

Die Krönung ist aber, wie nicht anders zu erwarten, der Internet Explorer. Er stellt nicht nur das Bild doppelt dar sondern er zerrt die Navigation total lang obwohl das garnicht vorgsehen ist.

Du hast zwar Tabellenbreiten angegeben, aber nicht alle Browser halten sich einheitlich daran. Und besonders schwierig wird es immer dann, wenn man sich zum Ziel setzt, ein solches Tabellen-Layout sich dynamisch dem Fenster anpassen zu lassen. Wird das Browser-Fenster zu schmal, werden auch die Tabellenspalten schmaler, die Elemtente beginngen zu springen. Wird das Fenster zu breit, werden auch die Tabellenspalten zu breit und es entstehen Abstände.

Zu enge Spalten und springende Elemente

Das die Spalten zu eng werden kannst Du bei einem Tabellenlayout für alle Browser am einfachsten dadurch verhindern, dass Du ein Element in die Spalte legst, das eine absolute Breite hat. Dadurch erzwingst Du gleichzeitig eine Mindestbreite, die auch dann bestehen bleibt, wenn das Fenster zu klein wird.

Man kann dazu ein transparentes GIF von 1x1px nehmen, das man z.B. in die Tabellenzelle einfügt und es dann mit den Breitenangaben auf die gewünschte Breite bringen.

Damit gibst Du eine Minestbreite vor, die Dein Layout benötigt, damit es nicht zerstört wird.

Das kannst Du tun:

Linke Spalte

Bei Dir würde ich eine solche Mindestbreite in der linken Spalte dadurch erzwingen, indem ich Euer Vereins-Wappen links und rechts noch transparente Flächen anfüge, so dass die Grafik über die gesamte Breite der linken Spalte geht und diese nicht kleiner wird.

Mittlere Spalte

In der mittleren Spalte würde ich oben das 1x1px einbauen und die Mindestbreite so definieren, dass mindestens der Schriftzug bei einer akzeptablen Schriftgröße Platz hat. Gleichzeitig muss die Zelle mit der schmalen Zelle links verbunden werden, um das Springen der Runden Ecken zu verhindern.

Rechte Spalte

In der rechten Spalte hast Du das Bild als Hintergrund-Grafik mit Kachelung definiert. Wird die Spalte zu breit, Wiederholt es sich. Wird die Spalte zu eng, wird es abgeschnitte.

Lege das Bild normal in die Zelle, richte es rechtsbündig aus und gib der Tabellenzelle einen dunkelblauen Hintergrund. Durch das Bild bekommst Du die notwendige Mindestbreite, bei zu breiten Spalten bleibt das Bild rechts am Rand stehen und der Blaue Hintergrund dehnt sich aus.

Hinweis

Die Mindestbreite der mittleren und rechten Spalte sollten durch die Grafiken zusammen so breit sein, dass das der Login und die Bezeichnung aktuelle Seite ebenfalls nicht springen.

Hoffe, das hilft Dir weiter. Viel ist ja eigentlich nicht mehr zu tun.

Viele Grüße
Wulf

PS: Eine wirklich schöne Seite und ein gut ausgetüfteltes Tabellen-Layout. Wirklich Klasse. Und eine ganze Menge Arbeit.
;-)