Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Stpoka (pozycjonowanie do dołu)
Forum PHP.pl > Forum > Przedszkole
X_x_XXX_x_X
  1. #footer
  2. {
  3. height: 50px;
  4. margin: 0 auto;
  5. padding: 0px 0 15px 0;
  6. background: #1582AB;
  7. border-top: 1px solid #1885B0;
  8. font-family: Arial, Helvetica, sans-serif;
  9. }
  10.  
  11. #footer a
  12. {
  13. color: #FFFFFF;
  14. }


Możecie mi to poprawić by po zmianie karty zawsze mi się stopka z krawędzią dolną równało? Sporo czytałem ale nic nie pomagało. Może wy macie jakiś sposób.
krzysztof_kf
Ale co równało ? może chodzi żeby dodać do


  1.  
  2. body {
  3. margin: 0px;
  4. padding: 0px;
  5. }
Lilo
Też nie bardzo rozumiem, wejdź na tę stronę przejrzyj tutorial, być może Ci coś rozjaśni http://articles.sitepoint.com/article/get-...g-photoshop-css .
X_x_XXX_x_X
To też mam.

Może to coś zobrazuje. Obrazek wziąłem z bloga na, którym było jak to naprawić lecz tamten sposób nie działa.


kapuch
dodaj do tego footera:
  1. position: fixed;
  2. bottom: 0px;
  3. left: 0px;
  4. width: 100%;

O to chodzilo?
everth
  1. #footer {
  2. position:absolute;
  3. height:40px;
  4. bottom:0;
  5. width:100%;
  6. }
  7. #page_content {
  8. padding-bottom:50px; /* to gwarantuje nam że strona nie wjedzie na stopkę i zapewnia 10px odstępu od niej */
  9. }
kapuch
Zartujesz z tym position:absolute?
Sprawdz strone z taka stopka i co sie stanie, jesli tresc bedzie dluzsza od wysokosci okna, podczas przewijania, stopka zostanie takze przewinieta i zniknie nam z ekranu.
position: fixed; jest tutaj najlepszym wyjsciem, stopka zawsze bedzie na samym dole okna, bez wzgledu na dlugosc strony i podczas przewijania bedzie caly czas w tym samym miejscu, a w twoim przykladzie, stopka bedzie na dole okna, tylko gdy nie zaczniesz przewijac strony.
Nie ma co tutaj kombinowac, bo od tego wlasnie mamy position:fixed.
Nie mieszaj chlopakowi w glowie.
everth
U ciebie fixed powoduje że stopka jest zawsze u dołu ekranu - bez względu na treść. Ja zaproponowałem mu rozwiązanie które powoduje dosunięcie stopki do dołu ekranu jeśli treśći jest za mało, w przeciwnym wypadku stopka zjeżdża na sam dół. Nie wiem o ci chodzi, ale dla mnie to naturalne zachowanie.
kapuch
Cytat(everth @ 30.07.2010, 00:06:30 ) *
U ciebie fixed powoduje że stopka jest zawsze u dołu ekranu - bez względu na treść. Ja zaproponowałem mu rozwiązanie które powoduje dosunięcie stopki do dołu ekranu jeśli treśći jest za mało, w przeciwnym wypadku stopka zjeżdża na sam dół. Nie wiem o ci chodzi, ale dla mnie to naturalne zachowanie.

Ty chyba nie masz pojecia co piszesz i co to jest position:absolute.
Zrob najlepiej sobie prosty szablon i zastosuj ta swoja absolutnie pozycjonowana stopke przy tresci dluzszej niz okno i przewin na sam dol.
Zobaczysz o co mi chodzi.
Stopka zostanie w miejscu, nie bedzie wciaz przyklejona do dolu okna, bo bottom:0px; jest pobierane tylko podczas ladowania strony.

Cytat
w przeciwnym wypadku stopka zjeżdża na sam dół.

Jasne, moze i tak bys chcial, ale niestety nic ci nie zjedzie na sam dol strony, bo position:absolute; to position:absolute exclamation.gif!
Tak jak juz pisalem, w Twoim przykladzie stopka zachowuje sie dokladnie tak samo jak w moim (fixed), ale tylko do momentu przewiniecia okna, wtedy u mnie stopka jest nadal na dole okna, a twoja z gracja ucieka sobie do gory...a na pewno nie podaza za trescia.


Mimo pozniej pory zrobilem to wedlug Twojego przykladu:
http://2kliki.pl/fwi9/
Przewin i sobie zobacz czy wszystko jest tak pieknie jak chciales.
everth
Ech, znów ta noc - do cssa trzeba jeszcze dodać position do body. Tutaj właściwy css
  1. body {
  2. position:relative;
  3. }
  4.  
  5. #footer {
  6. position:absolute;
  7. height:40px;
  8. bottom:0;
  9. width:100%;
  10. }
  11. #page_content {
  12. padding-bottom:50px; /* to gwarantuje nam że strona nie wjedzie na stopkę i zapewnia 10px odstępu od niej */
  13. }
vokiel
Masz na myśli sticky-footer?
everth
Prawdopodobnie tak smile.gif. Choć nazwę widzę po raz pierwszy.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.