Probleme mit margin-Top-anweisung

**JohnReinert** · 11.02.2012, 00:25

HTML-Code:

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>.de</title>
    <link rel="stylesheet" type="text/css" href="styles3.css" />
	</head>    
    <body>
		<div id="container"> 
			<div id="content">
				<div id="kopf">
					<div id="kopflogo">
						<div id="logo"></div>
						<div id="logo1"></div>
						<div id="claim">de</div>
				</div>
				<div id="menu">
					<ul>
						<li>
							<a href="index3.html">home</a>
						</li> 
						<li>
							<a href="uns.html">&uuml;ber uns</a>
						</li>
						<li>
							<a href="portfolio.html">portfolio</a>
						</li>
						<li>
							<a href="kontakt.html">kontakt</a>
						</li>
					</ul>
				</div>
				</div>
				<div id="haupt">
					<div id="haupt-l"></div>
					<div id="haupt-c">
						<h1>Home</h1>
						<p>
							Es ist nicht genug zu wissen - man muss es auch anwenden.
						</p>
						<p>
							Es ist genug zu wollen - man muss es auch tun.
						</p>
						<p>
							Johann Wolfgang von Goethe
						</p>
					</div>
					<div id="haupt-r">
						haupt-r
					</div>
				</div>
				<div id="footer">
					&copy; 
				</div>
			</div>
		</div>
	</body>
</html>

Code:

*{
	margin: 0px auto;
	padding: 0px;
	border: none;
	outline: 0;
	font-size: 100%;
	background: transparent;
}

html{
	background: #b1d3e7;
}

#container, #content, #haupt{
	background: #b1d3e7;
}

#logo, #logo1{
	background: #ffffff;
}

#claim{
	color: #ffffff;
}

#haupt, #haupt-l, #haupt-c, #haupt-l, #footer{
	color: #ffffff;
}

#menu, #menu a, #menu a:visited, #menu a:active{
	color: #ffffff;
}

body {  
	font-family: georgia, serif; 
	font-weight: normal;
	font-size: 2ex; 
	margin: 0px; 
	padding: 0px;
	width: 100%;
	height: 100%;
	margin: 0px auto;
	line-height: 1;
}


#container{
	position: relative;
	display: block;
	top: 50px;
	height: 550px;
	width: 940px;
}

#content{
	position: relative;
	width: 800px;
	height: 540px;
	border: 1px solid #206080;
}

#kopf{
	position: relative;
	margin: 0px;
	width: 796px;
	height: 80px;
}

#haupt{
	position: relative;
	margin: 0px;
	width: 796px;
	height: 430px;
 	clear: both;
}

#haupt-l{
	margin: 0px;
	float: left;
	width: 140px;
	height: 430px;
	text-align: left;
	border-right: 1px solid #206080;
}

#haupt-c{
	margin: 0px;
	margin-left: 20px;
	float: left;
	width: 500px;
	height: 430px;
	text-align: left;
}

#haupt-c h1{
	/*margin-bottom: 25px;*/
	font-size: 24px;
	/*text-transform: uppercase;*/
	letter-spacing: 1px;
	color: #206080;
	text-shadow: 0px 2px 3px #ffffff;
}

#haupt-c p{
	text-transform: none;
	font-size: 18px;
}

#haupt-r{
	margin: 0px;
	float: left;
	width: 130px;
	height: 430px;
	text-align: right;
}

#menu{
	position: relative;
	float: right;
	margin: 0px;
	padding-top: 50px;
	width: 500px;
	height: 80px;
	/* border: 1px solid black; */
}

#menu ul{
	display: inline;
}

#menu li{
	margin: 0px;
	list-style: none;
	float: right;
	text-align: right;
	font-size: 16px;
}

#menu li a{
	display: block;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
}

#menu li a:hover, a:active{
	background: #f0eeec;
}

#footer{
	margin: 0px;
	padding: 0px;
	position: relative;
	width: 796px;
	height: 20px;
	font-size: 18px;
	font-weight: normal;
	text-align: right;
}

#kopflogo{
	margin: 0px;
	width: 150px;
	height: 80px;
	float: left;
}

#logo{
	margin: 0px;
	position: relative;
	width: 100px;
	height: 20px;
	left: 45px;
	top: 5px;
	z-index: 1;
	border: 3px solid #b1d3e7;
	-moz-border-radius:10px; /* Firefox */
	-webkit-border-radius:10px; /* Safari, Chrome */
	-khtml-border-radius:10px; /* Konqueror */
	border-radius:10px; /* CSS3 **/
}

#logo1{
	margin: 0px;
	position: relative;
	width: 130px;
	height: 25px;
	top: -2px;
	left: 32px;
	z-index: 0;
	-moz-border-radius:10px; /* Firefox */
	-webkit-border-radius:10px; /* Safari, Chrome */
	-khtml-border-radius:10px; /* Konqueror */
	border-radius:10px; /* CSS3 **/
	border: none;
}

#claim{
	margin: 0px;
	position: relative;
	height: 23px;
	width: 200px;
	font-size: 22px;
	text-align: center;
	border: none;
}

Ich habe das Problem das ich das Menü im Container unten stehen haben möchte, gelöst habe ich das mit einer margin-Top-Anweisung, doch leider hat das zur Folge das die nachfolgenden Inhalte der nachfolgenden Container diese Verschiebung ebenfalls mitmachen...

Und ja, ich weiß ich habe mich irgendwie im html-Code mit den DIV-Container verschachtelt... Bin für elegantere Lösungen sehr dankbar :-)

**wildmieze** · 11.02.2012, 01:13

Du meinst, daß "Home" und Co. nach unten rutschen, ja?

Das liegt daran, daß bei der Höhe von Containern das padding (oder auch margin) mitgezählt wird (Stichwort: Boxmodell).
Sprich: Aus Deinem 80px-Menü ist durch das Padding quasi ein 130px-Menü geworden, und die nächsten Kästen stehen halt darunter. Um das auszugleichen musst Du bei der Höhe des Menüs das padding entsprechend abziehen, also height:30px statt 80px ..

**JohnReinert** · 11.02.2012, 01:16

Danke Mieze, wie konnte ich das vergessen... habe das erst diese Woche gelesen :schäm:

By the Way, du hast eine sehr gelungene Hp, gefällt mir sehr sehr gut :-)

**wildmieze** · 11.02.2012, 01:20

Kein Problem, passiert mir tatsächlich auch noch manchmal

.. und danke für das Lob

.. jetzt müsste ich nur noch die Zeit haben, mal öfter was zu schreiben *lach*

zur Startseite vom TP

Thema: Probleme mit margin-Top-anweisung

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Probleme mit margin-Top-anweisung

Aktive Benutzer

Aktive Benutzer

Ähnliche Themen

[CSS] margin-top und margin-bottom in einem nicht-gefloateten DIV

[CSS] * {margin: 0px;} => p {margin: 20px;}

[CSS] [CSS/HTML] Probleme mit Body-margin

Probleme mit Top margin

Aktive Benutzer

Aktive Benutzer

Berechtigungen