Bernie: Doctype zerstört Seitenlayout

Beitrag lesen

SELF-Forum

Doctype zerstört Seitenlayout

Bernie
– Informationen zu den Bewertungsregeln

Hy, ich benutze den Internet Explorer 9, das einmal vorweg.
Wenn ich meine Seite schreibe, füge ich den Doctype immer erst am Ende ein, daher ist mir der Fehler auch erst nach Fertigstellung aufgefallen (werde das ab jetzt wohl ändern).

Die Seite schaut so aus, wie sie es soll, sobald ich allerdings den Doctype einfüge, ist das Layout vollkommen verschoben (linkslastig).
Dem Internet zufolge liegt das an fehlerhaftem Code. Aber ich wüsste nicht, was ich falsch gemacht habe. Ich hoffe mir kann hier jemand helfen!

  
  
  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
	<head>  
		<title>iPortfolio of Bernhard Blaha</title>  
		<link href="styles/format.css" type="text/css" rel="stylesheet" />  
	</head>  
	<body>  
		<div id="page">  
		<div id="header"><span class="login">Login</span><span class="headername">Bernhard<br />Blaha</span></div>  
		<div id="menu">  
			<ol>  
				<li><a href="#">About me</a></li>  
				<li><a href="#">Home</a></li>  
				<li class="inactive">Test</li>  
			</ol>  
		</div>  
		<div id="content">Welcome to my iPortfolio Page.<br/>I created this page to show my work to other people.</div>  
		<div id="footer"></div>  
		</div>  
<div id="copyright">&copy; by Bernhard Blaha</div>  
	</body>  
</html>

Und hier noch die CSS:

  
body{  
	background-color:#787878;  
	text-align:center;  
	font-family:Verdana,san-serif;  
	color:#666666;  
}  
  
  
  
.login{  
	display:block;  
	float:left;  
}  
.headername{  
	display:block;  
	text-align:right;  
	color:#FFFFFF;  
	font-size:4em;  
	margin-right:50px;  
}  
.inactive{  
	padding-top:15px;  
	color:#666666;  
}  
  
  
div#page{  
	margin-top:10%;  
	width:800px;  
	height:500px;  
	text-align:left;  
	font-size:0.8em;  
	color:#666666;  
}  
div#header{  
	background-image:url(../images/bannerlicht.jpg);  
	width:800px;  
	height:175px;  
	padding:20px;  
}  
div#menu{  
	background-image:url(../images/button.jpg);  
	height:50px;  
	vertical-align:middle;  
	color:#FFFFFF;  
	font-weight:bold;  
}  
div#menu li{  
	text-align:center;  
	float:left;  
	width:160px;  
	height:50px;  
}  
div#menu a:link{  
	text-decoration:none;  
	color:#FFFFFF;  
	display:block;  
	width:160px;  
	height:50px;  
	padding-top:15px;  
}  
div#menu a:hover{  
	text-decoration:none;  
	color:#FFFFFF;  
	display:block;  
	background-image:url(../images/buttonhover.jpg);  
	width:160px;  
	height:50px;  
	padding-top:15px;  
}  
  
div#content{  
	background-color:#FFFFFF;  
	padding:15px;  
	height:250px;  
	overflow:auto;  
}  
div#footer{  
	background-image:url(../images/footer.jpg);  
	height:25px;  
}  
div#copyright{  
	font-size:0.6em;  
}

Besten Dank im Vorraus,
Bernie

Beitrag melden
–
Informationen zu den Bewertungsregeln