Hallo,
Ich habe ein Problem mit meiner Homepage. Ich habe erst vor wenigen Tagen angefangen mich mit CSS zu beschäftigen, da ich eine Homepage programmieren möchte, auf der ich meine Bilder zur Schau stellen kann.
Zu meinem Problem:
Ich nutze Firefox als Browser und demzufolge habe ich meine Homepage so entworfen, dass sie dort richtig dargestellt wird. Das klappt auch in allen Browsern ausser dem Internet Explorer. Also hab ich einfach per google gesucht und wie es aussieht ist das ein Problem das öfter auftritt, wenn ichs richtig verstanden hab hat das evt. was mit dem "position" zu tun. Wie man dieses problem behebt habe ich allerdings nirgends gefunden, zumindest nicht so dass ich als CSS-Neuling es verstehe. Villeicht bin auch einfach zu doof um dort was zu finden.
Auf jeden Fall wollte ich hier mal fragen ob mir jemand helfen kann, da ich nicht verstehe, wie ich die Hacks (?) richtig anwende.
Hier mein Quelltext der HTML-Datei:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Digitale Fotografie</title>
<link rel="stylesheet" type="text/css" href="style_layout.css" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<div id="gesamt">
<div id="header" align="center">
<img src="banner_1_800x177_rahmen.jpg" alt="Banner" />
</div>
<div id="bar">
</div>
<div id="bodyblock" align="right">
<div id="navigation" align="left">
<h4 align="center" class="center">Navigation</h4>
<ul>
<li><a onfocus="this.blur()" href="#" class="center">Startseite</a></li>
<li><a onfocus="this.blur()" href="#" class="center">Galerie</a></li>
<li><a onfocus="this.blur()" href="#" class="center">Meine Ausrüstung</a></li>
<li><a onfocus="this.blur()" href="#" class="center">Kontakt</a></li>
<li><a onfocus="this.blur()" href="#" class="center">Links</a></li>
</ul>
</div>
<div id="inhalt">
<h3 align="center">Bla</h3>
<p>Text</p>
<br />
</div>
</div>
<div id="fusszeile" align="center">
</div>
</div>
</body>
</html>
Und der der CSS-Datei:
body {
margin:35px;
background: #2B547E;
color: #333333;
text-align:center;
padding:0;
}
#gesamt {
text-align:left;
border:1px solid white;
width:798px;
margin:auto;
}
#header {
height:175px;
background:#eeeeee;
color: #333333;
border-bottom: 1px solid white;
}
#bar {
height:15px;
background:#c0c0c0;
color: #333333;
border:solid white;
border-width:0px 0 1px 0;
}
#bodyblock {
position:relative;
background: #dcdcdc;
color: #333333;
width:650px;
padding:0;
}
#navigation {
position:absolute;
background:#dcdcdc;
padding-left: 12px;
margin-right:625px;
color: #333333;
width:145px;
font-family: sans-serif;
font-size: 90%;
text-align: left;
}
#inhalt {
position:relative;
margin-left: 172px;
width:625px;
height:500px;
background: #eeeeee;
color: #333333;
border:solid white;
border-width:0 0 0 1px;
text-align:left;
}
#fusszeile {
height:25px;
background:#c0c0c0;
color: #333333;
border:solid white;
border-width:1px 0 0 0;
margin:0;
}
a:link {
color: maroon;
text-decoration:none;
}
a:visited {
color: black;
text-decoration:none;
}
a:hover {
color: black;
background: #736F6E;
text-decoration:none;
}
a:active {
color: silver;
}
h3, p {
margin:0;
padding:15px;
}
h4 {
margin:0;
padding: 15px 0;
}
Ich hoffe, der Quelltext ist euch übersichtlich genug. Falls ich irgendwo Fehler gemacht hab fänd ich klasse, wenn ihr mich darauf hinweisen würdet.
Zum Schluss noch zwei screenshots, wie es aussehen sollte, und wie es im Mozilla aussieht:
1: Richtiges Aussehen:
http://www.abload.de/image.php?img=homepage_mozilla0gp.jpg
2: Im IE:
http://www.abload.de/image.php?img=homepage_ie04b.jpg
Gruß Matze