'fixed' i min-width: 800px;, czyli nagłówek i stopka + overflow-x:auto; Opcje

[expert]

Witam,

siedzę już parę godzin nad tym i nie mogę nic wykombinować, w sensie jak coś niby działa to nie do końca.

Chodzi mi o to, aby w tym przykładzie: http://limpid.nl/lab/css/fixed/header-and-footer dodać taką opcję, że jak strona zmniejszy się do 800px, to dodaje dolny scrolbar i to co jest w fixed (nagłówek i stopka) przesuwa sie razem z tym scrolbarem.

Wiadomo, że jak się da fixed, to nagłówek i stopka 'wyłażą' z rodzica i są niezależne, wiec fixed nie może być...

Czy da sie coś takiego zrobić? I chcę to zrobić bez js. Sam css.

[prowseed]

Footer bedziesz musial przezucic na dol (pod content) i nadac mu z-index by byl wyzej, niz tresc wlasciwa, a tak poza tym, to

[CSS] pobierz, plaintext 
@media screen and (max-width: 800px) {
  body>div#header{
   position:relative;
  }
body>div#footer{
   position:relative;
  }
}
[CSS] pobierz, plaintext 

a position fixed wywal do @media screen and (min-width: 801px){}

Jak bedziesz mial jeszcze problemy to pisz, zrobilbym to teraz, ale juz troche za pozno, a ja sam lekko podpity- poradzisz sobie mysle, w koncu jestes expert : )

[expert]

Na razie mam taki efekt: http://siekier.pl/test.html

Jak wrócę, to wieczorem się pobawię.

Edit:

Wszystko ładnie pięknie, poza jednym.

Jak przesunie się stronę trochę w dół i width okna jest mniejszy od 800px, to header i footer uciekają w górę i nie zostają na swoich miejscach.
Owszem przesuwaja sie w lewo i w prawo, ale nie zachowuja swoich pozycji, czyli top: 0 i bottom: 0 względem okna przeglądarki.

Przy width <800px fixed totalnie odpada, ale absolute i relative przesuwają się wraz z oknem przeglądarki (mam na myśli przesuwanie pionowe).

Się zastanawiam, czy to w ogóle da się obejść bez js. Mógłbym z js, ale wolę huhać na zimne, że ktoś będzie miał brak obsługi js i nie chce, żeby strona mu się rozwalała.

Ten post edytował expert 22.04.2012, 19:45:13

[prowseed]

[CSS] pobierz, plaintext 
div#header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:30px;
  background-color: blue;
  z-index: 100000;
 }
 div#footer{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:30px;
  background-color: red;
  z-index: 100000;
 }
[CSS] pobierz, plaintext 

Wywal position, top/bottom i left z głównych styli izastąp je position:relative w media-query dla max:818

[expert]

A ten kod co podałeś, to gdzie?

[prowseed]

To jest Twój kod i wypisałem Ci co masz usunąć : )

Dodatkowo będziesz musial usunąć padding z body, zaaplikowac go tylko do min:819 i wyzerowac w max:818

[expert]

Teraz header i footer uciekają na górę i na dół...

W ogóle, to wiesz o co mi chodzi? :-)

[prowseed]

Wydaje mi sie, ze tak, aczkolwiek juz nie wiem sam : )
Zobrazuj to jakos lepiej, przedstaw w postaci rysunku czy cos, to pomoge Ci to przepisac na css : )
Aha, i zrob szablon na jsfiddle, bedzie mi latwiej edytowac zywy organizm.