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:

Code:

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:

HTML:

<?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:

Code:

* 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:

<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

Scrollbar bei variablen Content/Menü-Bereich

LuvShining

Erfahrenes Mitglied

Maik

LuvShining

Erfahrenes Mitglied

Quaese

Moderator

Maik

LuvShining

Erfahrenes Mitglied

Neue Beiträge