Teil einer HTML-Seite, der fest stehen bleibt

[Andrea]

Hallo zusammen,
ich hab eine ganz spezielle Frage zu einer HTML-Seite, an der ich momentan arbeite.
Sie soll in etwa folgendermaßen aufgebaut sein:

__________________
Home | Persönliches | Studium | ...   (<= Links!)

....
....
....
(Informationen, Veröffentlichungen etc.)
....
....
__________________

Am oberen Seitenrand soll sich also eine Zeile mit Links zu meinen verschiedenen Kategorien, welche ich auf meiner Seite vorstelle, befinden.

Nun meine Frage:

Wie kann ich es realisieren - bzw. kann ich es mit HTML realisieren, dass diese Zeile mit den Links immer fest stehen bleibt und man im Bereich unterhalb dieser Link-Zeile trotzdem scrollen kann?
Ich würde eine Lösung OHNE FRAMES bevorzugen! ;-)

Ich hoffe, ihr könnt mir Tipps geben!
MfG, Andrea

[Hubert]

Nabend,

Wie kann ich es realisieren - bzw. kann ich es mit HTML realisieren, dass diese Zeile mit den Links immer fest stehen bleibt und man im Bereich unterhalb dieser Link-Zeile trotzdem scrollen kann?

HTML dient nur der Strukturierung, CSS ist fürs Layouten. "position: fixed" wäre eine Möglichkeit, funktioniert aber nicht in jedem Browser. Vielleicht geht auch was unschönes mit viel JS-Gewurschtel. Ansonsten bleiben dir nur die Frames.

Bis denne,

[Ingo Turski]

Hi,

Ich würde eine Lösung OHNE FRAMES bevorzugen! ;-)

sehr vernünftig.
Wie Du hier allerdings bereits zigfach gelesen haben könntest, heißt die Lösung position:fixed und diese funktioniert leider im IE nicht. Workarounds für einen fixen _oberen_ Bereich haben allesamt Probleme.
Ich würde Dir empfehlen, darauf zu verzichten oder das Menü an den Seitenrand zu verlegen, dann wäre die Lösung auch für den IE recht gut zu realisieren.

freundliche Grüße
Ingo

[David Wagner]

Hy

Ich würde eine Lösung OHNE FRAMES bevorzugen! ;-)

Dann pack den Inhalt in ein div, und diesem kannst du overflow:auto; zuweisen:
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#overflow

Gruss
David

[Ingo Turski]

Hi,

Dann pack den Inhalt in ein div, und diesem kannst du overflow:auto; zuweisen:

eine hierzu aber nicht sehr praktikabke Lösung mit einigen Problemen.
Es fängt damit an, daß dem Inhalt (und nur diesem, also abzüglich Navigation) eine Höhe zugewiesen werden muß...

freundliche Grüße
Ingo

[Klaus B.]

Dann pack den Inhalt in ein div, und diesem kannst du overflow:auto; zuweisen:
eine hierzu aber nicht sehr praktikabke Lösung mit einigen Problemen.
Es fängt damit an, daß dem Inhalt (und nur diesem, also abzüglich Navigation) eine Höhe zugewiesen werden muß...

Wo liegt da das Problem?

MfG
Klaus

[Ingo Turski]

Hi,

Wo liegt da das Problem?

siehe Wahsagas Posting weiter oben.

abgesehen davon finde ich seiteninterne Scrollbalken nicht sehr benutzerfreundlich - vor allem wenn man sie in einem Seitenausdruck bekommt..;-)

freundliche Grüße
Ingo

[Andrea]

Hi Ingo!

abgesehen davon finde ich seiteninterne Scrollbalken nicht sehr benutzerfreundlich - vor allem wenn man sie in einem Seitenausdruck bekommt..;-)

Aber wie würdest du mein Problem dann lösen?
Meine Seite beinhaltet viele Informationen und macht daher meines Erachtens Scrollbalken unerlässlich!
Ich habe die Möglichkeit, das Menü am linken Rand zu positionieren, aber diesen Platz verwende ich lieber anderweitig.
Daher habe ich mich für ein recht einfachtes Menü am oberen Seitenrand entschieden.

Hast du einen anderen Vorschlag?

MfG, Andrea

[Ingo Turski]

Hi,

ein Problem sehe ich hier ehrlich gesagt überhaupt nicht. Gerade wenn Du sehr viel Text präsentierst, ist es sinnvoll, a) die gesamte Bildschirmhöhe zur Anzeige zur Verfügung zu stellen und b) das Scrollen über den gewohnten Scrollbalken zu ermöglichen und nicht noch zu erschweren.
Sinnvoll wäre hier z.B. ein oder mehrere "nach oben" links sowie auch die Nutzung des link-Elements, auch wenn das nur die fortschrittlichen Browser unterstützen.

freundliche Grüße
Ingo

[Klaus B.]

Ich würde eine Lösung OHNE FRAMES bevorzugen! ;-)

Das ist sehr vernünftig

Ich hoffe, ihr könnt mir Tipps geben!

Nichts leichter als das:

1. man braucht hierzu weder position:fixed; nocht irgendwelchen Javascript Schnickschnack!

2. Du brauchst zwei divs, eines davon, wie David Wagner schon andeutete, mit overflow:auto;

3. und ein bischen CSS:

html, body {overflow:hidden;}
#menu {position:absolute; top:0; left:0; width:100%; height:5%;}
#inhalt {position:absolute; top;5%; left:0; width:100%; height:95%; overflow:auto;}

funktioniert im Mozilla&Co, Opera und sogar im IE

MfG
Klaus

[wahsaga]

hi,

#menu {position:absolute; top:0; left:0; width:100%; height:5%;}

und woher weisst du, dass die 5% immer genau für den platz ausreichen, den das menü braucht? insbesondere, wenn ich die schriftgrösse ändere ...

gruss,
wahsaga

[Andrea]

Dankeschön euch allen!

Ich hab den Ratschlag von Klaus befolgt und es funktioniert jetzt prima. :-)

@ wahsaga
Ich denke, die Angabe von 5% passt ganz gut... es handelt sich ja nur um eine einzige Zeile, in welcher verschiedene Text-Links stehen.
Außrdem kann ich diese Angabe ja beliebig ändern... mir ging es vorrangig um das Prinzip, wie man mein Problem überhaupt realisiert - und das weiss ich jetzt. :-)

MfG, Andrea