Hallo,
ich hab vor 2 Tagen angefangen mir Html und CSS beizubringen und bin jetzt auf eine Sache gestoßen, die ich nicht so ganz verstehe.
Grundsätzlich will ich auf einer einfachen Website 2 Boxen die innerhalb einer anderen liegen frei mit dem position:absolute Befehl; verschieben. Die beiden Boxen sind "Kinder" von der Contentbox und damit die Boxen beim absoluten positionieren an content ausgerichtet werden, muss content position:relative; oder irgend eine andere Ausrichtung außer der Standardausrichtung bekommen. Soweit richtig?
Was ich jetzt probiert habe, ist beiden Boxen übereinander direkt an der oberen rechten Ecke der content Box zu positionieren. Das funktioniert aber nicht. Außerdem kann ich nur die Navbox mit dem position:absolute Befehl frei bewegen. Die Mainbox kann ich nur vertikal verschieben. Habe ich irgendeinen Fehler gemacht oder warum funktioniert das nicht?
Vielen Dank!
ich hab vor 2 Tagen angefangen mir Html und CSS beizubringen und bin jetzt auf eine Sache gestoßen, die ich nicht so ganz verstehe.
Grundsätzlich will ich auf einer einfachen Website 2 Boxen die innerhalb einer anderen liegen frei mit dem position:absolute Befehl; verschieben. Die beiden Boxen sind "Kinder" von der Contentbox und damit die Boxen beim absoluten positionieren an content ausgerichtet werden, muss content position:relative; oder irgend eine andere Ausrichtung außer der Standardausrichtung bekommen. Soweit richtig?
Was ich jetzt probiert habe, ist beiden Boxen übereinander direkt an der oberen rechten Ecke der content Box zu positionieren. Das funktioniert aber nicht. Außerdem kann ich nur die Navbox mit dem position:absolute Befehl frei bewegen. Die Mainbox kann ich nur vertikal verschieben. Habe ich irgendeinen Fehler gemacht oder warum funktioniert das nicht?
Vielen Dank!
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
</head>
<body>
<div id='content'>
<div class='box' id='mainbox'></div>
<div class='box' id='navbox'></div
</div>
</body>
</html>
Code:
#content {
position:relative;
Border: 2px solid blue;
clear: both;
padding: 0px;
margin: 0px;
height: 400px;
width: 820px;
}
#navbox {
position:absolute;
top: 50px; left: 50px;
width: 130px;
height: 400px;
}
#mainbox {
position:absolute;
top:0px; left:500px;
left: 150px;
width: 400px;
height: 400px;
}
.box {
background-color: white;
opacity: 0.35;
border:1px solid black;
}
Zuletzt bearbeitet:
.
