HTML/CSS: Bild am unteren Rand festmachen

Hallo,
Ich möchte bei einer Page von Frames wegkommen und brauche daher einen einheitlichen doctype. Jetzt ist beim Anpassen des Menü-Frames das Problem aufgetaucht, dass das Menü nur korrekt angezeigt wird, wenn es im Quirks-Modus läuft, also ohne doctype.
Damals habe ich den gewünschten Style per Tabellenlayout hinbekommen, wahrscheinlich liegt da auch das Problem mit dem doctype. Ich habe jetzt vieles versucht, leider ohne Erfolg und bitte darum hier um Hilfe. Beigelegt sind die zwei Dateien der aktuellen Version, das untere Bild sollte sich so anpassen, dass es, wenn das Browserfenster grösser als das Menü ist, am unteren Rand klebt, sonst aber unter dem Menü bleibt. Mit div-Tags und fixierter position klappt das nicht.

Da hier komischerweise .txt-Dateien verboten sind, hier die Links
http://www.file-upload.net/download-2155489/html.txt.html
http://www.file-upload.net/download-2155497/css.txt.html

Ich hoffe, hier weiss jemand Rat

Gruss Slash

Hi,

Hast du vlt. das ganze mal irgendwo hochgeladen, sodass man sich ein Bild vom Problem machen könnte?

Als erstes solltest du wohl mal einen kompletten doctype reintun
und vermutlich statt der Tabelle für das Menü eine Liste
verwenden.

Steht das Bild in einem Absatz unter der Liste, so bleibt es
auch darunter, solange man mit CSS keine besonderen
Positionierungen vornimmt.

‘am unteren Rand’ von was? Forderung ist nicht eindeutig.

Insgesamt, wenn der Anzeigebereich für den Inhalt nicht
ausreicht, muß man sich so oder so entscheiden, was
passieren soll. Allenfalls kann man da mit CSS max-height oder
min-height und einen Bezug der Höhe auf den Anzeigebereich
was improvisieren, was das Verhalten grob umschaltet.

Wenn ich den kompletten doctype reinmache funktioniert es in der aktuellen Form nicht
und das menü ist nicht mit Tabellen sondern mit einfachen -Links gemacht.

Wenn das Bild in einem Absatz unter den Links steht, bleibt es eben auch da, wenn das Browserfenster grösser als das Menü ist, in dem Fall sollte es am unteren Rand des Browserfensters kleben.

Ich habs nochmal anschaulicher hochgeladen, hätte ich eigentlich gleich so machen können:
http://php-kanti.bplaced.net/test/menu.html

Ich hoffe, es ist so ein wenig klarer, ich habe jetzt das css vorübergehend in die html-Datei verschoben, damit gleich alles beisammen ist.

Wie ich schon sagte, die Tabelle raus und das Menü in eine
Liste, dann ergibt schon mal das (X)HTML mehr Sinn als jetzt.

Dann den kompletten doctype rein, damit man definierte
Bedingungen hat.

Unter anderem ist der Haken bei Tabellen auch, daß der browser
diese so anzeigen soll, wie es für tabellenartigen Inhalt sinnvoll
ist, das muß nicht unbedingt das sein, was der Autor per CSS
oder sonstwie angegeben hat.

Die Ursache für die Unterschiede im Quirksmodus könnten darin
liegen, daß dort die Angabe von 100% für die Tabellenhöhe falsch
interpretiert wird. Ohne Quirksschnickschnack wird das ignoriert,
weil sich so wie es da steht die Höhe des Elternelementes
wiederum nach dem Inhalt richtet, gibt also einen Zirkelschluß.
Das kann man allenfalls aufheben, indem man die Höhe der
Elternelemente explizit festlegt (hier also body und html).

Ansonsten wird das wie bereits geschrieben zu machen sein,
indem man min-height an den geeigneten Stelle einsetzt,
ein Element relativ positioniert und darin das untere Bild
absolut von unten aus, wobei man dann im Zweifelsfalle
für die Elemente in dem relativ positionierten Container unten
ein entsprechend großes margin oder padding lassen muß.
Ist ein wenig Herumprobiererei, sollte aber sinngemäß so in der
Art gehen, wenn man nicht gerade Tabellenzellen für sowas
verwendet ;o)

Doctype ist drin und die Tabelle raus. Ich habe versucht deine Anweisungen zu befolgen, jedoch ist mir nicht ganz klar, wie das gemeint ist und wie ich das min-height einsetzen kann. Mit dem Element habe ich noch nie gearbeitet. Kannst du mir vl ungefähr sagen, was in die navc-container rein soll?

Könntest erstmal probieren, für die Elemente html und body
min-height auf 100% zu setzen (mit einem technisch aktuellen
browser testen, ältere Modelle vom MSIE interpretieren das wohl
nicht).

Dann könnte man mal probieren, body relativ zu positionieren
(habe ich selbst noch nicht ausprobiert, einen Versuch ist es
Wert, sonst verwendet man noch ein div um alles herum, wo man
dann aber auch die minimale Höhe setzen muß und dies dann
relativ positionieren).
body {position: relative} (für ältere browser muß man
ggf. noch sowas wie left:1px setzen)

Dann sollte man sagen können:
div.navc {position: absolute; bottom:0; right:0}
und vermutlich auch noch:
div.navb {padding-bottom:150px}

Und dann bin ich mal gespannt, wie groß der Unsinn ist, der da
rauskommt - ist immer überraschend, wenn man die Höhe
relativ zum Anzeigebereich festlegen muß ;o)
Insbesondere sind Anweisungen für html und body kritisch, weil
du deine XHTML-Datei ja als HTML-Markierungssuppe ausliefern
läßt, als XHTML gäbe es ja auch ohne Doctype keinen
Quirksmodus ;o) Und da sind diese Elemente in CSS auch nicht
durch eine traurige HTML-Historie korrumpiert.

Schlimmstenfalls muß ich da glatt noch selber dran
herumprobieren ;o)

Danke vielmals, das hat mir sehr geholfen :wink:
Es funktioniert jetzt alles wie gewollt. Body absolut gemacht mit Mindesthöhe und dann oben und unten angeklebt. Ich hab das ganze nochmals hochgeladen, fals es noch wen interessiert.