zur Startseite vom TP

1Einleitung

Hier ein Beispiel worum es geht. Die Test-PNG findet Ihr unter Arbeitsmaterial.

Nun ja, auch einen Rahmen für eine Tabelle definieren ist einfach. Komplizierter sind da schon flexible Rahmen mit selbst erstellten Bildern. Bilder sind nun mal alles andere als flexibel. Sie haben feste Größen und das wars. Wie aber ohne viel Aufwand Bilderrahmen flexibel machen und den Inhalt trotzdem zentrieren? Von aufwendigen Framesets und dergleichen abgesehen, hier eine andere Lösung als Beispiel zum mitmachen!

2Vorgedanke

Eine Website hat eine bestimmte Inhaltsmenge. Das Browserfenster, welches diesen anzeigt, eine variable Größe die man beliebig anpassen kann. Alles muss irgendwo darin Platz haben. Verkleinert man das Browserfenster wirds irgendwann eng und man bekommt die allgeliebten Scrollleisten zu Gesicht. Nun mag die wohl niemand und man versucht die auf die kleinstmögliche Anzeige zu unterdrücken, aber irgendwann ist fine und man muss doch scrollen. Wenn man das dem User mit diversen Möglichkeiten verbietet bzw. erschwert, könnte er das als Beleidigung auffassen und für die Ewigkeit verschwinden. Einfach Sinn und Unsinn abwägen!

3Vorbereitung

Zuerst wählt man die entsprechende Mindestauflösung für seine Website. Also bis hierhin und nicht weiter, wer eine niedrigere Auflösung hat muss scrollen. Nach oben natürlich offen. Wir gehen von einer 800x600 Auflösung aus. 800x600 bedeutet nicht, das die Leinwand so groß sein kann, das ist das aktive Browserfenster incl. Adressleiste etc. Die eigentliche Anzeige ist kleiner und kann nicht so genau bestimmt werden, da man nicht weiß was der User so alles für Symbolleisten aktiv hat. Mit Standard, Adress und Statusleiste bewegt sich das so um die 775x445.

4Schritt 1

Erstellen Sie ein neues Dokument in dieser Größe. Dann zeichnen Sie einen Rahmen und Ecken um die gesamte Seite. Den Rahmen jeweils zum Rand mit gleichem Abstand, etwa 10 px, ist nicht schwer. Nutzen Sie Hilfslinien zum genauen einteilen. Wenn Sie fertig sind, sollte sich an den Rändern jeweils eine Hilfslinien befinden und in der Mitte die große weiße Fläche. Diese Fläche ist später der Inhalt, klar:)

5Schritt 2

Die Hilfslinien helfen mächtig. Wie Sie sehen, kreuzen sich diese an den Ecken. Wenn Sie näher hinsehen, bemerken Sie eine Struktur des ganzen. Diese Struktur ist später die gewünschte Tabelle die wir brauchen. Jeweils zwischen den Ecken befindet sich der später flexible Bereich der Website. Also nach unten und rechts beliebig. Der Inhalt in der Mitte wird dann bis auf die festgelegte Mindestgröße ohne Scrolleisten zentriert.

6Schritt 3

Nun vergrößern Sie bei Bedarf die Leinwandansicht etwas und zeichnen in den 4 Ecken jeweils ein Segment genau an den Hilfslinien entlang.

7Schritt 4

Sie haben jetzt die 4 Ecken segmentiert. Nun zeichnen Sie dazwischen (im Bild blau) die restlichen Segmente. Benennen Sie die einzelnen Segmente auch ruhig über das Bedienfeld Objekt mit eigenem Namen z.B. linie_oben usw. So heißen dann ihre exportierten Bilder und man findet auch eins wenn mans braucht, ohne lange zu suchen. Das wars zum Thema Rahmen. Was Sie nun dazwischen erstellen ist Ihr Inhalt (Navigation, Bilder usw.). Machen Sie ruhig wild ein paar farbige Kästchen rein.

8Schritt 5

Irgendwann gibts Button, Text, Bilder und alles ist komplett ordentlich segmentiert.

9Schritt 6

Dann gehts mit Datei/Exportieren zum Export. Man vergibt einen Namen, legt Bilder günstigerweise in einem extra Ordner innerhalb der Site ab und klick Nicht! gleich auf speichern, sondern auf Optionen.

10Schritt 7

Folgende Einstellung im Register Tabelle bitte übernehmen. Das ist wichtig, da wir eine verschachtelte Struktur brauchen um den Inhalt unabhängig vom Rand ohne viel Aufwand zu zentrieren. Andernfalls würde es ein heiloses Durcheinander geben und ne menge Handarbeit anstehen.

Dreamweaver (andere Editoren vom Prinzip dasselbe)

11Schritt 8

Mit Dreamweaver nach dem Export die HTML Datei öffnen und dort am besten in die geteilte Codeansicht gehen. Dann den ersten Tabellentag unter dem Body im Codebereich auswählen. Im unteren Teil wird die äußere Tabelle markiert.

12Schritt 9

Nun für diese bei B/H die Prozente eintragen. Danach hat sich die Tabelle dem Browserfenster angepasst und der Inhalt rutscht unverändert vertikal zentriert. Alles sieht noch bissel komisch aus, aber nicht mehr lange.

13Schritt 10

Dieser Inhalt muss jetzt noch horizontal zentriert ausgerichtet werden. Das kann man auch gleich über die Codeansicht machen, indem man dort solange nach unten scrollt, bis die zweite Table innerhalb eines <td> tags auftaucht und wieder über den Eigenschafteninspektor zentrieren. Oder man setzt in der Standardansicht einfach den Curser hinter die Tabelle und wählt wie im Bild bei Horiz: Zentrieren. Für unseren Fall ist es egal ob nun direkt die Table oder die Zelle innerhalb der sie sich befindet zentriert eingestellt wird. Nun sollte ohne das es was verhauen hat der Inhalt in der Mitte sitzen.

14Schritt 11

Was verdorben aussieht ist der Rand, aber wie anfangs erwähnt sind Bilder nunmal fest in der Größe und genau die hat sich mit dem zentrieren jedoch geändert. Kein Problem! Wir bestimmen einfach das jeweils in den Rändern sitzende Linien-Bild nochmal als Hintergrundbild in eben dieser Zelle. Die Ecken bleiben wie sie sind.

15Schritt 12

Die erste Browservorschau mit F12 zeigt das Dilema, der Rahmen passt immer noch nicht genau, aber woran liegt das? Ganz einfach, an der Inhaltszelle. Für diese Zelle existiert keine Größe. Wir haben nur die Tabelle insgesamt auf 100% gesetzt. Das mag sich jetzt blöd anhören, aber die Zellen passen sich frei den Gegebenheiten an, wenn wir das nicht anders bestimmen! Also stimmen Hintergrundbild mit inne sitzendem Bild je nach Fenstergröße nicht mehr überein.

16Schritt 13

Nun gibt es verschiedene Möglichkeiten das anzupassen und soviele Möglichkeiten wie es gibt, soviele Browser gibts die da querschlagen. Der IE würde sich begnügen mit dem angeben der Zellbreiten und Höhen der Eckzellen. Der Browser ist ja auch intelligent und errechnet daraus die Inhaltszelle. Das funzt aber nicht mit z.B. N 4.7.5 oder Opera. Diese beiden Experten brauchen die Größenangaben der Inhaltszelle und zwar in der Breite und Höhe. Die begnügen sich nicht mit den korrekten Zellangaben in denen Bilder sitzen.

17Schritt 14

Also, kurz und knapp, mit nem kleinen Schönheitsfehler (Scrollleiste) für die beiden. Die Zelle in der die Inhaltstabelle sitzt auf Breite 100% und Höhe 100% setzen und alles passt. Damit wird der Browser gezwungen die anderen Zellen soweit zusammenzudrücken, bis eben ein inneliegendes Bild das völlige zusammendrücken verhindert, auf deutsch gesagt.

Andere Möglichkeiten das Randproblem Schritt 14 zu lösen, wäre die Bilder in der Zelle oben (top) auszurichten, genaue Zellgrößenangaben und evtl. brauchen die Ecken in dem Fall ein zweites Hintergrundbild welches man sich erst basteln müsste. Einfach mal testen was so die Aktionen ergeben. Vielleicht findet jemand eine ganz elegante Lösung. Mir gings hiermit nur darum, zu zeigen wie in FW so eine center Struktur mittels Segmente aufgebaut werden kann.