Hallo,
ich versuche gerade ein paar DIV-Container zu positionieren. Dabei habe ich aber ein Problem:
Wie kann ich den Anfang eines DIV Bereichs von dem Ende eines anderen Div Bereichs abhängig machen? Die 2 Bereich sollen dann übereinander sein. Und der Obere hat eine Dynamische höhe.
Der COde dazu sieht so aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="template_css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="poslogin">poslogin</div>
<div id="altmenue">altmenue</div>
<div id="pospath">pospath</div>
<div id="obenuser1">obenuser1</div>
<div id="obenuser2">obenuser2<br>asdasdsd</div>
<div id="links">Links</div>
<div id="hauptteil">hauptteil<br>das muss man noch an den oberen<br>div ausrichten</div>
<div id="mitterechts">mitterechtsssss</div>
<div id="rechts">rechts</div>
<div id="untenuser1">untenuser1</div>
<div id="untenuser2">untenuser2<br>asdasdsd</div>
<div id="unten">unten</div>
</body>
</html>
Und die CSS Datei:
/*Formatierung für die DIV Kontainer*/
#poslogin {
position: absolute;
left: 520px;
top: 50px;
width: 400px;
height:60px;
background-color: blue;
}
#altmenue {
position: absolute;
left: 120px;
top: 110px;
width: 800px;
height:40px;
background-color: green;
}
#pospath {
position: absolute;
left: 120px;
top: 150px;
width: 800px;
height:30px;
background-color: blue;
}
#obenuser1 {
position: absolute;
left: 120px;
top: 180px;
width: 250px;
background-color: green;
}
#obenuser2 {
position: absolute;
left: 370px;
top: 180px;
width: 250px;
background-color: green;
}
#links {
position: absolute;
left:0px;
width: 120px;
top: 230px;
background-color: #000;
}
#hauptteil{
position: absolute;
left: 120px;
width: 500px;
background-color: gray;
}
#mitterechts {
position: absolute;
left: 620px;
width: 150px;
top: 180px;
background-color: red;
}
#rechts {
position: absolute;
left: 770px;
width: 150px;
top: 180px;
background-color: yellow;
}
#untenuser1 {
position: absolute;
left: 120px;
width: 250px;
bottom:25px;
background-color: red;
}
#untenuser2 {
position: absolute;
left: 370px;
width: 250px;
bottom:25px;
background-color: blue;
}
#unten {
position: absolute;
left: 0px;
width: 920px;
background-color: blue;
height:20px;
bottom:5px;
}
/*Box Border und Abstände werden in einer Zeile mitgegeben*/
#rechts,#mitterechts,#hauptteil,#links{
border: 0px solid #564b47;
padding:0px;
margin:0px;
}
/*Die Abstände vom Box-Rand zum Text werden über padding gersteuert. Sie werden dem p oder dem h1 tag mitgegeben.*/
p,h1, h3, pre {
padding: 5px 15px;
margin: 0px;
}
Vielen Dank
Wortspiel