Seite 1 von 1
CSS position: relative
Verfasst: 25.02.2011, 17:05
von _player
Hallo Leute,
ich sitze jetzt schon ein paar Stunden und suche nach einer Lösung für folgendes Problem:
Ich habe ein DIV (Übergeordnet) in dem drei weitere gleichgroße DIV (height: 200px) liegen.
Diese drei DIV sollen alle übereinander liegen. Das tun diese auch! Ich mache es mit
position: relative.
Allerdings wird das übergeordnete DIV auf 600px aufgerissen, obwohl die Höhe insgesamt ja nur 200px sein soll. Das möchte ich gern verhindern!!!
Habe den Quellcode mal raus genommen zum testen und mit border versehen damit man es besser sieht.
Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
#eltern-div{
border: 1px solid #0261ae;
}
#div1{
height: 200px;
border: 1px solid #0261ae;
}
#div2{
position: relative;
top: -200px;
height: 200px;
left: 0px;
border: 1px solid #0261ae;
}
#div3{
position: relative;
top: -400px;
height: 200px;
left: 0px;
border: 1px solid #0261ae;
}
</style>
</head>
<body>
<div id="eltern-div">
<div id="div1">DIV 1</div>
<div id="div2">DIV 2</div>
<div id="div3">DIV 3</div>
</div>
</body>
</html>
Wenn jemand helfen kann bitte posten. Danke
Verfasst: 25.02.2011, 17:36
von celtic
#eltern-div{
height: 200px;
border: 1px solid #0261ae;
}
meinst Du so?
Verfasst: 26.02.2011, 08:28
von _player
celtic hat geschrieben:#eltern-div{
height: 200px;
border: 1px solid #0261ae;
}
meinst Du so?
Nein!
Alle drei DIV haben eine Höhe von 200px und liegen übereinander!
Trotzdem wird das Eltern-DIV automatisch 600px groß, hat also einen "Leerraum" von genau 400px.
Das Beispiel was ich gepostet habe kann man auch so testen, dann sieht man es genau!
Verfasst: 26.02.2011, 10:05
von Tapetum
Dass das Etlern-DIV 600px hoch wird ist normal, da im Rendering die Höhenberechnung vor der relativen Positionierung erfolgt. Was celtic meint war:
Wenn deine Kinder alle 200px hoch sind, warum gibst du dem Eltern-DIV dann nicht auch eine feste Höhe von 200px?
Verfasst: 26.02.2011, 10:08
von xoni
Code: Alles auswählen
<style type="text/css">
#eltern-div{
height: 200px;
position: absolute;
border: 1px solid #0261ae;
}
#div1{
position: relative;
height: 200px;
border: 1px solid #0261ae;
}
#div2{
position: relative;
top: -200px;
height: 200px;
left: 0px;
border: 1px solid #0261ae;
}
#div3{
position: relative;
top: -400px;
height: 200px;
left: 0px;
border: 1px solid #0261ae;
}
</style>
also, so gehts bei mir.
Wenn Du mit position relative/absolute arbeitest,
musst Du die Cascade beachten, also die Elternelemente
ebenfalls mit absolute/relative versorgen.
https://www.css4you.de/position.html
Verfasst: 26.02.2011, 11:07
von _player
xoni hat geschrieben:also, so gehts bei mir.
Wenn Du mit position relative/absolute arbeitest,
musst Du die Cascade beachten, also die Elternelemente
ebenfalls mit absolute/relative versorgen.
https://www.css4you.de/position.html
Bei dir geht es weil du dem Eltern-DIV auch eine Feste Größe zuweist. Das will ich nicht, denn...
Tapetum hat geschrieben:Dass das Etlern-DIV 600px hoch wird ist normal, da im Rendering die Höhenberechnung vor der relativen Positionierung erfolgt. Was celtic meint war:
Wenn deine Kinder alle 200px hoch sind, warum gibst du dem Eltern-DIV dann nicht auch eine feste Höhe von 200px?
Im Eltern-DIV folgt nach den drei 200px DIV noch Inhalt!
Deshalb kann ich dem Eltern-DIV keine feste Höhe zuweisen.
Beispiel:
Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
#eltern-div{
border: 1px solid #0261ae;
}
#div1{
position: relative;
height: 200px;
border: 1px solid #0261ae;
}
#div2{
position: relative;
top: -200px;
height: 200px;
left: 0px;
border: 1px solid #0261ae;
}
#div3{
position: relative;
top: -400px;
height: 200px;
left: 0px;
border: 1px solid #0261ae;
}
</style>
</head>
<body>
<div id="eltern-div">
<div id="div1">DIV 1</div>
<div id="div2">DIV 2</div>
<div id="div3">DIV 3</div>
Hier soll ja auch noch Inhalt folgen! Deshalb kann ich dem Eltern-DIV keine feste Höhe zuweisen.
</div>
</body>
</html>
Hier steht nun aber der weitere Inhalt eben die 400px weiter unten und es gibt eine 400px Lücke.
Verfasst: 26.02.2011, 11:46
von Tapetum
Dann baust du halt noch ein DIV drumherum um DIV 1-3 zu wrappen. Machs dir doch nicht schwerer als nötig!
Verfasst: 26.02.2011, 12:55
von _player
Tapetum hat geschrieben:Dann baust du halt noch ein DIV drumherum um DIV 1-3 zu wrappen. Machs dir doch nicht schwerer als nötig!
Oh je, manchmal sieht man den Wald vor lauter Bäumen nicht... Danke das ist natürlich die
Lösung
Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
#eltern-div{
border: 1px solid #0261ae;
}
#wrapper-div{
height: 200px;
}
#div1{
position: relative;
height: 200px;
border: 1px solid #0261ae;
}
#div2{
position: relative;
top: -200px;
height: 200px;
left: 0px;
border: 1px solid #0261ae;
}
#div3{
position: relative;
top: -400px;
height: 200px;
left: 0px;
border: 1px solid #0261ae;
}
</style>
</head>
<body>
<div id="eltern-div">
<div id="wrapper-div">
<div id="div1">DIV 1</div>
<div id="div2">DIV 2</div>
<div id="div3">DIV 3</div>
</div>
Hier soll ja auch noch Inhalt folgen! Deshalb kann ich dem Eltern-DIV keine feste Höhe zuweisen.
</div>
</body>
</html>
