Alex Hauer: Problem mit DIV-Gestaltung

Beitrag lesen

SELF-Forum

Problem mit DIV-Gestaltung

Alex Hauer
– Informationen zu den Bewertungsregeln

Hallo,

ich muss eine Seite gestalten, an deren oberster Stelle ein grafisches, vertikales Menü sitzt. Menü + Content bilden dabei einen Block von genau 950px Breite, der zentriert in der Mitte des Bildschirms erscheint. Die einzelnen Links im Menü besitzen einen Hintergrund, der sich aber, egal wie groß der Bildschirm ist, bis zum jeweils linken und rechten Rand fortsetzen soll.

Ich habe versucht dieses Problem folgendermaßen zu lösen:

Ein absolut positionierter DIV - Layer mit dem gleichen Hintergrund wie die einzelnen Menülinks sitzt hinter dem eigentlichen Menü mit einer Breite von 100%.

Jetzt taucht aber folgendes Problem auf:
Ohne diesen Layer ist die oben beschriebene Contentbox sowohl im FF als auch im IE7 perfekt zentriert. Mit dem Layer passiert aber Folgendes:

Im FF wird alles so dargestellt wie gewünscht.

Im Internet Explorer bekomme ich einen Abstand von der linken Seite und muss erstmal nach rechts scrollen bis ich die Contentbox wieder komplett sehe, dort ist der Inhalt dann allerdings auch zu weit links.

CSS:

  
#headerback {  
    position: absolute;  
    top: 82px;  
    width: 100%;  
    height: 36px;  
    background-image:url(images/nav_verlauf-hintergrund.jpg);  
    z-index: 0;  
}  
  
#root {  
    position: relative;  
    width: 950px;  
    margin: auto;  
    text-align: left;  
}  
  
#header {  
    position: relative;  
    width: 750px;  
    height: 36px;  
    margin-top: 82px;  
    float: left;  
    z-index: 2;  
}  
  
#content {  
    position: relative;  
    width: 750px;  
    height: 698px;  
    float: left;  
}  
  
#header_side {  
    position: relative;  
    width: 100px;  
    height: 36px;  
    margin-top: 82px;  
    float: left;  
    background-image:url(images/nav_verlauf-hintergrund.jpg);  
}  
  
#side {  
    position: relative;  
    width: 100px;  
    float: left;  
}

HTML:

  
<div id="headerback">&nbsp;</div>  
  
 <div id="root">  
  
     <div id="header_side">  
         &nbsp;  
     </div>  
  
     <div id="header">  
  
      <ul class="topmenu">  
       <li class="topmenuentry" style="width: 75px;"><a href="?page_id=1" class="menu_sitemap">&nbsp;</a></li>  
       <li class="topmenuentry"><a href="?page_id=0" class="menu_home">&nbsp;</a></li>  
       <li class="topmenuentry"><a href="?page_id=6" class="menu_help">&nbsp;</a></li>  
       <li class="topmenuentry"><a href="?page_id=8" class="menu_service">&nbsp;</a></li>  
       <li class="topmenuentry"><a href="?page_id=10" class="menu_registrieren">&nbsp;</a></li>  
       <li class="topmenuentry"><a href="?page_id=12" class="menu_kontakt">&nbsp;</a></li>  
       <li class="topmenuentry" style="width: 75px;"><a href="?page_id=1" class="menu_login">&nbsp;</a></li>  
      </ul>  
  
     </div>  
  
     <div id="header_side">  
                &nbsp;  
            </div>  
  
  <div id="side">  
      &nbsp;  
  </div>  
  
  <div id="content">  
                    &nbsp;  
                </div>  
  
                <div id="side">  
                    &nbsp;  
                </div>  
</div>  
</body>  
</html>

Die zwei DIVs "header_side" sind ein Überbleibsel eines vorangegangenen Versuchs, hatte versucht den verbleibenden Platz auf diese beiden DIVs anzuwenden, weiß aber nicht wie ich hier eine relative Größe angeben kann, die auch wirklich nur den verbleibenden Platz angibt.

Screenshots sind hier zu finden:
http://img98.imageshack.us/my.php?image=ffao8.jpg
http://img360.imageshack.us/my.php?image=ie7tl7.jpg

Verwendeter Doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Bin jetzt wirklich schon recht lange am Suchen,
hoffentlich weiß hier jemand Rat : )

Besten Dank im Vorraus,
Alex

Beitrag melden
–
Informationen zu den Bewertungsregeln