Frage stellen
ich übe grade.....
ich habe in einem container zwei weitere platziert. den ersten container im html-code habe ich rechts gefloatet. der zweite container ist dann wie gewünscht nach oben bzw. neben den ersten gerutscht.
wenn ich dem zweiten container nun mit margin einen aussenabstand zum elterncontainer zuweisen will, ignoriert der anscheinend seine zugehörigkeit zum elternhaus. er erkennt erst die "großeltern".
woran liegt das?
habe zufällig herausgefunden, dass ich ihm (dem ignoranten) mit "position: absolute" zeigen kann, wo er hingehört.
aber den zusammenhang versteh ich nicht.
kann mir das jemend vielleicht kurz erklären? das wär sehr nett..
thanx!
der html-code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>CSSBoxmania * Ü:bung 01a * CSS fü:r Einsteiger * Galileo Design </title>
<meta name="description" content="CSS für Einsteiger im Galileo Design Verlag" />
<meta name="keywords" content="CSS, xhtml, webstandards, html" />
<link href="übung_01.css" rel="stylesheet" type="text/css" />
</head>
<body id="home">
<div id="wrapper">
<div id="header">header</div>
<div id="nav">
<ul>
<li class="navhome"><a href="#">home</a></li>
<li class="navteam"><a href="#">team</a></li>
<li class="navprodukte"><a href="#">produkte</a></li>
<li class="navservice"><a href="#">service</a></li>
<li class="navkontakt"><a href="#">kontakt</a></li>
</ul>
</div> <!-- END nav -->
<div id="content">
<div id="menu">
<ul>
<li>Obst
<ul>
<li><a href="#">Ä:pfel</a></li>
<li><a href="#">Birnen</a></li>
<li><a href="#">Kirschen</a></li>
</ul>
</li>
<li>Gemüse
<ul>
<li><a href="#">Gurken</a></li>
<li><a href="#">Spinat</a></li>
<li><a href="#">Tomaten</a></li>
</li>
</ul>
</div> <!-- END menu -->
<div id="maintext">
<p>lorem ipsum lorem ipsum, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen? Aber wer hat irgend ein Recht, einen Menschen zu tadeln, der die Entsche blblablab oder wünscht, nur, </p>
</div> <!-- END maintext -->
<h6 class="defloat"></h6>
</div> <!-- END content -->
<div id="footer">footer</div>
</div> <!-- END wrapper -->
</body>
</html>
CSS-Code:
/* CSS übung_01.html */
* {margin: 0px; padding: 0px; border:0px;}
html {height: 100.1%;
font-size: 62.5%;
}
body {text-align: center;
font-family: Verdana, sans serif;
font-size: 1.2em;
line-height:1.8em;
color: #333333;
}
h6.defloat {clear: both;
height: 0px;
}
div#wrapper {width: 760px; margin: 20px auto;
text-align: left;
}
div#header {background: #cccccc;
}
div#nav {background: #cccc11;
text-decoration: none;
}
div#nav ul {list-style-type: none;
}
div#nav li {display: inline;}
div#content {background: #ffc1c1;}
div#menu {background: #f5f5f5;
float: right;
width: 120px;
padding: 20px;
margin: 5px;
}
div#menu ul {list-style-type: none;}
div#menu ul ul {padding-left: 10px;}
div#maintext {background: #ffff11;
width: 550px;
margin: 5px;
position: absolute;
}
div#footer {background: #999999;
border: dashed 1px #333333;
text-align: center;
color: #ffffff;
padding: 4px 0px 6px 0px;
margin-top: 5px;
}
