Layout - einstiegsschwierigkeiten..

[Kai]

Hallo,
Ich wollte ne kleine website basteln und mich auch noch etwas weiterbilden.. bisher habe ich immer unmengen von tabellen ineinanderegeschachtelt.. und das soll nun ein ende haben..
ich habe mir also ein tutorial zu css-layouts angesehen und auch hier mal die Befehls bzw. Eigenschaftensätze angesehen.. komme aber bei dem was ich machen will nicht weiter..

ich hab hier mal einen anfang:

http://www.schnappschiss25.de.vu/000/blog0/index2.php

bitte auch quelltext ansehen ;)

Ziel: das Zentrale Stück, was da in 3 Spalten geteilt ist, soll beliebig nach unten vergößert werden können.. also je nach Inhalt (also wie bei einer tabelle eigentlich)..

kann mir jemand sagen was ich machen muss?..
das mittelstück soll minimal 200px hoch sein.. (min.height: 200px;) funktioniert bei mir nicht immer..
und sollen sich die beiden äußeren an die höhe des inneren anpassen..
ansonsten gibts eigentlich erstmal keine weiteren anforderungen..

danke schon einmal..

gruß Kai

[Michael]

Hallo Kai,

diese Arbeit hat schon jemand für Dich gemacht, nämlich Dirk Jesse. Er hat ein css-Framework entwickelt, was all die Problem schon löst, auf die Du in den nächsten Jahren erst stoßen wirst.

Auf http://www.yaml.de findest Du im Zusammenhang mit Anpassungen / Modifications all die Probleme schon beschrieben, von denen Du nun auf eines getroffen bist.

Viele Grüße

Michael

[kungschu]

Hallo Kai.

Ich wollte ne kleine website basteln und mich auch noch etwas weiterbilden.. bisher habe ich immer unmengen von tabellen ineinanderegeschachtelt.. und das soll nun ein ende haben..

Gut; dann solltest du aber nicht mit Frames weitermachen. (http://www.subotnik.net/html/frames.html)

Ziel: das Zentrale Stück, was da in 3 Spalten geteilt ist, soll beliebig nach unten vergößert werden können.. also je nach Inhalt (also wie bei einer tabelle eigentlich)..

kann mir jemand sagen was ich machen muss?..

Wenn du keine Angabe zu height machst, sollte es genau so sein. Anonsten kannst du dir aber auch nochmal das Beispiel für ein dreispaltiges Layout ansehen.

das mittelstück soll minimal 200px hoch sein.. (min.height: 200px;) funktioniert bei mir nicht immer

Was heißt "funktioniert bei mir nicht immer"? Welchen Browser verwendest du?

Ich würde dir empfehlen, auch diesen Ansatz zu vergessen und _wirklich_ mit CSS zu arbeiten, sprich ohne Frames. Quellcode sollte valide sein; validieren kannst du hier:

(X)HTML: http://validator.w3.org/

CSS: http://jigsaw.w3.org/css-validator/#validate-by-input

Gerade wenn du dich "weiterbilden" möchtest, solltest du auf sauberen Code achten; daher empfehle ich dir auch XHTML (möglichst Strict), was als zeitgemäß bezeichnet werden kann.

Du wirst viel weniger Arbeit haben, wenn du den CSS-Code seperat in einer file definierst.

Workarounds für den IE bindest du mittels Conditional Comments ein; der hält sich nämlich oft nicht an Standards.

Wenn du dich mit CSS vertraut machen möchtest, ist die Umsetzung eines solchen dreispaltigen Layouts ein Anfang.

Viele Fragen kannst du dir mit selfhtml.org, den FAQs oder dem Archiv des Forums dann spielend selbst beantworten.

Viel Spaß bei der Weiterbildung!

MfG, Kungschu.

[Gunther]

Hallo,

das mittelstück soll minimal 200px hoch sein.. (min.height: 200px;) funktioniert bei mir nicht immer..

das ist auch kein Wunder, denn die entsprechende CSS-Eigenschaft heisst min-height

Gruß Gunther

[Kai]

Hallo..
sry.. meine frage war vielleicht etwas undeutlich formuliert..
hier nochmal die url:

http://www.schnappschiss25.de.vu/000/blog0/index2.1.php

ich möchte bitte keine tips zu Validierung oder ähnliches.. das ist nur eine Bsp-Datei um das Problem möglichst einfach und ohne großen quelltext(auch nicht einen der in mehrere Dateien aufgeteilt ist), genau darzustellen.

das ganze soll aussehen wie die Tabelle die ihr da seht ;)..

Problem ist.. die Größe also die vertikale Größe der Seite soll abhängig von "mitte" sein. mindestens 200px (der min-height:200px; befehl wird vom IE erstmal irgnoriert)..  <- erstes problem..

und nun das schwierigere.. wenn "mitte" zum beispiel durch text auf 300px ausgedehnt wird, so muss erstmal "maincenter" in dem "links" "mitte" und "rechts" sind mit auf 300px wachsen und zusätzlich sollen auch "links" und "rechts" auf 300px wachsen.

auf allen Seiten die ihr mir geraten habt, wachsen die container nur auf ihren eigenen Inhalt bezogen, nicht aber so wie ich das will (zumindest habe ich das nicht gefunden)..

ich bräuchte sowas wie height:100%; was aber bei mir nicht funktioniert.

dh. es sollt im IE aber version 6 (vielleicht auch schon früher).. und im firefox laufen.. ersteinmal zumindest..

danke noch einaml

[Gunther]

Hallo Kai!

Problem ist.. die Größe also die vertikale Größe der Seite soll abhängig von "mitte" sein. mindestens 200px (der min-height:200px; befehl wird vom IE erstmal irgnoriert)..  <- erstes problem..

Ist klar. IEs < 7 unterstützen min-height nicht, was dir ein Blick auf die entsprechende Seite in der SELFHTML-Doku ja auch schon verraten hätte.

und nun das schwierigere.. wenn "mitte" zum beispiel durch text auf 300px ausgedehnt wird, so muss erstmal "maincenter" in dem "links" "mitte" und "rechts" sind mit auf 300px wachsen und zusätzlich sollen auch "links" und "rechts" auf 300px wachsen.

auf allen Seiten die ihr mir geraten habt, wachsen die container nur auf ihren eigenen Inhalt bezogen, nicht aber so wie ich das will (zumindest habe ich das nicht gefunden)..

ich bräuchte sowas wie height:100%; was aber bei mir nicht funktioniert.

Dazu fallen mir 2 Sachen ein:
1. Google-Suche nach gleich hohe Spalten CSS
2. Layouttabelle mit CSS, wie bspw. hier beschrieben

dh. es sollt im IE aber version 6 (vielleicht auch schon früher)

Wenn das auch der Fall sein soll, dann dürfte wohl für die IEs <= 6 nur eine Javascript basierte Lösung in Frage kommen.

Gruß Gunther