✔ scrollbalken funktionieren nicht

Status
Nicht offen für weitere Antworten.
L

LL0rd

Erfahrenes Mitglied
Hallo Leute,

ich habe gerade ein großes Problem, aus irgendeinem Grund funktionieren meine Scrollbalken nicht.

http://rootix.de/meyer/

Der Header oben und die Navi Links sollten fest sein, der Bereich in der Mitte (wo der Text unter den Rand geht) soll scrollen. Nun habe ich schon zwei Scrollbalken, aber beide gehen nicht ;(

Hat jemand eine Idee, woran das liegen könnte?
 
In Anlehnung an das CSS-Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken hab ich deinen "Vorentwurf" soweit überarbeitet und entsprechend ergänzt, damit die Content-Box eine flexible Höhe bis zum unteren Fensterrand besitzt und ihr Inhalt scrollfähig ist.

Zudem habe ich das Dokument validiert. ;)

Code: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>CSS-Beispiel 2: position_fixed</title>
<style type="text/css">
html {
     height:100%;
     max-height:100%;
     padding:0;
     margin:0;
     border:0;
     background:#e6e6e6;
     color: #000000;
     /* hide overflow:hidden from IE5/Mac */
     /* \*/
     overflow: hidden;
     /* */
}

body {
     height:100%;
     max-height:100%;
     overflow:hidden;
     padding:0;
     margin:0;
     border:0;
}

body, td {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
}

#header {
        position:absolute;
        top:0;
        left:50%;
        margin-left:-475px;
        width:952px;
        height:150px;
        z-index:5;
        overflow:hidden;
}

#header_sub {
        width:950px;
        height:100%;
        background-color:#FFFFFF;
        border-left: 1px solid #c0c0c0;
        border-right: 1px solid #c0c0c0;
        text-align: left;
}

#login {
        position:relative;
        float:right;
        right: 30px;
        top: 5px;
        text-align: right;
        padding-right:10px
}

#lang {
background-color:#FF0000;
        position:relative;
        float:right;
        width: 50px;
        top: 50px;

}

.top_navi {
        margin-top:20px;
}

.top_navi td {
        padding-right:10px;
        padding-left:10px;
        text-align: left;
        font-size: 13px;
        font-weight: bold;

}

.red_v_line_r {
        border-right-width: 1px;
        border-right-style: solid;
        border-right-color: #b61b16;
}

#wrapper {
         position:absolute;
         top: 150px;
         left: 50%;
         margin-left: -475px;
         width: 950px;
         bottom: 0;
         border-left: 1px solid #c0c0c0;
         border-right: 1px solid #c0c0c0;
}

* html #wrapper { /* Für IE */
         top:0;
         bottom:0;
         height:100%;
         max-height:100%;
         position:absolute;
         z-index:1;
         border-top:150px solid #fff;
}

#left {
      position:absolute;
      left:0px;
      top:0;
      bottom:0;
      width:200px;
      z-index:2;
      overflow:hidden;
      background: #fff;
      text-align: center;
}

* html #left { /* Für IE */
      height:100%;
      top:0;
      bottom:0;
}

.grey_font{
        color: #646464;
        font-weight: bold;´
        width: 150px;
        margin: 0 auto;
        text-align: left;
}

#content {
         overflow:auto;
         position:absolute;
         z-index:1;
         top:0px;
         bottom:0;
         left:200px;
         width:750px;
         background:#ff0000;
}

* html #content { /* Für IE */
       top:0;
       left:0;
       right:0;
       bottom:0;
       height:100%;
       max-height:100%;
       width:100%;
       overflow:auto;
       position:absolute;
       z-index:1;
       border-left:200px solid #fff;
}

#content p {
         padding:10px;
}
</style>
</head>

<body>

<div id="header">
     <div id="header_sub">
          <div id="login"><br />
               <a href="#" onmouseover="mouseOver('login_img',img['login'],1)" onmouseout="mouseOver('login_img',img['login'],0)"><img id="login_img" src="http://rootix.de/meyer/_img/icon_login_off.gif" alt="" /></a>
               <br /><br /><img id="lang_en_img" src="http://rootix.de/meyer/_img/icon_lang_en_off.gif" alt="" /> <img id="lang_de_img" src="http://rootix.de/meyer/_img/icon_lang_de_on.gif" alt="" />

               <table width="870" border="0" class="top_navi">
                 <tr valign="top">
                     <td class="red_v_line_r">Die&nbsp;Gruppe</td>
                     <td class="red_v_line_r">Automation <br />und&nbsp;Steueranlagen</td>
                     <td class="red_v_line_r">Brandschutz und&nbsp;Entsorgungstechnik</td>
                     <td class="red_v_line_r">Elektrotechnik und&nbsp;Photovoltaik</td>
                     <td class="red_v_line_r">IT-Services</td>
                     <td class="red_v_line_r">Energie Netzwerk&nbsp;Nord</td>
                     <td>Maschinen-&nbsp;und Anlagentechnik</td>
                 </tr>
               </table>
          </div>
     </div>
</div>
<div id="wrapper">
     <div id="left">
          <table width="150" border="1" class="grey_font">
                 <tr>
                     <td>Wir über uns</td>
                 </tr>
                 <tr>
                     <td>Leistungsangebot</td>
                 </tr>
                 <tr>
                     <td>Kernkompetenzen</td>
                 </tr>
                 <tr>
                     <td>Referenzen</td>
                 </tr>
                 <tr>
                     <td>Stellenangebote</td>
                 </tr>
                 <tr>
                     <td>Aktuelles</td>
                 </tr>
                 <tr>
                     <td>Presse</td>
                 </tr>
                 <tr>
                     <td>Kontakt</td>
                 </tr>
          </table>
     </div>
     <div id="content">
         <p>bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />bla<br />rzrtzrtz</p>
    </div>
</div>
</body>
</html>
Nachtrag: Es empfiehlt sich, die horizontale und vertikale Navigation mit dem Listenelement zu strukturieren, da Tabellen hierfür nicht angedacht sind.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück