Verschachtelte div-container mit Mindesthöhe ?

[Horst Nogajski]

Hallo zusammen,

ich versuche ein Layout ohne verpönte Tabellen zu erstellen und habe schon einiges über die unterschiedlichen Browserverhalten (meist IE 5x 6x auf PC nicht beim Mac) bei CSS-Boxen hier gelesen. Das man die Browser per CSS-Hacks mit verschiedenen Selectoren (CSS1 CSS2 CSS2.1) austricksen kann usw. Klingt alles relativ kompliziert für mich. Deshalb habe ich mich für ein einfaches Layout entschieden bei dem ich kein Border oder Padding verwende:

________________html-body________________________
|                                               |
|   -----------------div_main--------------     |
|   | div_ |                              |     |
|   | menu |                              |     |
|   | ...  |    div_head                  |     |
|   | ...  |                              |     |
|   | ...  |                              |     |
|   |      |------------------------------|     |
|   |      |                              |     |
|   |      |    div_content               |     |
|   |      |                              |     |
|   |      |                              |     |
|   | #### |                              |     |
|   -----------------div-main--------------     |
|                                               |
_________________________________________________

Ich habe aber trotz des einfachen Layouts einige Dinge noch nicht zu meiner Zufriedenheit lösen können. Vielleicht kann mir ja jemand bei dem einen oder anderen Problem helfen:

1. das div_menu sollte immer so hoch sein wie div_main. Bisher habe ich min-height gesetzt, das ja aber der IE nicht kennt.

2. im div_menu sollte immer unten noch ein weiteres div sein (####), und egal wie weit das Menü ausgeklappt ist, dieses neue div sollte immer unten bündig sein. Evtl. könnte es auch ein div unter dem div_menu sein, wenn es denn immer an bottom vom div_main ausgerichtet bleibt. (Und wenn das mit dem min-height beim div_menu nicht geht, kann ich dem div_main den gleichen grauen Hintergrund geben wie div_menu. Dann sieht das schon mal gut aus, auch wenn's ein bischen geschummelt ist, ;))

3. div_head wird niemals in der Größe verändert werden, aber div_content kann natürlich mal mehr mal weniger Inhalt bekommen. Deshalb sollte sich die Höhe von div_content und gleichzeitig auch von div_main u. div_menu mit 'verlängern'. Sprich, die Seite wächst einfach nach unten weiter. Bisher ist es im IE so, das div_main mitwächst, aber div_menu nicht. Im Firefox wächst sogar einfach nur der Text aus dem div_content neraus, :(

Es gibt natürlich einen Link um sich das Dilemma anzuschauen: http://biriba.oficinadacapoeira.de/
Menüpunkt 1 & 2 haben wenig Inhalt und 3 & 4 viel!

Viele Grüße,
Horst

[Horst Nogajski]

Jo, nochmal hallo zusammen,

Mittlerweile habe ich noch einiges ausprobiert, und vor allem die ursprüngliche Layout-Idee Dank der Entdeckung der Overflow-Eigenschaften etwas abgeändert. Damit sind alle meine Problemchen behoben! =:)

Viele Grüße,
Horst

[Tom]

Hello,

Mittlerweile habe ich noch einiges ausprobiert, und vor allem die ursprüngliche Layout-Idee Dank der Entdeckung der Overflow-Eigenschaften etwas abgeändert. Damit sind alle meine Problemchen behoben! =:)

Irrtum, die fangen jetzt erst an. *gg*

Ich will Dich ja nicht frusten, aber hast Du Dir das schon mal im NN 7.1 angesehen?

Harzliche Grüße aus http://www.annerschbarrich.de

Tom

[Horst Nogajski]

Hallo,

Irrtum, die fangen jetzt erst an. *gg*

Ich will Dich ja nicht frusten, aber hast Du Dir das schon mal im NN 7.1 angesehen?

Nö, muß man das?
Ich kenn mich nicht aus, kläre mich mal auf. Ist der NN 7.1 der moderne Vertreter vom NN 4.x?

Spaß bei Seite, der NN 7.1 ist demnach (vielleicht, ?, rätselrat) ein Ausnahmekandidat, ähnlich wie IE 5.5 aber nur auf dem PC (und nicht MAC) oder sowas? Und die 7.0 oder 7.2 sind dann wieder anders?

Und ja, frusten lass ich mich sowieso nicht, =:). Ich habe ja keinen Erfolgsdruck. Und wenn es anfängt aufzuhören Spaß zu machen, dann nehm' ich halt Tabellen, ;-). Das ist alt bewährt und ich kann's.

Viele Grüße,
Horst

[Tom]

Hello,

Und ja, frusten lass ich mich sowieso nicht, =:). Ich habe ja keinen Erfolgsdruck. Und wenn es anfängt aufzuhören Spaß zu machen, dann nehm' ich halt Tabellen, ;-). Das ist alt bewährt und ich kann's.

Meintest Du jetzt "Tabellen" oder Tabletten"?

interessante Redewndung: ...wenn es anfängt aufzuhören Spaß zu machen.

Das ist ja fast So wie "darf ich Ihne meine 'NochNichtGanzNichtMehr' vorstellen?"

Harzliche Grüße aus http://www.annerschbarrich.de

Tom

[Horst Nogajski]

Hallo Tom,

Und ja, frusten lass ich mich sowieso nicht, =:). Ich habe ja keinen Erfolgsdruck. Und wenn es anfängt aufzuhören Spaß zu machen, dann nehm' ich halt Tabellen, ;-). Das ist alt bewährt und ich kann's.

Meintest Du jetzt "Tabellen" oder Tabletten"?

Der ist gut, lol.  Der bekommt eine 2, nein sogar 2+.

interessante Redewndung: ...wenn es anfängt aufzuhören Spaß zu machen.

Fand ich auch schon beim Schreiben, =:)

Gruß,
Horst

[Horst Nogajski]

Hallo,

Damit sind alle meine Problemchen behoben! =:)

Irrtum, die fangen jetzt erst an. *gg*

Ich will Dich ja nicht frusten, aber hast Du Dir das schon mal im NN 7.1 angesehen?

Ähm ne. - Ich habe gar kein NN 7.1. Aber trotz des enormen Inputs den ich hier bekommen habe, ist es mir vielleicht doch gelungen zu verstehen was Du meinst, *gg*. Ich habe noch einen älteren Firefox. Der ließ immer den body_div 'stehen', wenn das Browserfenster resized wurde. Evtl. ist es ja auch das was dein NN 7.1 gemacht hat.

Aber ist auch egal. Ich habe mich vorhin noch mal mit dem CSS-Thema befasst und einen div weggelassen und die anderen absolut positioniert. Das scheints zu sein und gefällt mir gut. Demnach war es auch an der Zeit die CSS-Datei mal aufzuräumen. => simples css-layout

_____________________body________________________
|                                               |
|   ---------------------------------------     |
|   | div_ |                              |     |
|   | menu |                              |     |
|   | ...  |    div_head                  |     |
|   | ...  |                              |     |
|   | ...  |                              |     |
|   |      |------------------------------|     |
|   |      |                              |     |
|   |      |    div_body                  |     |
|   |      |                              |     |
|   |      |                              |     |
|   | #### |                              |     |
|   ---------------------------------------     |
|                                               |
_________________________________________________

Beste Grüße,
Horst

PS: Beim nächsten Mal, wenn ich hier eine Frage poste, bitte ich aber um etwas mehr Zurückhaltung, (sowohl quantitativ als auch qualitativ) *ggg*

[Tom]

Hello,

so lohnt sich das, gesichert und kopiert zu werden. Funktioniert in allen vier Browsern, die mir momentan zur Verfügung stehen.

• IE 5.5
• IE 6.0
• Firefox 0.9, eigentlich mit den Updates von 1.x, der der zeigt das nicht an
• NN 7.1

Wäre nett, wenn man noch mehr Browser testen könnte, denn das interessiert bestimmt nicht nur Einen.

Harzliche Grüße aus http://www.annerschbarrich.de

Tom

[Ingo Turski]

Hi,

Wäre nett, wenn man noch mehr Browser testen könnte, denn das interessiert bestimmt nicht nur Einen.

nunja, alle Elemente sind absolut positioniert und haben fixe Höhen. Das realisiert zwar dieses eine Layout, ist aber nun wirklich eine simple Konstruktion für absolut unflexble Seiten.
Ich hätte gedacht, daß der NN4 sogar damit zurecht kommen müßte, aber dem ist nicht so; das CSS sollte vor ihm versteckt werden.

freundliche Grüße
Ingo

[Tom]

Hello,

nunja, alle Elemente sind absolut positioniert und haben fixe Höhen. Das realisiert zwar dieses eine Layout, ist aber nun wirklich eine simple Konstruktion für absolut unflexble Seiten.
Ich hätte gedacht, daß der NN4 sogar damit zurecht kommen müßte, aber dem ist nicht so; das CSS sollte vor ihm versteckt werden.

Es ging mir im Wesentlichen um overflow:auto; Das hat nämlich in NN 7.0 nicht funktioniert.

Harzliche Grüße aus http://www.annerschbarrich.de

Tom