Hast Du schon mal versucht, das umgebende div ("main") mit einer festen Höhe zu versehen?
<div id="main" style='border-style:solid;border-width:1px;height:380px'>(Zur Verdeutlichung noch ein 1px-Rahmen drumherum).
Ist sicherlich eine Frage, wie du die übergeordneten DIVs mit Hilfe von "position:relative" und "position:absolute" festsetzt. Lies zu dem Thema die Beschreibung (z.B. in SelfHTML) ganz genau! Standard ist für die Elemente "position:static", und spezielle Elemente werden in Bezug zum übergeordneten nicht-statischen Element ausgerichtet... das heißt: Im Zweifelsfall gleich unter dem <body> erst mal ein allumfassendes <div style="position:relative"> definieren, falls du sonst bisher kein positioniertes Element hattest (Holzhammer-Trick für Positionierung). Das wird sicher viel Probieren bedeuten - arbeite dich besser vom gewünschten Element runter in Richtung BODY, vielleicht muss es ja kein allumfassendes DIV sein, sicher reicht schon eines der vorhandenen übergeordneten...
Ist sicherlich eine Frage, wie du die übergeordneten DIVs mit Hilfe von "position:relative" und "position:absolute" festsetzt. Lies zu dem Thema die Beschreibung (z.B. in SelfHTML) ganz genau! Standard ist für die Elemente "position:static", und spezielle Elemente werden in Bezug zum übergeordneten nicht-statischen Element ausgerichtet... das heißt: Im Zweifelsfall gleich unter dem <body> erst mal ein allumfassendes <div style="position:relative"> definieren, falls du sonst bisher kein positioniertes Element hattest (Holzhammer-Trick für Positionierung). Das wird sicher viel Probieren bedeuten - arbeite dich besser vom gewünschten Element runter in Richtung BODY, vielleicht muss es ja kein allumfassendes DIV sein, sicher reicht schon eines der vorhandenen übergeordneten...
Der Footer ist das Ende der Seite, schließt alles davor ab. Ist auch auf jeder Seite (mit PHP eingefügt), die Höhe der Inhalte ist immer unterschiedlich (sogar auf dieser Seite, denn die Setzliste wird ja gefüllt). Feste Höhe für das Gesamt-Div wird also nix.
Der allumfassene Div heißt "container" und ist per css auf position:relative gesetzt. Dann gibts den Titel mit Navigation, den Textteil (main, da ist die Setzliste und das Eingabefeld drin) und den Footer. Die Positionierung des Listendivs und des Eingabefelds habe ich relativ zum Eingabebereich-div gemacht, weils ja immer unter der Setzliste stehen soll, egal, was davor kommt.
Grob etwa so:
<container>
<navigation>
</navigation>
<main>
<setzliste></setzliste>
<eingabebereich>
<eingabefeld>
<auswahldiv>
</auswahldiv>
</eingabebereich>
</main>
<footer>
</footer>
</container>Zap
EDIT: :redface: ohje, so einfach: dem Div, der das Eingabefeld umfaßt, eine feste Höhe geben...
klick
Sieht cool aus, oder? (EDIT2: Wenn man's nicht gerade mit dem IE betrachtet :motz:) Die Liste wird natürlich in echt erst zur Laufzeit mit XML-Daten gefüllt.
In Opera 9.02 ist eine Linie quer über die Buttons zu sehen.
Kleiner Tipp:
- QuirksMode - for all your browser quirks
- The StyleWorks
Hat mir schon einiges mit CSS geholfen. Aber letztendlich ist immer ein Browser dabei, der nicht will wie er sollte...
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!