nicht angemeldet
Hallo zusammen,
ich bin schon seit ein paar Tagen richtig am verzweifeln.
Habe den Header-Bereich, welcher im HTML-Code ziemlich am Ende steht, per CSS an die richtige stelle gerückt. Nämlich ganz oben, wo der Header hingehört. Dies habe ich mittels CSS position : absolute; erreicht.
Funktioniert in allen Browsern (IE 7, IE 8, aktuelle und ältere Versionen von FF, Opera, Safari) wunderbar.
Nur der IE 6 spielt mal wieder nicht mit. Hier wird der Header-Bereich nicht angezeigt, sondern durch sein Eltern-Element verdeckt.
Wieso ich den Header-Bereich nicht einfach im HTML-Code an oberster Stelle platziere? Aus SEO-Gründen...
Nachstehend HTML sowie CSS Code.
Ich hoffe jemand kann mir Tipps geben, wie ich es schaffe, dass der Header-Bereich auch im IE 6 angezeigt wird. Oder vielleicht fällt jemandem sofort auf wo der Fehler liegt? Ich bin für jeden Hilfe, Hinweis, Anregungen, Tipps sehr dankbar.
<body>
<div id="wrapper">
<div id="content_right">
<h1></h1>
</div>
<div id="content_left">
<p>content_left</p>
</div>
<div id="header">
<img src="src/gfx/bg_header1.png" usemap="#logo" />
<map name="logo">
<area shape="rect" coords="24,31,355,107" href="/" />
</map>
<div id="servicenavi">
<ul>
<li><a href="">Kontakt</a></li>
<li><a href="">Impressum</a></li>
<li><a href="">Sitemap</a></li>
</ul>
</div>
<div id="topnavi">
<ul>
<li><a href="/" title="Startseite">Startseite</a></li>
</ul>
</div>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
</body>
@import "servicenavi.css";
@import "topnavi.css";
@import "style.css";
@import "font_m.css";
* {
margin : 0;
padding : 0;
}
#wrapper {
position : relative;
width : 900px;
margin : 0 auto;
}
#content_right {
width : 650px;
margin-top : 150px;
float : right;
}
#content_left {
width : 250px;
margin-top : 150px;
float : left;
}
#header {
position : absolute;
width : 100%;
height : 150px;
top : 0;
left : 0;
}
#servicenavi {
position : absolute;
top : 0;
right : 0;
}
#topnavi {
position : absolute;
bottom : 0;
right : 0;
}