nicht angemeldet
Positionierungsproblem
Tach allerseits
Ich schlage mich mit folgendem Konstrukt herum:
+----------+--------------------+
| 1 | 2 |
+----------+--------------------+
| | |
| 3 | 4 |
| | |
+----------+--------------------+
| 5 |
+-------------------------------+
Dabei gelten folgende "Regeln":
- Das ganze soll zentriert und auflösungsunabhängig
sein (ergo %-Werte). - [3] und [4] habe variable Höhen
- [5] soll sich (unabhängig davon welcher der beiden darüber
liegenden Bereiche höher ist) nahtlos unten anschließen. - [4] enthält den eigentlichen Inhalt und soll später nach
Möglichkeit auch von einem DAU mit Text gefüllt werden können.
Deshalb -so die Bitte- möge [4] doch im Quelltext gleich ganz
oben stehen.
Mein derzeitiger Stand ([1] und [2] habe ich weggelassen, da absolut positioniert und somit kein Problem):
<div id="container"> //Den brauche ich für Opera
<div id="vier">
<p>Hier steht viel Text ...</p>
<p>Text</p>
<p>Text</p>
</div>
<div id="drei">
<p>... und hier tausend Links.</p>
<p>usw.</p>
</div>
<div id="fuenf">das soll unten sein</div>
</div>
-----------------------------------------------
#container {
position:absolute;
left:0;
top:70px;
margin:0;
padding:0;
width:100%;
}
#vier {
width:65%;
margin-right:5%;
float:right;
background:red;
}
#drei {
width:25%;
margin-left:5%;
background:green;
}
#fuenf {
clear:both;
position:relative;
left:5%;
top:0;
width:90%;
background:white;
height:24px
}
Das ganze sieht in Mozilla tatsächlich so aus, wie es gedacht ist.
Opera 6.03 versetzt [4] aus welchen Gründen auch immer um 1 Pixel nach rechts. Damit könnte ich zur Not leben, auch wenn ich es nicht verstehe.
+----------+--------------------+
| 1 | 2 |
+----------++-------------------++
| || |
| 3 || 4 |
| || |
+----------++-------------------++
| 5 |
+-------------------------------+
Was jedoch der IE daraus macht, spottet jeder Beschreibung.
+----------+--------------------+
| 1 | 2 |
+--+---+--------------------+---+
| | | |
|3 | | 4 |
| | | |
+--+---+--------------------+---+
| 5 |
+-------------------------------+
Nun ja (dachte ich), baue ich eben für den IE eine eigene Version und biege das anschließend über Selektoren wieder gerade.
Pustekuchen. So wie die Div's im Quelltext notiert sind, kriege ich es auch mit den tollsten Klimmzügen nicht hin.
Hat jemand eine Idee?
Thomas J.
-
Hi Thomas,
+----------+--------------------+
| 1 | 2 |
+----------+--------------------+
| | |
| 3 | 4 |
| | |
+----------+--------------------+
| 5 |
+-------------------------------+Vorschlag:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"><head>
<title></title>
<style type="text/css">
<!--
div { border:1px solid blue; }
#eins { width:40%; float:left; }
#drei { width:40%; float:left; }
#vier { width:60%; margin-left:40%; position:relative; right:-1px; }
#fuenf { width:100%; clear:left; }
-->
</style></head>
<body><h1>5 DIVs</h1>
<div id="eins">
<p>eins</p>
</div><div id="zwei">
<p>zwei</p>
</div><div id="drei">
<p>drei</p>
<p>drei</p>
<p>drei</p>
<p>drei</p>
<p>drei</p>
<p>drei</p>
</div><div id="vier">
<p>vier</p>
</div><div id="fuenf">
<p>fuenf</p>
</div></body>
</html>- Das ganze soll zentriert und auflösungsunabhängig
sein (ergo %-Werte).
Ist es.
- [3] und [4] habe variable Höhen
Kein Problem.
- [5] soll sich (unabhängig davon welcher der beiden darüber
liegenden Bereiche höher ist) nahtlos unten anschließen.
Macht er dank clear:left
- [4] enthält den eigentlichen Inhalt und soll später nach
Möglichkeit auch von einem DAU mit Text gefüllt werden können.
Deshalb -so die Bitte- möge [4] doch im Quelltext gleich ganz
oben stehen.
Das wird kompliziert. Mit obigem Beispiel kannst du das ganz einfach per float und margin regeln. DIV vier ist etwas breiter, das ergibt sich aus der Kombination der Prozentwerte.
Was jedoch der IE daraus macht, spottet jeder Beschreibung.
Hehe, das glaube ich auf's Wort. Meinen Vorschlag bekommst du mit Attribut-Selektoren wohl eher hin. Allerdings steht #vier nicht ganz oben. Muss das denn unbedingt sein?
LG Orlando
-
Hi Thomas und Orlando,
ich bin gerade gleichen CSS Konstrukt gesessen wie Orlando. (Er war schneller).
Ich würde #vier lassen wo es ist und ein einfaches CMS installieren.
Ich habe mit www.newswriter.org sehr gute Ergebnisse erzielt.
mfg Rene
-
Moin
Sooo, also erstmal besten Dank für die Mühe.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"><head>
<title></title>
<style type="text/css">
<!--
div { border:1px solid blue; }
#eins { width:40%; float:left; }
#drei { width:40%; float:left; }
#vier { width:60%; margin-left:40%; position:relative; right:-1px; }Das dürfte an dieser Stelle überflüssig sein.
Das Problem mit dem 1-Pixel-Versatz tauchte bei meiner Version oben nur im Opera auf, der wahrscheinlich ein kleines Problem mit float:right hat.#fuenf { width:100%; clear:left; }
-->
</style></head>
<body><h1>5 DIVs</h1>
<div id="eins">
<p>eins</p>
</div><div id="zwei">
<p>zwei</p>
</div><div id="drei">
<p>drei</p>
<p>drei</p>
<p>drei</p>
<p>drei</p>
<p>drei</p>
<p>drei</p>
</div><div id="vier">
<p>vier</p>
</div><div id="fuenf">
<p>fuenf</p>
</div></body>
</html>Meinen Vorschlag bekommst du mit Attribut-Selektoren wohl eher hin. Allerdings steht #vier nicht ganz oben. Muss das denn unbedingt sein?
Naja, vielleicht nicht unbedingt. Eine "normale" Version hatte ich auch schon einigermaßen zusammen, inkl. Fix für die üblichen IE-Boxmodel-Macken.
Nr. 4 wird halt öfters überarbeitet und ist recht textlastig. Daher kam dann auch promt die Frage, ob ich das Ding nicht einfach ganz oben hinschreiben könnte.
Tja, und da hab' ich's halt mal versucht. Man wächst ja schließlich mit der Aufgabe - wobei ich nicht gedacht hätte, daß sich der IE so dermaßen querstellt.Thomas J.
- Das ganze soll zentriert und auflösungsunabhängig