Enrico: Positionierung von verschachtelten DIV-Bereichen

Beitrag lesen

Nochmals Hallo :-)

Ich hoffe, dass dieses Thema nicht schon zu häufig angeschnitten wurde. Wenn ja, dann möchte ich mich hiermit bei allen entschuldigen, die sich durch meinen erneuten Aufgriff des Themas genervt fühlen.

Ich möchte auf meiner Homepage Schaltflächen anbieten, die folgende Möglickeiten bieten:

-Sprung zum Seitenanfang (Grafik Nr.2; Grösse Grafik & DIV: 29px breit x 43px hoch)
-Hochscrollen            (Grafik Nr.3; Grösse Grafik & DIV: 29px breit x 37px hoch)
-Runterscrollen          (Grafik Nr.4; Grösse Grafik & DIV: 29px breit x 37px hoch)
-Sprung zum Seitenende   (Grafik Nr.5; Grösse Grafik & DIV: 29px breit x 43px hoch)

Jede Schaltfläche ist dabei in einem eigenen DIV-Bereich untergebracht, um sie, je nach angezeigter Position innerhalb des Anzeigeframes, anzeigen oder verbergen zu können. Wird beispielsweise eine Seite aufgerufen, dann macht es wenig Sinn, Schaltflächen zum Hochscrollen oder Sprung an den Seitenanfang anzubieten. Analog dazu ist es unsinnig, Schaltflächen zum Runterscrollen oder Sprung zum Seitenende anzuzeigen, wenn man sich bereits am Seitenende befindet. Wird eine beliebige Position einer Seite angezeigt, dann ist es natürlich sinnvoll, alle Schaltflächen anzubieten.

Um die vier DIV-Bereiche schön positionieren zu können, sind sie in einem übergeordneten DIV (Grafik Nr.1) zusammengefasst. Dieser übergeordnete DIV-Bereich enthält u.a. auch eine Hintergrundgrafik, die durch die vier DIV-Bereiche überlagert werden sollen. Dieser DIV-Bereich ist 40px breit und 392px hoch.

Nachfolgende Skizze dient zur schemenhaften Visualisierung meiner ausführlichen Beschreibung:

***** 1 *****
*           *
* *** 2 *** *
* *       * *
* *       * *
* ********* *
*           *
*           *
* *** 3 *** *
* *       * *
* *       * *
* ********* *
*           *
*           *
*           *
*           *
*           *
* *** 4 *** *
* *       * *
* *       * *
* ********* *
*           *
*           *
* *** 5 *** *
* *       * *
* *       * *
* ********* *
*           *
*************

Die Definitionen sehen folgendermassen aus:

-Sprung zum Seitenanfang (Grafik Nr.2; Grösse Grafik & DIV: 29px breit x 43px hoch)
-Hochscrollen            (Grafik Nr.3; Grösse Grafik & DIV: 29px breit x 37px hoch)
-Runterscrollen          (Grafik Nr.4; Grösse Grafik & DIV: 29px breit x 37px hoch)
-Sprung zum Seitenende   (Grafik Nr.5; Grösse Grafik & DIV: 29px breit x 43px hoch)

#container      {width: 29px; height: 392px; [...]}
#seitenanfang   {width: 29px; height: 43px;  top: 0px;     right: 0px; [...]}
#hochscrollen   {width: 29px; height: 37px;  top: 48px;    right: 0px; [...]}
#runterscrollen {width: 29px; height: 37px;  bottom: 48px; right: 0px; [...]}
#seitenende     {width: 29px; height: 43px;  bottom: 0px;  right: 0px; [...]}

Leider werden meine Angabe nicht so interpretiert, wie ich es gerne haben möchte, d.h. alle Bereiche werden untereinander angezeigt, ohne die vorgegebenen Abstände und auch nicht rechtsbündig.

Was stimmt bei meinen Definitionen nicht ?
(Die weitere Angabe position:absolute/relative/static habe ich weggelassen, da sich die Positionsangaben nur auf den übergeordneten DIV-Bereich beziehen, dessen Position durch eine ausrichtende Tabelle bestimmt wird)

Vielen Dank im voraus.
Gruss, Enrico