[HTML / CSS / JS] Stopka i nagłówek przyklejone do krawędzi przeglądarki Opcje

[The Night Shadow]

Witam,

Chcę stworzyć szablon, w którym nagłówek strony i jej stopka były przyklejone do odpowiednio górnej i dolnej krawędzi ekranu w taki sposób, by przewijana zawartość strony NIE powodowała zmiany położenia tych elementów.

WIEM, że jakimś tam rozwiązaniem byłyby trzy divy jeden pod drugim, ale przy różnych rozdzielczościach jest to bezsens. Poza tym paska przewijania w niektórych przeglądarkach nie da się ukryć.

Styl position: fixed nie jest zbyt dobry ze względu na to, że po zmianie wielkości okna nie sposób tak stworzonego nagłówka przewinąć.

Czy stworzenie czegoś takiego jest w ogóle możliwe na IE 6 / IE 7 / FF / Opera? Ostatecznie IE 6 mogę pominać, bo pracuję nad projektem dla osób, które z niego na codzień nie korzystają.


--------------------------------
nagłówek
--------------------------------

treść

--------------------------------
stopka
--------------------------------

Przewijanie pionowym paskiem przewijania w przeglądarce powoduje TYLKO przewijanie treści, a nie nagłówka i stopki.

Kiedyś widziałem takie coś w JS, ale przy szybszym przewijaniu elementy lekko skakały, co nie wywoływało zbyt dobrego wrażenia.

Z góry wielkie dzięki za pomoc.

[The Night Shadow]

A podobno to ja mało wiem skoro pytam na forum przedszkole. Po co się ludzie udzielają skoro tylko wprowadzają zamęt, zamiast faktycznie wspomagać młodszych kolegów po fachu?

Wstaw sobie to co poniżej do pliku html:

[HTML] pobierz, plaintext 
<div id="naglowek" style="position: fixed; left: 0px; top: 0px; width: 100%; height: 100px; background-color: #cccccc;">
    <div id="menu" style="background-color: #dd0000; margin: auto; width: 800px;">
    a
    </div>
</div>
<div id="tresc_strony" style="position: relative; margin: auto; width: 800px; top: 100px;">
    Jakiś tekst
</div>
[HTML] pobierz, plaintext 

Masz 3 divy (w tym jeden FIXED). Pierwszy stanowi powiedzmy nagłówek, którego zadaniem jest:
1. Być zawsze na górze przeglądarki (przylepionym do jej górnej krawędzi)
2. Być zawsze na przestrzeni 100% szerokości okna przeglądarki (bo takie widzi mi się estetyczne).
3. Trzymać menu szerokości 800 px na środku nagłówka.

Drugi div to menu i jest sobie w środku nagłówka. Szerokość ustawiona na 800 px i automatyczne marginesy. Div siłą rzeczy ląduje na środku nagłówka. Tam jest sobie jakieś menu, flash i coś jeszcze.

Trzeci div to treść strony znajdująca się zaraz pod nagłówkiem z ustawioną na sztywno szerokością 800 px.

Wniosek stąd taki, że generalnie stronka ma 800 px szerokości, ale nagłówek ma się rozciągać (poza menu, które jest na środku).

Weź sobie teraz stronkę z tym kodem wyświetl w jakiejś przeglądarce, a nastepnie zmniejsz jej okno do powiedzmy szerokości 500 px. Pojawi Ci się poziomy pasek przewijania, który mimo ustawionej na sztywno szerokości menu NIE powoduje przesuwania się go.

Taka jest natura FIXED i dlatego jest to rozwiązanie do dupy.

Jeszcze coś mam tłumaczyć komuś kogo proszę o pomoc?

O co generalnie chodzi? Prostym językiem o DIV, który będzie przylepiony na stałe do górnej krawędzi przegląraki, który będzie się rozciągał wraz z oknem, ale też nie zmniejszał ponizej jakiejś ustalonej szerokości, a zarazem który będzie przesuwał się pod paskami przewijania w przeglądarce.