[ CSS u. evtl. JS ] Scrollbalken

[Enrico]

Hallo,

tut mir leid, Euch wieder bemühen zu müssen, aber ich komme einfach nicht weiter.

Damit der Inhalt einer Seite nicht das Layout "zerreisst", habe ich innerhalb einer Tabellenzelle zwei verschachtelte Div-Bereiche definiert:

<div class="Container">
  <div class="Inhalt">
    ... Seiteninhalt ...
  </div>
</div>

.Container
{
  position: relative;
  width:    100%;
  height:   100%;
}

.Inhalt
{
  position: absolute;
  width:    100%;
  height:   100%;
  overflow: scroll;
}

Wenn ich nun einen Text habe, der länger als der zur Verfügung stehende Bereich ist, dann wird ein vertikaler Scrollbalken angezeigt (was ja auch beabsichtigt ist).

Was mir allerdings nicht gefällt, ist, dass der Text keinen Abstand zum Scrollbalken hat und das ganze dann ziemlich unschön aussieht.

Beabsichtigt wäre, dass der Text 14px Abstand zum Scrollbalken hat, WENN der Text länger als der Anzeigebereich ist, ansonsten soll sich der Inhalt zu 100% über den zur Verfügung stehende Bereich erstrecken.

Ich habe zwar einige Javascripte gefunden, die Layer scrollen, aber ich möchte auf die browsereigenen Scrollbalken zurückgreifen und ohne Javascript scrollen.

Dass mein Vorhaben aber ohne Javascript nicht umzusetzen sein dürfte, ist mir klar, da ich ja den Umstand abfragen muss, ob die Seite länger oder kleiner als der Anzeigebereich ist und damit der vertikale Scrollbalken mit Abstand oder kein Scrollbalken angezeigt wird.

Kann mir hier jemand behilflich sein und entsprechende Anregungen und / oder Links geben, die mich weiterbringen ?

Wäre super :-)

Schon mal vielen Dank, Enrico

[XaraX]

Hallo Enrico,

<div class="Container">
  <div class="Inhalt">
    ... Seiteninhalt ...
  </div>
</div>

.Container {position:relative;width:100%;height:100%}
.Inhalt    {position:absolute;width:100%;height:100%;overflow:scroll}

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
als ich das gesehen habe, drenkte sich unweigerlich die Frage auf, welchen Sinn dieses Construkt hat. Weder die Klasse Container, noch die Klasse Inhalt haben weitergehende Angaben der Positionierung wie top oder left. In diesem Zusammenhang wäre eine kurze Begründung, warum Du mit position arbeitest und formatierungsähnlich zwei DIVs in einander verschachtelst, wünschenswert.

Wenn ich nun einen Text habe, der länger als der zur Verfügung stehende Bereich ist, dann wird ein vertikaler Scrollbalken angezeigt (was ja auch beabsichtigt ist).

Bei overflow:scroll sollte immer ein Scrolbalken angezeigt werden, der erst bei Überschreitung der Dimension von .Inhalt sinn ergibt, daher denke auch über overflow:auto nach.

Was mir allerdings nicht gefällt, ist, dass der Text keinen Abstand zum Scrollbalken hat und das ganze dann ziemlich unschön aussieht.

Beabsichtigt wäre, dass der Text 14px Abstand zum Scrollbalken hat, WENN der Text länger als der Anzeigebereich ist, ansonsten soll sich der Inhalt zu 100% über den zur Verfügung stehende Bereich erstrecken.

Es gibt zwar eine Möglichkeit, dies mit JavaScript hinzubiegen, jedoch sei Dir davon abgeraten. Stattdessen würde ich Dir empfehlen die 14px Abstand mit padding-right anzulegen und den damit verbundenen Platzverlust hinzunehmen:

<td><div id="Container">
 #Text
</div></td>

#Container {width:100%;height:100%;padding-right:14px;overflow:auto}

Sollte Dir das nicht hinnehmbar erscheinen, mußt Du dennnoch diese Angaben für den Falle deaktivierten JavaScripts notieren. Diese werden dann per onLoad durch eine Funktion (im Bsp. teste() ) im Fall, daß der Inhalt von #Container kleiner als der vorgegebene Platz ist, herausgenommen:

var a=new Array();
a[0]="Container";
// usw.

function setze_um()
   {
   for(i=0;a[i];i++)
      {
      if(document.getElementById(a[i]).offsetHeight>b[i])
         {
         document.getElementById(a[i]).style.overflow='auto';
         document.getElementById(a[i]).style.paddingRight='14px';
         document.getElementById(a[i]).style.height=b[i] +'px';
         }
      }
   }

function teste()
   {
   b=new Array();
   for(i=0;a[i];i++)
      {
      b[i]=document.getElementById(a[i]).parentNode.offsetHeight;
      document.getElementById(a[i]).style.height='';
      document.getElementById(a[i]).style.paddingRight='';
      }
   setze_um();
   }

IMHO ist das für den eigentlich erwünschten Zweck eine Spatzenkanone.

Gruß aus Berlin!
eddi

[Enrico]

Hallo eddi,

» kurze Begründung

Da die Homepage über eine Tabellenkonstruktion zentriert in Bildschirmmitte dargestellt wird, drückt ein breiterer Inhalt das Layout in die breite, was ich nicht haben will.

Deshalb habe ich zwei verschachtelte Div-Bereiche eingebaut und so funktioniert es, dass das layout auch bei breiteren Inhalten gewahrt bleibt.

Dein Javascript ist sehr interessant, ich werde es mir zu Gemüte führen und daraus lernen, weil es nichts bringt, wenn ich es einfach so übernehme.

Vielen, vielen Dank für Deine Anregungen :-)

Gruss, Enrico

[XaraX]

Hallo Enrico,

kurze Begründung

Da die Homepage über eine Tabellenkonstruktion zentriert in Bildschirmmitte dargestellt wird, drückt ein breiterer Inhalt das Layout in die breite, was ich nicht haben will.

Deshalb habe ich zwei verschachtelte Div-Bereiche eingebaut und so funktioniert es, dass das layout auch bei breiteren Inhalten gewahrt bleibt.

Sieh Dir bitte folgende Links an:
http://de.selfhtml.org/css/eigenschaften/tabellen.htm#table_layout (Dich interessiert dabei fixed)
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#width (für die mittlere Tabellenzelle)

Gruß aus Berlin!
eddi