Hallo zusammen,
nun ist es soweit, ich hänge fest .
Ich soll mir 3 "Layouts" ausdenken in denen ich DIVs verschachteln soll.
Nun habe ich mir wohl etwas zu schweres ausgedacht .
Ich wollte eine umgedrehte Pyramide mit DIVs bauen in denen jeweils 2 weitere DIVs ineinander verschachtelt sind.
Das habe ich sogar hinbekommen .
Der innerste DIV (im Code .container8) reagiert aber leider auf keine vertikalen Margin-Befehle.
Ich möchte den schön mittig haben, wie der DIV in dem er steckt (.container7).
Hab alle möglichen Schreibweisen versucht, sogar mit padding bei Container7 habe ich es versucht (da sprengt es das Layout).
Ich weiß nicht mehr weiter .
Anbei der Code:
nun ist es soweit, ich hänge fest .
Ich soll mir 3 "Layouts" ausdenken in denen ich DIVs verschachteln soll.
Nun habe ich mir wohl etwas zu schweres ausgedacht .
Ich wollte eine umgedrehte Pyramide mit DIVs bauen in denen jeweils 2 weitere DIVs ineinander verschachtelt sind.
Das habe ich sogar hinbekommen .
Der innerste DIV (im Code .container8) reagiert aber leider auf keine vertikalen Margin-Befehle.
Ich möchte den schön mittig haben, wie der DIV in dem er steckt (.container7).
Hab alle möglichen Schreibweisen versucht, sogar mit padding bei Container7 habe ich es versucht (da sprengt es das Layout).
Ich weiß nicht mehr weiter .
Anbei der Code:
Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Aufgabe 01</title>
<style type="text/css">
#wrapper{
width: 700px;
height: 400px;
margin: 0 auto;
}
/* Oben - Links - Blau */
#container1{
background: blue;
width: 200px;
height: 100px;
margin-right: 50px;
float: left;
}
/* Oben - Mitte - Grün */
#container2{
background: green;
width: 200px;
height: 100px;
float: left;
}
/* Oben - Rechts - Gelb */
#container3{
background: yellow;
width: 200px;
height: 100px;
margin-left: 50px;
float: left;
}
/* Mitte - Links - Grau */
#container4{
background: gray;
width: 200px;
height: 100px;
margin: 50px 25px 50px 125px;
float: left;
}
/* Mitte - Rechts - Gold */
#container5{
background: gold;
width: 200px;
height: 100px;
margin: 50px 125px 50px 25px;
float: left;
}
/* Unten - Links - Violet */
#container6{
background: blueviolet;
width: 200px;
height: 100px;
margin: 0 250px;
float: left;
}
/* Überall - Innen - Dunkelrot */
.container7{
background: darkred;
width: 100px;
height: 50px;
margin: 25px auto;
}
/* Überall - Innen - Schwarz */
.container8{
background: black;
width: 50px;
height: 30px;
margin-top: 10px;
margin-left: 25px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="container1">
<div class="container7">
<div class="container8"></div>
</div><!-- Ende container7 -->
</div><!-- Ende container1 -->
<div id="container2">
<div class="container7">
<div class="container8"></div>
</div><!-- Ende container7 -->
</div><!-- Ende container2 -->
<div id="container3">
<div class="container7">
<div class="container8"></div>
</div><!-- Ende container7 -->
</div><!-- Ende container3 -->
<div id="container4">
<div class="container7">
<div class="container8"></div>
</div><!-- Ende container7 -->
</div><!-- Ende container4 -->
<div id="container5">
<div class="container7">
<div class="container8"></div>
</div><!-- Ende container7 -->
</div><!-- Ende container5 -->
<div id="container6">
<div class="container7">
<div class="container8"></div>
</div><!-- Ende container7 -->
</div><!-- Ende container6 -->
</div><!-- Ende wrapper -->
</body>
</html>