nicht angemeldet
<div>-Problem
Hi,
ich habe schon mal woanders gefragt, doch die CSS-Frage scheint allen zu kompliziert zu sein. Also es geht - wie bereits gesagt - um ein CSS-<div>-Problem, genauer um Verschachtelung verschiedener <div>-Elementen.
Ich habe jetzt einen mit Paint erstellten "Konstruktionsplan", der genau beschreiben sollte, wie ich mir das vorgestellt habe:
http://home.arcor.de/janhanewald/divproblem.bmp
In diesem ist jeder Bereich (in HTML dann mit <div id="..."> gekennzeichnet) mit einer Ziffer bezeichnet.
Wichtig ist eigentlich nur:
1.) Bereich 2, 3 und 4 sind immer gleich.
2.) Bereich 5 ist der Inhalt, also unterschiedlich.
3.) Bereich 6 ist unter dem Ende von Bereich 5.
4.) Bereich 1 beginnt ganz oben und endet ganz unten, also mit dem Schluss von Bereich 6. (Bereich ist also der Hauptcontainer)
Weiß diese Konstruktion jmd. zu lösen? (Das Problem ist ja, dass ich die Bereiche 2,3,4,5 und 6 jeweils absolut positioniere. Aber absolut positionierte Elemente werden vom Hauptcontainer nicht registirerit, also passt sich dieser Hauptcontainer nicht richtig an.
Hoffend + Mit freundlichen Grüßen.
-
Hallo,
also ich würde das Problem einfach mit mehreren Tabellen lösen und mich nicht so arg auf <div> versteifen ...
mit einer Haupttabelle für Bereich 1... dieser ist einfach unterteilt in 3/ 4 Spalten .. für die restlichen Elemente.
Ich hoffe dir geholfen zu haben...
Gruß Steven
-
Hi,
Ich habe jetzt einen mit Paint erstellten "Konstruktionsplan", der genau beschreiben sollte, wie ich mir das vorgestellt habe:
http://home.arcor.de/janhanewald/divproblem.bmp
Hinweis:
Statt ein 1MB großes Bitmap ins netz zu stellen, solltest Du mal schauen, ob dein Paint nicht auch GIFs erstellen kann. Meiner Meinung nach kann es das seit Win98SE.Weiß diese Konstruktion jmd. zu lösen? (Das Problem ist ja, dass ich die Bereiche 2,3,4,5 und 6 jeweils absolut positioniere. Aber absolut positionierte Elemente werden vom Hauptcontainer nicht registirerit, also passt sich dieser Hauptcontainer nicht richtig an.
Gedankenanstoß:
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title></title>
<style type="text/css">
<!--
div.oben {position:relative; width:100%; height:50px;}
div.olinks{position:absolute; left:0; top:0; width:50%; height:100%; border:1px solid #FF0000;}
div.orechts{position:absolute; left:50%; top:0; width:50%; height:100%; border:1px solid #00FF00;}
div.menu{position:relative; width:200px; height:400px; float:left; border:1px solid #00FF00;}
div.inhalt{position:relative; margin-left:200px; height:400px; border:1px solid #0000FF;}
div.fuss{position:relative; left:10%; width:90%; border:1px solid #000000;}
-->
</style>
</head>
<body>
<div class="oben">
<div class="olinks" id="2">2</div>
<div class="orechts" id="3">3</div>
</div>
<div class="menu" id="4">4</div>
<div class="inhalt" id="5">
5
<h1>Inhalt</h1>
<p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </p>
<p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </p>
<p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </p>
<p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </p>
<p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </p>
<p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </p>
<p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </p>
<p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </p>
<p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </p>
<p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </p>
<p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </p>
<p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </p>
</div>
1
<div class="fuss" id="6">6</div>
</body>
</html>Gruß
Axel
-
Hallo Jan,
auch nur ein Vorschlag, wußte aber jetzt nicht ob der äußere Rahmen auch so sichtbar sein soll wie in deiner bmp
funktioniert auch korrekt im IE6, Mozilla 1.1 und im Opera:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD><TITLE>Neu</TITLE></HEAD>
<BODY><div id="hauptbox" style="position:absolute; width:100%; height:100%; margin:10px; border:1px solid #000000">
<div id="xy2" style="position:absolute; left:5px; top:5px; width:40%; height:15%; border:1px solid #000000"><b>2</b></div>
<div id="xy3" style="position:absolute; right:5px; top:5px; width:58%; height:15%; border:1px solid #000000"><b>3</b></div>
<div id="xy4" style="position:absolute; left:5px; top:17%; width:30%; height:55%; border:1px solid #000000"><b>4</b></div>
<div id="xy5" style="position:absolute; right:5px; top:17%; width:68%; height:70%; border:1px solid #000000"><b>5</b></div>
<div id="xy6" style="position:absolute; right:5px; top:90%; width:90%; height:8%; border:1px solid #000000"><b>6</b></div></div>
</BODY>
</HTML>Alllerdings ein Problem: bei der oben gezeigten Doctype - Angabe verschiebt der IE alles zu einem Wirrwarr!
und gleich noch eine neue Frage an Axel Richter:
Warum macht er das???Grüße
Palme
-
Hallo Palme,
funktioniert auch korrekt im IE6, Mozilla 1.1 und im Opera:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD><TITLE>Neu</TITLE></HEAD>
<BODY><div id="hauptbox" style="position:absolute; width:100%; height:100%; margin:10px; border:1px solid #000000">
<div id="xy2" style="position:absolute; left:5px; top:5px; width:40%; height:15%; border:1px solid #000000"><b>2</b></div>
<div id="xy3" style="position:absolute; right:5px; top:5px; width:58%; height:15%; border:1px solid #000000"><b>3</b></div>
<div id="xy4" style="position:absolute; left:5px; top:17%; width:30%; height:55%; border:1px solid #000000"><b>4</b></div>
<div id="xy5" style="position:absolute; right:5px; top:17%; width:68%; height:70%; border:1px solid #000000"><b>5</b></div>Der Fluch der absoluten Positionierung ;-) Hast Du mal probiert, was passiert, wenn Du in dieses DIV (id="xy5") viel Inhalt reinschreibst? Es soll ja schließlich das Inhalts-Div werden ;-))
<div id="xy6" style="position:absolute; right:5px; top:90%; width:90%; height:8%; border:1px solid #000000"><b>6</b></div>
</div>
</BODY>
</HTML>Alllerdings ein Problem: bei der oben gezeigten Doctype - Angabe verschiebt der IE alles zu einem Wirrwarr!
und gleich noch eine neue Frage an Axel Richter:
Warum macht er das???Welcher IE? Meiner, MSIE5.5 unter WinNT4.0 Workstation, nicht!
Grüße
Axel
-
Hallo Palme,
.......
Der Fluch der absoluten Positionierung ;-) Hast Du mal probiert, was passiert, wenn Du in dieses DIV (id="xy5") viel Inhalt reinschreibst? Es soll ja schließlich das Inhalts-Div werden ;-))
kein Problem mit: overflow:hidden;
Welcher IE? Meiner, MSIE5.5 unter WinNT4.0 Workstation, nicht!
Bei meinem IE6, dein Script wird bei mir im Opera 6.06 nicht korrekt dargestellt
Früße
Palme
-
Sorry, ich meinte natürlich besser: overflow:scroll; !!!!!
Hallo Palme,
.......Der Fluch der absoluten Positionierung ;-) Hast Du mal probiert, was passiert, wenn Du in dieses DIV (id="xy5") viel Inhalt reinschreibst? Es soll ja schließlich das Inhalts-Div werden ;-))
kein Problem mit: overflow:hidden;
Welcher IE? Meiner, MSIE5.5 unter WinNT4.0 Workstation, nicht!
Bei meinem IE6, dein Script wird bei mir im Opera 6.06 nicht korrekt dargestellt
Früße
Palme
-
»»Sorry, ich meinte natürlich besser: overflow:scroll; !!!!!
Ja, aber so war's nicht gefordert. Der Div5 (Inhalt) sollte ausdrücklich eine variable Länge haben ;-))Bei meinem IE6,
Hab ich nicht ;-))
dein Script wird bei mir im Opera 6.06 nicht korrekt dargestellt
Opera?
<meinung>Wenn ich klassische Musik hören will, gehe ich in die Oper. Wenn ich im Internet recherchiere, nehme ich einen Browser.</meinung>
Grüße
Axel
-
»»Sorry, ich meinte natürlich besser: overflow:scroll; !!!!!
Ja, aber so war's nicht gefordert. Der Div5 (Inhalt) sollte ausdrücklich eine variable Länge haben ;-))Ach so war das gemeint, und ich dachte das der Bereich 5 einfach nur vom Inhalt selbst soll unterschiedlich sein, also nicht von der Größe nach unten (Inhalte immer gleiche Größe auch wenn unterschiedlich)!
dein Script wird bei mir im Opera 6.06 nicht korrekt dargestellt
Opera?<meinung>Wenn ich klassische Musik hören will, gehe ich in die Oper. Wenn ich im Internet recherchiere, nehme ich einen Browser.</meinung>
Hörst du gerne Klassik? nur so ne Frage, mußt nicht wirklich darauf antworten!
Grüße
Palme
-
-
-
-
-