Nabend Leute,
mir kommt's vor, als würde CSS verrückt spielen. Ich habe folgenden HTML-Code:
und folgendes Stylesheet:
Mein Problem: CSS macht nicht das, was es logischerweise tun sollte. Wie ihr seht ist div.root zentriert mit einer bestimmten Breite. Sein Kindelement div.head hat die selbe Größe, es ist praktisch ganz oben mittig. Nun soll div.head div (da wo die beiden Links sind) ein Kindelement von div.head sein und einen bestimmten Abstand nach links (38px) und oben (27px) haben. Wenn ich also dem div.head div-Element diese margin-Eigenschaft gebe, dann verschiebt sich auch das Elternelement (div.head) nach unten. Das lustige ist, wenn ich beiden Elementen (div.head und div.head div) border: 1px black solid gebe, dann funktionierts shclicht nicht. Erst ab 2px border-width funktionierts und dann wird auch alles so positioniert, wie es sein soll.
Ich hoffe ihr könnt mir folgen, wenn nicht dann speichert den Code einfach und schaut's euch an.
Eigentlich ist das verhalten der div-Container in diesem falle unlogisch, oder?
mir kommt's vor, als würde CSS verrückt spielen. Ich habe folgenden HTML-Code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head xml:lang="de">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="de" />
<meta http-equiv="content-style-type" content="text/css" />
<meta name="language" content="de" />
<meta name="titel" content="Historische Baracke Birkenhain" />
<meta name="distribution" content="global" />
<meta name="audience" content="all, alle" />
<link rel="stylesheet" type="text/css" media="all" title="Stylesheet" href="./css/style.default.css" />
<!--[if lt IE 7]>
<script src="ie7/ie7-standard-p.js" type="text/javascript"></script>
<![endif]-->
<title>Historische Baracke Birkenhain</title>
</head>
<body>
<div class="root">
<div class="head">
<div><a href="#inhalt">zum Inhalt springen</a><a href="http://google.de">Suche</a></div>
<h1>Historische Baracke <span>Birkenhain</span></h1>
<ul>
<li>Start</li>
<li>Geschichte</li>
<li>Wir über uns</li>
<li>Gästebuch</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</div>
</div>
</body>
</html>
Code:
@charset 'utf-8';
@media screen, projection {
* {
margin: 0;
padding: 0;
background: none;
font: 12pt/100% lucida, helvetica, sans-serif;
color: #000;
}
body {
background: url(../img/holz.png);
}
/*################
Ueberschriften
##################*/
h1 {
font: bold 2em fiesta, helvetica, sans-serif;
padding: 10px;
text-indent: -9999px;
}
h1 span {
font: inherit;
color: #8f0100;
}
h2 {
font: 2em palatino, georgia, 'bitstream vera serif', serif;
color: #000;
}
h3 {
font: 1.7em georgia, palatino, 'bitstream vera serif', serif;
color: #600;
}
/*################
Boxen
##################*/
.root {
margin: auto;
width: 766px;
}
.head {
height: 328px;
background: url(../img/kopf-t.png);
}
.head div {
height: 33px;
max-height: 33px;
margin: 27px 0 0 38px;
max-width: 400px;
}
}Mein Problem: CSS macht nicht das, was es logischerweise tun sollte. Wie ihr seht ist div.root zentriert mit einer bestimmten Breite. Sein Kindelement div.head hat die selbe Größe, es ist praktisch ganz oben mittig. Nun soll div.head div (da wo die beiden Links sind) ein Kindelement von div.head sein und einen bestimmten Abstand nach links (38px) und oben (27px) haben. Wenn ich also dem div.head div-Element diese margin-Eigenschaft gebe, dann verschiebt sich auch das Elternelement (div.head) nach unten. Das lustige ist, wenn ich beiden Elementen (div.head und div.head div) border: 1px black solid gebe, dann funktionierts shclicht nicht. Erst ab 2px border-width funktionierts und dann wird auch alles so positioniert, wie es sein soll.
Ich hoffe ihr könnt mir folgen, wenn nicht dann speichert den Code einfach und schaut's euch an.
Eigentlich ist das verhalten der div-Container in diesem falle unlogisch, oder?
