nicht angemeldet
Problem mit position bzw. Verschachtelung von divs
0 
Gunnar Bittersmann
0 
Der Martin
0
Problem mit position bzw. Verschachtelung von divs
Hallo!
Ich denke mal, dass ich vor einem einfachen Anfängerproblem stehe. Allerdings habe ich auf selfhtml und css4you bereits Einiges gelesen und finde nicht heraus, wo der Fehler liegt ...
Ich habe meinen Quelltext auf das Wesentliche reduziert und hier reinkopiert. Im Quelltext werden die vier div left1, left2, right1 und right2 innerhalb des div main positioniert. Das Problem ist nun, dass der div main bei der Darstellung im Browser nur eine Zeile hoch ist, darunter folgen dann die vier genannten divs. Man beachte die weinrote Hintergrundfarbe und das "Eins" und "Zwei".
Ziel ist ein 750px breiter div, in dem ich tabellenartig mehrere divs positionieren kann, indem ich ihren Abstand zum linken und oberen Rand des übergeordneten div angebe.
Ich möchte nicht weiter mit Tabellen layouten. Einige Bücher zu css sind bereits bestellt, aber noch nicht da. Würde mich freuen, wenn mir solange hier jemand weiterhelfen kann.
Viele Grüße,
Thorsten
<head>
<style type="text/css">
body {
background-color: #333333;
}
#main {
width: 750px;
margin: 5px auto;
background-color: #700515;
position: relative;
}
#left1 {
position:absolute; top:50px; left:50px; width:325px; height:200px;
background-color: white;
}
#left2 {
position:absolute; top:250px; left:50px; width:325px; height:200px;
background-color: yellow;
}
#right1 {
position:absolute; top:50px; left:375px; width:325px; height:200px;
background-color: black;
}
#right2 {
position:absolute; top:250px; left:375px; width:325px; height:200px;
background-color: green;
}
</style>
</head>
<body>
<div id="main">
Eins
<div id="left1"></div>
<div id="left2"></div>
<div id="right1"></div>
<div id="right2"></div>
Zwei
</div>
</body>
-
@@Thorsten S.:
nuqneH
Das Problem ist nun, dass der div main bei der Darstellung im Browser nur eine Zeile hoch ist, darunter folgen dann die vier genannten divs.
Die Floats beeinflussen nicht die Höhe des Containers, es sei denn …
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
@@Gunnar Bittersmann:
nuqneH
Die Floats beeinflussen nicht die Höhe des Containers,
Die Uhrzeit beeinflusst meine Wahrnehmung. Wie komme ich auf Floats?
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hallo Gunnar,
Die Floats beeinflussen nicht die Höhe des Containers,
Die Uhrzeit beeinflusst meine Wahrnehmung. Wie komme ich auf Floats?habe ich mich auch gefragt. Thorstens Posting muss irgendeinen Schlüsselreiz enthalten. :-)
Ciao,
Martin--
... und der FDP-Wähler gibt seine Stimme der FDP.
(Faszinierende Erkenntnis meines Gemeinschaftskunde-Lehrers, 9. Schuljahr)
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
@@Der Martin:
nuqneH
habe ich mich auch gefragt. Thorstens Posting muss irgendeinen Schlüsselreiz enthalten. :-)
„div main […] nur eine Zeile hoch“ – Hätten ja auch Floats sein können.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
-
n'Abend Thorsten,
Ich denke mal, dass ich vor einem einfachen Anfängerproblem stehe.
in gewisser Weise ja.
Im Quelltext werden die vier div left1, left2, right1 und right2 innerhalb des div main positioniert.
Nein, das ist nicht ganz richtig. Sie werden mit Bezug zu div#main positioniert, aber nicht wirklich innerhalb. Dadurch, dass du diese Container absolut positionierst, bilden sie einen eigenständigen Kontext und beeinflussen die Größe ihres Elternelements nicht mehr. Aus der Sicht von CSS sind sie eigentlich keine "richtigen" Kindelemente von div#main mehr; sie werden zumindest nicht mehr von diesem eingeschlossen.
Das Problem ist nun, dass der div main bei der Darstellung im Browser nur eine Zeile hoch ist, darunter folgen dann die vier genannten divs. Man beachte die weinrote Hintergrundfarbe und das "Eins" und "Zwei".
Genau. Der Container #main hat außer dem Text "Eins Zwei" keinen weiteren Inhalt mehr, daher fällt er bis auf eine Zeile zusammen.
Ein guter Rat: Verzichte soweit wie möglich auf absolute Positionierung; schau dir stattdessen eher mal an, was man mit display:inline-block anstellen kann, oder mit float.
Ich möchte nicht weiter mit Tabellen layouten.
Deinem Ansatz nach zu urteilen möchtest du schon ...
Ciao,
Martin--
Die beste Informationsquelle sind Leute, die jemand anderem versprochen haben, nichts weiterzuerzählen.
(alte Journalistenweisheit)
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:( -
Danke schonmal an Martin und Gunnar! Vor allem habe ich mir jetzt mal das floaten näher angesehen und festgestellt, dass das gar nicht so schwirig zu verstehen ist und man so auf viele absolute Positionierungen verzichten kann.
Andererseits ist mein Problem aber noch nicht ganz gelöst, ich verstehe einfach nicht, wann ein Element als Kindelement betrachtet wird - das Elternelement also erst unter dem Kindelement endet - und wann nicht. Wieso ist bei folgendem Quelltext die ul#navigation unterhalb des #container1? Im HTML-Teil wird #navigation von #container1 umschlossen ...
<head>
<style type="text/css">
body {
background-color: #333333;
}#container1 {
width: 750px;
margin: 5px auto 0px auto;
border: 2px solid green;
}ul#navigation {
text-align: center;
font-variant: small-caps;
margin: 0px 15px 0px 250px;
padding: 0px;
background-color: black;
}ul#navigation li {
list-style-type: none;
margin: 0px;
padding: 0px;
float: left;
}ul#navigation a:link, ul#navigation a:visited, ul#navigation a:active {
text-decoration: none;
padding: 0px 10px 0px 10px;
background-color: black;
color:white;
}ul#navigation a:hover {
text-decoration: none;
padding: 0px 10px 0px 10px;
background-color: white;
color: black;
}</style>
</head>
<body>
<div id="container1">
<ul id="navigation">
<li><a href="nochnichts.html">aktuell</a></li>
<li><a href="nochnichts.html">eulenbiss</a></li>
<li><a href="nochnichts.html">hörproben</a></li>
<li><a href="nochnichts.html">bilder</a></li>
<li><a href="nochnichts.html">kontakt</a></li>
<li><a href="nochnichts.html">links</a></li>
</ul></div>
</body>
-
Hi,
ich verstehe einfach nicht, wann ein Element als Kindelement betrachtet wird
Wenn es im HTML bzw. im DOM ein solches *ist*.
- das Elternelement also erst unter dem Kindelement endet
*Das* hat wiederum mit der Formatierung zu tun.
Wieso ist bei folgendem Quelltext die ul#navigation unterhalb des #container1?
Ist sie nicht - sie ist *im* Container, aber sie ragt aus diesem heraus.
Und eben das ist der Effekt, den Gunnar ansprach.MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Ergänzung:
Dieser Effekt ergibt sich auch bei absoluter Positionierung.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Positionierung</title> <style type="text/css"> div { width: 150px; height: 150px; background-color: red; position: relative;} p { background-color: blue; position: absolute; top: 200px; left: 200px; width: 200px;} </style> </head> <body> <div> <p>Absatz</p> </div> </body> </html>Der Absatz ist logisch ein Kind des roten Div-Elements, egal wo er sich gestalterisch befindet.
Matthias
--
1/z ist kein Blatt Papier.
-