Hallo
Ich möchte gerne eine 3spaltige Webseite mit Kopf darunter eine Navigationsleiste und einem Footer Bereich erstellen. dies ist mir in Verbindung mit Firefox schon ordentlich gelungen. Leider hab ich das Problem, dass der IE alle Spalten falsch anordnet und sich daher das Bild der Webseite komplett verzieht. Habe schon mehrfach über CSS Hack und IE spezielle Befehle gelesen und auch ausprobiert, das Ergebniss ist aber genauso ernüchternd.
Wäre echt schön wenn Ihr mir helfen könntet.
Gruß
Roman
Ich möchte gerne eine 3spaltige Webseite mit Kopf darunter eine Navigationsleiste und einem Footer Bereich erstellen. dies ist mir in Verbindung mit Firefox schon ordentlich gelungen. Leider hab ich das Problem, dass der IE alle Spalten falsch anordnet und sich daher das Bild der Webseite komplett verzieht. Habe schon mehrfach über CSS Hack und IE spezielle Befehle gelesen und auch ausprobiert, das Ergebniss ist aber genauso ernüchternd.
Wäre echt schön wenn Ihr mir helfen könntet.
Gruß
Roman
Code:
<html>
<head>
<base href="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="content-language" content="de" />
<meta name="robots" content="index, follow" />
<title></title>
<style type="text/css">
body {background-color:#cdc49d; font:normal 100.00% Helvetica,Arial,sans-serif;}
div#logo {background-color:#8a2338;}
ul#Menue {margin:1px; padding:1px; text-align:center; background-color:#333333;}
ul#Menue li {list-style:none; display:inline; margin:1px; padding:1px;}
ul#Menue a {float:left; width:80px; margin:2px; padding:0px 16px; text-decoration:none; border:1px solid white; border-left-color:#333333; border-top-color:#333333; border-bottom-color:#333333; color:white;}
ul#Menue a:hover {border:1px solid white; border-left-color:#333333; border-top-color:#333333; border-bottom-color:#333333; color:white; background-color:gray;}
ul#Menue div {clear:left;}
#linie {border:1px solid #333333; width:800px; position:relative; left:-8px;}
#linie2 {border:1px solid #333333;}
#links {float:left; width:165px; padding:10px;}
#mitte {float:left; width:665px; padding:10px; position:relative; top:20px; bottom:30px;}
#rechts {padding:10px; margin-left:830px; background:#ffffff;}
#links, #mitte, #rechts {padding-bottom:37500px; margin-bottom:-37500px;}
#footer {text-align:center;}
#container {overflow:hidden;}
div#back1 {background-image: url(textoben.jpg); background-repeat:no-repeat; height:75px;}
div#back2 {background-image: url(textmitte.jpg);background-repeat:repeat-y;}
div#back3 {background-image: url(textunten.jpg); background-repeat:no-repeat; height:75px;}
#navi {background-image: url(linkb.jpg); background-repeat: no-repeat;}
div#navi a {text-decoration:none; color:black;}
div#navi a:hover { background-image: url(linka.jpg);color:#8a2338; background-repeat: no-repeat;text-decoration:none;}
</style>
<!--[if lte IE 7]>
<style type="text/css">
body {word-wrap:break-word;}
#rechts {float:left; display:inline; margin-left:0;}
#container {display:inline-block;}
</style>
<![endif]-->
</head>
<body>
<div id="header">
<div id="logo"> /div>
<div id="menue">
<ul id="Menue">
<li><a href="/seite1.html">Menue1</a></li>
<li><a href="/seite2.html">Menue2</a></li>
<li><a href="/seite3.html">Menue3</a></li>
<li><a href="/seite4.html">Menue4</a></li>
<li><a href="/seite5.html">Impressum</a></li><div></div>
</ul>
</div>
</div>
<div id="container">
<div id="links">
<div id="linie"></div>
</div>
<div id="mitte">
</div>
<div id="rechts">
</div>
</div>
<div id="footer">
<div>
<div id="linie2"></div>
</div>
</div>
</body>
</html>