nicht angemeldet
Seitenlayout, das sich der Fenstergröße anpasst
Hallo,
ich bin ja schon fast am Verzweifeln...
Folgende Seitenstruktur möchte ich mit CSS-formatierten DIVs hinbekommen:
<img src="http://www.wilfing-home.de/selfforum/2002-12-04/schema.gif" border="0" alt="">
Ich möchte, dass sich der Browser so wie bei einem Frameset verhält, soll heißen, das Konstrukt soll sich an die Fenstergröße anpassen.
Das Problem dabei ist: Da ich den DIVs z.T. absolute Angaben zur Breite bzw. Höhe gegeben habe, kann ich nicht mehr auf width: 100% bzw. height: 100% zurückgreifen, um das DIV immer dem Fenster anzupassen, da sich die 100% bekannterweise auf das Mutterelement (in meinem Fall das <body>-Element) beziehen, welchem ich auch schon 100% zugewiesen habe. Das Ergebnis sieht folgendermaßen aus: http://www.wilfing-home.de/selfforum/2002-12-04/
Klar, der Browser zeigt brav die 100% Breite/Höhe an, nur das will ich nicht.
Ich hab's schon mit "overflow: hidden" in <body> versucht, allerdings schneidet das dann den später vorhandenen Text mit ab.
Gibt's noch eine andere Möglichkeit, außer das ganze mit einem uneleganten Tabellenlayout irgendwie hinzubekommen?
BTW: Wundert euch nicht über den Doctype, der ist absichtlich auf transitional, da später ein <iframe> in den rechten unteren Bereich soll.
Danke für eure Hilfe!
Grüße aus Darmstadt,
Benjamin
-
Tag auch
ich bin ja schon fast am Verzweifeln...
Ach was.
#div4 {
margin:80px 0px 0px 160px;
}Thomas J.
-
Hallo Thomas,
#div4 {
margin:80px 0px 0px 160px;Hmm, nur ist margin dazu da, einen Außenabstand zu machen. Klappt auch hervorragend. Nur kann ich auf die anderen 3 DIVs nicht verzichten, da ich verschiedene voneinander abgetrennte Bereiche brauche.
Danke trotzdem :)
Grüße aus Darmstadt,
Benjamin-
Ich nochmal
Nur kann ich auf die anderen 3 DIVs nicht verzichten, da ich verschiedene voneinander abgetrennte Bereiche brauche.
Ja und?
Die andern drei Divs können doch fest positioniert bleiben.-
Hallo Thomas,
Die andern drei Divs können doch fest positioniert bleiben.
Das funktioniert dann aber erst recht nicht, weil sich durch die Angabe von margin für das DIV Nr.4 dasselbige von den restlichen DIVs "entfernt". Wie gesagt, margin ist für den äußeren Abstand da. Ich weiß nicht, wie mir das hier helfen soll. Sorry :-|
Grüße aus Darmstadt,
Benjamin-
Hmm ...
Das funktioniert dann aber erst recht nicht, weil sich durch die Angabe von margin für das DIV Nr.4 dasselbige von den restlichen DIVs "entfernt". Wie gesagt, margin ist für den äußeren Abstand da. Ich weiß nicht, wie mir das hier helfen soll. Sorry :-|
Ist das denn wirklich so schwer zu verstehen?
<div id="inhalt" style="margin:40px 0 0 40px">Viel Inhalt</div>
<div id="oben" style="position:absolute; width:100%; height:40px; left:0; top:0"></div>
<div id="links" style="position:absolute; width:40px; height:100%; left:0; top:0"></div>Ergibt eine Seite mit zwei festen Bereichen oben und links - nebst einem flexiblen Bereich für den Inhalt, der a) nahtlos an "oben" und "links" anschließt und sich b) der Breite des Browserfensters anpaßt.
Thomas J.
-
Hallo,
Ist das denn wirklich so schwer zu verstehen?
Scheinbar verstehst _du_ mein Problem nicht...
<div id="inhalt" style="margin:40px 0 0 40px">Viel Inhalt</div>
<div id="oben" style="position:absolute; width:100%; height:40px; left:0; top:0"></div>
<div id="links" style="position:absolute; width:40px; height:100%; left:0; top:0"></div>Das ist Blödsinn, da ich 1.) vier Bereiche brauche und 2.) trotzdem vor dem Problem stehe, dass, wenn ich dem <div id="inhalt"> height: 100% zuweise, das Teil wieder zu hoch wird. Und wieso das? Richtig, weil jetzt margin angegeben ist und der Browser das trotzdem 100% in Bezug auf das Mutterelement <body> anzeigt.
Ich möchte aber, dass sich das Konstrukt immer bis zum Rand ausdehnt. Das genau tut es aber nicht, solange ich nicht height definiere. Dann ist es, wie du ganz richtig sagst, ein flexibler Bereich. Das will ich aber nicht.Naja, ich verstehe nicht was _daran_ so schwer zu verstehen sein soll. Und bitte fühl dich deswegen jetzt nicht persönlich angegriffen oder so. :-)
Grüße aus Darmstadt,
Benjamin-
Moin
Scheinbar verstehst _du_ mein Problem nicht...
Es scheint so ...
Das ist Blödsinn, da ich 1.) vier Bereiche brauche
Nein, ist es nicht. Du kannst beliebig viele weitere fest positionierte Bereiche hinzufügen.
und 2.) trotzdem vor dem Problem stehe, dass, wenn ich dem <div id="inhalt"> height: 100% zuweise, das Teil wieder zu hoch wird.
Daß es auch in der Höhe unbedingt passen muß, konnte ich aus der Frage nicht ableiten.
Aber auch das ist nicht das Problem:
<div style="position:absolute; left:0; top:0; width:100%; height:100%; background:#fff">
<div style="width:80px; height:100%; background:#00f; float:left; margin:0"></div>
<div style="height:80px; background:#000"; margin:0></div>
<div style="margin:-80px 0 0 -80px; height:100%">
<p style="margin:0; padding:80px 0 0 80px">Inhalt</p>
</div>
</div>
<div style="position:absolute; left:0; top:0; width:80px; height:120px; background:#ff0"></div>Allerdings bezweifle ich, daß solch gezwunge Konstrukte dem Sinn und Zweck von HTML/CSS entsprechen.
Thomas J.
-
Hallo Thomas,
Allerdings bezweifle ich, daß solch gezwunge Konstrukte dem Sinn und Zweck von HTML/CSS entsprechen.
Naja, ich bin nunmal gezwungen, das so gezwungen zu machen, da ich praktisch ein Frameset simulieren will, soll heißen, in das rechte untere DIV soll ein iframe. Ein Frameset zu verwenden fällt heraus, da ich mit CSS in einem anderen Bildschirmbereich ein-/ausblenden will, was aber frameübergreifend nicht möglich ist, es sei denn, ich verwende DHTML, was ich aber möglichst vermeiden will.
Leider funktioniert deine letzte Variante auch nicht, da ich kein <p> in das DIV setzen will, sondern einen <iframe> und sonst nichts anderes. Diesem kann ich wiederum keine 100% Höhe zuweisen und einfach ein padding mit 80 geben (was übrigens eine geniale Idee ist, man müsste lediglich noch den z-index ändern), da sonst die Scrollbars verdeckt würden.
Und bevor ihr mich steinigt (<fluestermodus>jehooova! jehooova!</fluestermodus> ;-)): Frames verwende ich, weil der Kunde es eben so will. Sonst wäre das ja gar kein Problem... :-|
Danke nochmals für die Hilfe, ich steige jetzt endgültig auf ein Tabellenlayout um. Bleibt mir wohl nichts übrig. Ich dachte halt, dass ich diese blöde Frames-Geschichte noch so elegant wie möglich lösen könnte... war wohl nichts!
Grüße aus Darmstadt,
Benjamin--
Signatur? Sowas brauche ich nicht, da steht eh' meist nur Nonsens drin.
-
-
-
-
-
-
-
-
Hallo Benjamin,
<img src="http://www.wilfing-home.de/selfforum/2002-12-04/schema.gif" border="0" alt="">
Hübsche Grafik.
Das Problem dabei ist: Da ich den DIVs z.T. absolute Angaben zur Breite bzw. Höhe gegeben habe, kann ich nicht mehr auf width: 100% bzw. height: 100% zurückgreifen, um das DIV immer dem Fenster anzupassen, da sich die 100% bekannterweise auf das Mutterelement (in meinem Fall das <body>-Element) beziehen, welchem ich auch schon 100% zugewiesen habe. Das Ergebnis sieht folgendermaßen aus: http://www.wilfing-home.de/selfforum/2002-12-04/
Wenn Du schon absolut positionierst, dann mach doch auch Gebrauch von "right" und "bottom" anstelle nur "left" und "top" - dann dehnt sich das Div automatisch aus. So wie hier:
http://www.blackshirt.de/code/vierdivs.html
- Tim
--
Diese Signatur ist _vielleicht_ an einem Samstag gültig.-
Hallo Tim,
Hübsche Grafik.
Danke! Da hab ich ganze 2 Minuten für gebraucht ;-)
Wenn Du schon absolut positionierst, dann mach doch auch Gebrauch von "right" und "bottom" anstelle nur "left" und "top"
D'Oh! Dass ich darauf nicht gekommen bin...
Du bist meine Rettung! Danke, danke, danke! :-)Grüße aus Darmstadt,
Benjamin--
Tss, dass ich _darauf_ nicht gekommen bin. Sowas... *wunder* ;-)-
Hallo nochmal,
D'Oh! Dass ich darauf nicht gekommen bin...
Du bist meine Rettung! Danke, danke, danke! :-)Veto! Buhuuuu! *heul*
Das funktioniert leider nicht mit unser aller Liebling Internet Eplorer. Der ignoriert schlicht die bottom- und right-Angabe und macht den Text so hoch, wie der Text eben ist.
Das dumme dabei ist, die Seite ist fast ausschließlich für IE-User gedacht, zumindest laut Kunde... :-(Da muss ich wohl doch auf Tabellen zurückgreifen...
Grüße aus Darmstadt,
Benjamin--
Signatur? Sowas brauche ich nicht, da steht eh' meist nur Nonsens drin.
-
-
hallo benjamin,
das kann so nix werden (wie du es dir vorstellst)
alle bereiche können nicht immer 100% der fenstergröße betragen.
maximal die breite. die kann sich immer der fenstergröße anpassen (flexible layout). wenn das browserfenster sehr klein ist, muss ja der scrollbalken sichtbar werden, sonnst sieht der user nix vom inhalt (=schlecht).ich hab mal einen kleinen test gemacht:
http://www.t-2.at/csstest/self/benjamin1.htmldie box1 is fix.
die box3 ergänzt box1 in der breite auf 100%
die box3 ist in der höhe fix.
die box2 kann/darf in der höhe nie 100% betragen.
die box4 kann/darf in der höhe nie 100% betragen.
die box4 ergänzt box2 in der breite auf 100%damit es rein optisch so aussieht wie auf deiner grafik, musst du nur ein bg-image im body definieren (links oben positioniert, repeat-y).
wie hier (die border hab ich drinnen gelassen):
http://www.t-2.at/csstest/self/benjamin2.htmlsollte funktionieren, oder?
liebe grüße aus wienmict