Stefan: linkes Menü soll nicht mitscrollen

hallo zusammen,

ich habe links oben eine Menü definiert und rechts daneben soll der Content stehen. Das klappt auch wunderbar, aber bei langem Content verschwindet das Menü.

Ich habe versucht ein scrollbares content-div anzulegen, aber leider klappt das nicht:

HTML Datei:

<!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" xml:lang="en" lang="en">
<head>
<title>Test</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="style.css" media="screen" title="andreas01 (screen)" />
</head>

<body>

<div id="avmenu">
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Impressum</a></li>
</ul>
</div>

<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</body>
</html>

Style-Sheet:

body {overflow:hidden;}

#avmenu {clear: left;
         float: left; width:160px;
         margin: 0 0 10px 0;
         padding: 0;
         font-size: 0.9em;}

#content {margin:0; margin-left:190px;
          width:50%; height:100%;
          overflow:auto;
          line-height: 1.5em;
          text-align: left;}

Weiss jemand wo der Fehler liegt?

Oder geht das nur mit der position:fixed? Aber da hat der IE wohl Probeleme mit?

Bye

steve

  1. hi,

    Oder geht das nur mit der position:fixed?

    Jein.

    Aber da hat der IE wohl Probeleme mit?

    http://de.selfhtml.org/css/layouts/fixbereiche.htm#fixiert_ie

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. hi wahsaga,

      danke für das Beispiel. Schön wäre aber wenn das obere DIV (Fixierte Navigation) auch stehen bliebe. Ist das machbar?

      Noch einmal zurück zu meinem Beispiel. Warum geht das nicht mit einen scrollbaren DIV. Wenn das DIV indem der Content liegt scrollbar ist, dann sollten doch die andere Tags an derselben Position stehen bleiben.

      Oder nicht?

      Bye

      Stefan

      1. Du erstellst zwei divs, die den Bildschrim zu 100% füllen.
        In das linke kommt das Menü, in das rechte der Inhalt. Den rechten setzt du als "overflow: auto;" und so scrollt dann der Inhalt des rechten divs und nicht mehr der gesamte body-Bereich.

        1. Hi Rafael,

          schau doch bitte mal in meine Code. So habe ich doch diesen auch gepostet.

          Bye

          Stefan

          1. #avmenu { left: 0;
                      width: 150px;
                      position: absolute;
                      height: 100%;
            }

            #content { left: 150px;
                       height: 100%;
                       overflow: auto;
                       position: absolute;
                     }

            Die restlichen Attribute kannst du setzen wie du möchtest.