Forum PHP.pl

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.

Troche głupia może ta moja wypowiedź,ale może jednak te 3 divy i w divie z treścią dać

i jak bedzie za dużo treści to sie pokaże pasek przewijania

Ten post edytował k_@_m_i_l 18.06.2008, 18:46:14

No dobrze, ale jeszcze jedna kwestia. Wstawi do na przykład stopki tabelę 1000 px i potem zmień wielkośc okna przeglądarki

A po co ktoś miałby to wstawiać do stopki? Poza tym taki problem miałbyś również i bez fixed. Rozwiązanie podane przez Erixa jest ok. Możesz albo ustalić sztywną szerokość, albo 100% - nie widzę, żadnego problemu.

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.