Hallo, ich bereite mich auf eine Prüfung vor.
Jetzt habe ich eine Aufgabe bei der eine graue Box (Breite 200px, Höhe, 120 px), wobei die linke obere Ecke jeweils 40px vom linken und vom oberen Rand des Browserfensters entfernt sein soll. Außerdem soll in der grauen Box zwei weitere weißen Boxen enthalten sein. Die weißen Boxen sind jeweils 40px hoch und breit. Die erste weiße Box ist jeweils 40px vom oberen und linken Rand der grauen Box entfernt. Die zweite weiße Box ist vom oberen Rand der grauen Box 40px und vom linken Rand der grauen Box 120 px entfernt.
Positionierung, Ausdehnung und Farbgebung (white,gray) aller Boxen sollen in der CSS-Datei festgelegt werden. Zur Realisierung der drei Boxen sind div-Elemente zu verwenden.
Jetzt zu meinem Problem:
Die graue Box und die zweite weiße Box bekomme ich hin, aber irgendwie klappt das nicht mit der ersten weißen Box.
Hier mein HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head><title>Boxen</title><meta name="author" content="Maria"><meta name="editor" content="html-editor phase 5">
<link rel="stylesheet" type="text/css" href="boxes.css"/></head>
<body>
<div id="graybox";> graue box
<div id="whitebox1";> weiße box 1 </div>
<div id="whitebox2";> weiße box 2 </div> </div>
</body></html>Hier meine CSS-Datei:
<style type = "text/css"></style>
#whitebox1 {
background-color:#FFFFFF;
width: 40px;
height: 40px;
position: absolute;
top: 40px;
left: 40px;
z-index: 3;
}
#whitebox2,whitebox1 {
background-color:#FFFFFF;
width: 40px;
height: 40px;
position: absolute;
top: 40px;
left: 120px;
z-index: 2;
}
#graybox {
background-color:#BEBEBE;
width: 200px;
height: 120px;
position: absolute;
top: 40px;
left: 40px;
z-index: 1;
}Kann mir jemand sagen wo mein Fehler ist?
Vielen Dank im Voraus.
Liebe Grüße
riju
