# Scrollbar bei variablen Content/Menü-Bereich



## LuvShining (17. März 2005)

Hallo, 
jetzt habe ich die Page unter grafischen Gesichtspunkten soweit fertig und scheitere nun offensichtlich an einem anders gelagerten Problemchen.

Die Seite an sich ist so aufgebaut, dass Content u.- Menü-Bereich variabel, mittig gesetzt sind via div-tag (siehe Abbildung). Der Content-Bereich hat eine feste Höhe, die auch nach Eingabe von Inhalt nicht verändert werden darf. 
Aus diesem Grund wollte ich die eigentliche Scrollbar via overflow ausschalten und nur im rechten Content-Bereich eine Scrollbar in einer bestimmten Höhe einbinden. Mein Problem ist nun aber, wie sage ich der Scrollbar an welcher Stelle sie erscheinen soll? Die Position ist ja je nach Auflösung anders..... 






Hat jemand eine Idee?

Viele Grüße
Nadine


----------



## Maik (17. März 2005)

> Die Seite an sich ist so aufgebaut, dass Content u.- Menü-Bereich variabel, mittig gesetzt sind via div-tag (siehe Abbildung). Der Content-Bereich hat eine feste Höhe, die auch nach Eingabe von Inhalt nicht verändert werden darf.


 Was ist an deinem DIV-Konstrukt variabel, wenn das contentDIV eine feste Höhe hat, und diese zudem durch den Inhalt nicht verändert (vergrössert) werden darf? 



> Aus diesem Grund wollte ich die eigentliche Scrollbar via overflow ausschalten und nur im rechten Content-Bereich eine Scrollbar in einer bestimmten Höhe einbinden. Mein Problem ist nun aber, wie sage ich der Scrollbar an welcher Stelle sie erscheinen soll? Die Position ist ja je nach Auflösung anders.....


 Die Höhe / Position der Scrollbar lässt sich meines Wissens nicht einstellen bzw. manipulieren.

CSS-Code zum Deaktivieren der eigentlichen Scrollbar (im BODY) und Formatieren eines scrollbaren contentDIVs:

```
body
{
overflow: hidden; /* eigentliche Scrollbar deaktivieren */
}

#contentDiv
{
width: 300px;
height: 400px;
overflow: auto;
}
```

greez, maik.l


----------



## LuvShining (18. März 2005)

Hallo,

_„Was ist an deinem DIV-Konstrukt variabel, wenn das contentDIV eine feste Höhe hat, und diese zudem durch den Inhalt nicht verändert (vergrössert) werden darf?“_

War vielleicht ein wenig missverständlich ausgedrückt: Der Block mit Menü und Content hat eine Breite von 720 Pixeln und eine Höhe von 480 Pixeln. Dieser Bereich ist immer mittig im Browserfenster ausgerichtet – egal was für eine Auflösung der User fährt.
Das war alles, was ich mit variabel meinte.


_„Die Höhe / Position der Scrollbar lässt sich meines Wissens nicht einstellen bzw. manipulieren.“_
Die eigentliche nicht, nein. 
Ich hatte damit gemeint, dass ich einen Div-Container mit einer Scrollbar versehen möchte

#container {position:absolute;*left:?;top:?;*width:350px;height:450px;z-index:1;overflow-x:hidden;overflow-y:auto; usw….

Mein Problem liegt lediglich in der Anweisung des Abstands von links und von oben, damit auch dieser Container immer im Content-Bereich befindlich ist. 

Grüße
Nadine


----------



## Quaese (18. März 2005)

Hi,

du schreibst, dass der Container immer mittig ausgerichtet ist. Ich gehe jetzt einfach mal davon
aus, dass es sich um ein absolut positioniertes Element handelt. Dieses ist sowohl vertikal als
auch horizontal zentriert ausgerichtet.

In diesen Container könntest du ein DIV mit den gleichen Abmessungen und relativer Positionierung
packen. Positionsangaben (top, left) darin platzierter Elemente beziehen sich dann auf die linke
obere Ecke des umschliessenden Elements.

Beispiel:

```
<?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>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
  <!--
body, html{ height: 100%;}
body{ margin: 0;
      padding: 0;}
#mainDiv{ position: absolute;
          left: 50%;
          margin-left: -360px;
          width: 720px;
          top: 50%;
          margin-top: -240px;
          height: 480px;}
#mainRelative{ position: relative;
               width: 720px;
               height: 480px;
               border: 1px solid #000000;
               background: #ffffff;}
#navDiv{ float: left;
         width: 250px;
         height: 480px;
         border-right: 1px solid #cccccc;
         background: #efefef;}
#contentDiv{ position: absolute;
             height: 450px;
             width: 350px;
             top: 15px;
             left: 310px;
             overflow: auto;
             border: 1px dashed #cccccc;}

 //-->
</style>
</head>
<body>
<div id="mainDiv">
  <div id="mainRelative">
    <div id="navDiv">Navigations-Element</div>
    <div id="contentDiv">
      Absolut positioniertes Element für den Inhalt.
      <div style="height: 1000px; margin-top: 12px;">Container zum Erzwingen von Scrollbars durch Erzeugen von 1000 Pixeln Höhe</div>
    </div>
  </div>
</div>
</body>
</html>
```
Die Eigenschaften *overflow-x* und *overflow-y* habe ich durch *overflow* ersetzt, da es sich dabei 
um Angaben handelt, die nur der IE kennt. Willst du sie dennoch einsetzen, solltest du mit einem 
CSS-Filter arbeiten.

CSS-Filter für IE:

```
* html #contentDiv{ overflow-x: hidden;
                    overflow-y: auto;
}
```
Ich hoffe, das hilft dir weiter.

Ciao
Quaese


----------



## Maik (18. März 2005)

Hallo LuvShining,

hier meine alternative CSS-Lösung, in der die Bereiche *navDiv* und *contentDiv* innerhalb des Elternelements *centerDiv* absolut positioniert sind:



```
<html>
<head>
<title>:::div.layout:::</title>

<style type="text/css">
<!--
body
{
margin: 0;
padding: 0;
overflow: hidden;
}

#centerDiv
{
position: absolute;
left: 50%;
width: 720px;
margin-left: -360px;
top: 50%;
height: 480px;
margin-top: -240px;
border: 1px solid #dfdfdf;
}

#navDiv
{
position: absolute;
left: 20px;
top: 20px;
width: 210px;
height: 440px;
background: #dfdfdf;
}

#contentDiv
{
position: absolute;
left: 250px;
top: 20px;
width: 450px;
height: 440px;
background: #dfdfdf;
overflow: auto;
}
-->
</style>

</head>
<body>

<div id="centerDiv">centerDiv

   <div id="navDiv">navDiv</div>

   <div id="contentDiv">
           <p>contentDiv with some dummy text</p>
           <p>contentDiv with some dummy text</p>
           <p>contentDiv with some dummy text</p>
           <p>contentDiv with some dummy text</p>
           <p>contentDiv with some dummy text</p>
           <p>contentDiv with some dummy text</p>
           <p>contentDiv with some dummy text</p>
           <p>contentDiv with some dummy text</p>
           <p>contentDiv with some dummy text</p>
           <p>contentDiv with some dummy text</p>
           <p>contentDiv with some dummy text</p>
           <p>contentDiv with some dummy text</p>
           <p>contentDiv with some dummy text</p>
           <p>contentDiv with some dummy text</p>
           <p>contentDiv with some dummy text</p>
           <p>contentDiv with some dummy text</p>
           <p>contentDiv with some dummy text</p>
           <p>contentDiv with some dummy text</p>
   </div>

</div>

</body>
</html>
```
 [ Browsercheck: IE 5.5, Moz 1.6, NN 7.0, Opera 7.23 ]

greez, maik.l


----------



## LuvShining (18. März 2005)

Ich bin üüüüüüüüüüüüüberglücklich!

Viele Varianten hatte ich ausprobiert- aber diese noch nicht. Es funktioniert mit der Variante von "michaelsinterface" astrein und wie geschrieben auch in den gängigen Browsern.

Super herzlichen Dank für eure Hilfestellungen und Ideen!

 

Grüße aus Hamm
Nadine


----------

