nicht angemeldet
Frameset nachbauen mit divs - klappt nicht...
Hallo zusammen.
Als ziemlicher CSS - Newbie moechte ich ein statt eines Framesets zum Seitenaufbau positionierte Divs verwenden. Das ganze soll einen quasi "klassischen" Aufbau haben ungefaehr so aussehen :
+---------------------------+
| |
| |
+-----+---------------------+
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
+-----+---------------------+
und aus 3 DIV - Bloecken bestehen, die absolut positioniert sind.
Das klappt auch erstmal ganz gut. Wenn ich aber das gesamte Konstrukt zusätzlich zentrieren moechte, klappts nicht mehr:
----------------------schnipp------------------------------
<body style="text-align:center;"> <!--IE-zentrieren-->
<div style="position:absolute; top:0px; width:800px; margin-left:auto; margin-right:auto; border:1px solid red"><!--css-konformes zentrieren-->
<div style="position:absolute; top:0px; left:0px; height:90px; width:800px;border:1px solid black;"> <p>top</p></div>
<div style="position:absolute; top:95px; left:0px; width:200px; heigth:100%;border:1px solid black;"><p>left</p></div>
<div style="position:absolute; top:95px; left:200px;heigth:100%; width:600px;border:1px solid black;"><p>right</p></div>
</div>
</body>
</html>
---------------------schnapp--------------------------------
Der hier gezeigte Code ist der, der meiner Ansicht nach Sinn machen wuerde. Die inneren Divs scheeren sich aber nicht darum, dass sie selbst in einem Div sitzen, sondern richten sich in Opera und Mozilla weiterhin stur an der linken, oberen Fensterecke aus. Im Internetexplorer rutscht das Ganze dafuer so weit nach rechts, dass sogar ein horizontaler Scrollbalken entsteht.
Der "Zentrierdiv" hat seltsamerweise in saemtlichen Browsern keine Hoehe, obwohl er doch mindestens so hoch, wie sein Inhalt sein muesste...
Weiss jemand, was ich falsch mache Erstens bezueglich der Hoehe (heigth:100%; scheint ueberhaupt in den seltensten Faellen zu gehen) und des zentrierens?
Wuerde ungern zum Tabellenlayout zurueckkriechen...
Viele Gruesse - Jan
-
Hi Jan,
Als ziemlicher CSS - Newbie moechte ich ein statt eines Framesets zum Seitenaufbau positionierte Divs verwenden.
sehr schön.
Das ganze soll einen quasi "klassischen" Aufbau haben ungefaehr so aussehen :
+---------------------------+
| 1 |
| |
+-----+---------------------+
| | |
| | |
| | |
| | |
| 2 | 3 |
| | |
| | |
| | |
| | |
+-----+---------------------+und aus 3 DIV - Bloecken bestehen, die absolut positioniert sind.
Mit absoluter Positionierung löst du die DIVs aus dem Fluß der Elemente, sie sind dann unabhängig vom (im Quelltext) umgebenden DIV und richten sich auch nicht danach. Absolute Positionierung ist daher für deinen Zweck nicht gut geeignet. Besser, du arbeitest hier entweder mit relativer Positionierung oder mit float und clear. Damit lässt du beispielsweise DIV2 von DIV3 rechts umfließen.
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float
Interessieren dürfte dich auch folgende Seite, da gibt's schöne Beispiele:
http://thenoodleincident.com/tutorials/box_lesson/boxes.html
Der hier gezeigte Code ist der, der meiner Ansicht nach Sinn machen wuerde. Die inneren Divs scheeren sich aber nicht darum, dass sie selbst in einem Div sitzen, sondern richten sich in Opera und Mozilla weiterhin stur an der linken, oberen Fensterecke aus.
Das ist auch korrekt.
Im Internetexplorer rutscht das Ganze dafuer so weit nach rechts, dass sogar ein horizontaler Scrollbalken entsteht.
Der hat wohl "einen" Fehler ;)
Der "Zentrierdiv" hat seltsamerweise in saemtlichen Browsern keine Hoehe, obwohl er doch mindestens so hoch, wie sein Inhalt sein muesste...
Nein, siehe oben.
Weiss jemand, was ich falsch mache Erstens bezueglich der Hoehe (heigth:100%; scheint ueberhaupt in den seltensten Faellen zu gehen) und des zentrierens?
Bei absoluter Positionierung entsprechen 100% der Höhe des Browserfensters. Wenn der Inhalt länger wird, hast du ein Problem. Zentrieren kannst du mit margin-left:auto und margin-right:auto, denn text-align:center zentriert nur den Inhalt und dieser ist bei absoluter Positionierung losgelöst.
Wuerde ungern zum Tabellenlayout zurueckkriechen...
Verständlich.
LG Orlando
-
Hi Orlando!
Erstmal Danke, fuer die schnelle Antwort!Mit absoluter Positionierung löst du die DIVs aus dem Fluß der Elemente, sie sind dann unabhängig vom (im Quelltext) umgebenden DIV und richten sich auch nicht danach.
OK, vielleicht habe ich was grundsaetzlich falsch verstanden: ich dachte, position:absolute heisst, die Position wird absolut festgelegt und zwar abhaengig vom Elternelement und Elternelement waere das jeweils umschliessende <tag>. Heisst position:absolute dann eigentlich immer: bezogen auf linke obere Ecke des Browserfensters?
Und relative bezieht sich dann auf das Elternelement?http://thenoodleincident.com/tutorials/box_lesson/boxes.html
Das sieht ganz gut aus! Ist zwar mein Layout nicht dabei, aber etwas Eigenarbeit muss ja auch noch sein ;-)...
Im Internetexplorer rutscht das Ganze dafuer so weit nach rechts, dass sogar ein horizontaler Scrollbalken entsteht.
Der hat wohl "einen" Fehler ;)Beruhigend, dass der IE wahrscheinlich noch mehr Fehler macht als ich... ;-)
Jan
-
Hi Jan,
OK, vielleicht habe ich was grundsaetzlich falsch verstanden: ich dachte, position:absolute heisst, die Position wird absolut festgelegt und zwar abhaengig vom Elternelement und Elternelement waere das jeweils umschliessende <tag>. Heisst position:absolute dann eigentlich immer: bezogen auf linke obere Ecke des Browserfensters?
so ist es :)
Und relative bezieht sich dann auf das Elternelement?
Ja. Das Element ist dann nicht losgelöst, du verschiebst es um die angegebenen Werte.
http://thenoodleincident.com/tutorials/box_lesson/boxes.html
Das sieht ganz gut aus! Ist zwar mein Layout nicht dabei, aber etwas Eigenarbeit muss ja auch noch sein ;-)...
Mit CSS basteln macht auch mächtig Spaß ;)
Beruhigend, dass der IE wahrscheinlich noch mehr Fehler macht als ich... ;-)
Bei CSS ganz sicher. Da hat er seinen alten Erzfeind beinahe schon überholt...
LG Orlando
-
-
-
+---------------+
| head |
+---+-----------+
| m | |
| e | main |
| n | |
| u | |
+---+-----------+Ich habe das seinerzeit wie folgt gelöst (der Übersichtlichkeit halber habe ich nur die entscheidenden Angaben angeführt):
<body>
<div id="head">
...
</div>
<div id="menu">
...
</div>
<div id="main">
...
</div>
</body>.body {
margin-left: auto;
margin-right: auto;
}#menu {
float: left;
}#main {
margin-left: ...;
}-
.body {
^ mpf... Du weißt, was gemeint ist...
-
#main {
margin-left: ...;
}Das mit dem margin zu loesen ist eine gute Idee! Opera und Mozilla zeigen damit das gewuenschte an. Aergerlich nur, dass der liebe Freund Internetexplorer (5.5) sich nicht von
body {
margin-left: auto;
margin-right: auto;
}beeindrucken laesst :-(.
Selbst der Workarround "text-algin:center" bewirkt nichts, wenn's mit in der Bodystyledeklaration steht.Wenn doch nur Standards von allen mal halbwegs konform umgesetzt wuerden...
Auf jeden Fall Danke fuer den Tip,
Jan-
Hi nochmal,
Aergerlich nur, dass der liebe Freund Internetexplorer (5.5) sich nicht von
body {
margin-left: auto;
margin-right: auto;
}beeindrucken laesst :-(.
Vielleicht hilft ja
html { text-align:center; }
Wenn doch nur Standards von allen mal halbwegs konform umgesetzt wuerden...
Mozilla und Opera sind recht gut unterwegs.
LG Orlando
-
Vielleicht hilft ja
html { text-align:center; }Leider nicht, hatte ich auch schon probiert. Trotzdem danke!
Wenn doch nur Standards von allen mal halbwegs konform umgesetzt wuerden...
Mozilla und Opera sind recht gut unterwegs.Leider reicht es ja schon, wenn jeweils ein verbreiteter Kandidat eine Funktion gar nicht, oder falsch umsetzt :-(
Ich fange ja wirklich erst an, mit den Stylesheets, aber ein bisschen habe ich den Eindruck, das Konzept ist vom Umfang der Gestaltungsmoeglichkeiten und ihrer Abstimmung verhaeltnismaessig gut durchdacht. Bewegt sich aber staendig am Rande der Einsturzgefahr, weil irgendeine Saeule von mindestens einem Browser gerade mal nicht wie gedacht unterstuetzt wird...
Naja. Ich hoffe, wenn ich mich besser Auskenne mit dem Zeug, werde ich jeweils die passenden Stuetzbalken parat haben, um sie in die Bresche zu stemmen ;-)Viele Gruesse - Jan
-
-
-