Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Stopka na dole strony z wyśrodkowanym tlem
Forum PHP.pl > Forum > Przedszkole
Age1869
Witam, otóż mam stopkę szeroką na 100%, tłem stopki jest grafika, której nie da się pociąć na małe fragmenty i powtarzać. Dlatego wykonałem grafikę w rozdzielczości 1920px. Wszystko pięknie działa, jak użytkownik ma taką rozdzielczość ustawioną. Ale już np na rozdziałce 1440px tło się nie wyśrodkowuje... Jak to naprawić?

I drugi problem: jak jest mało treści to stopka "odrywa się" od dolnej krawędzi okna przeglądarki. Pomóżcie.

  1. <div id="footer"><div id="footer_c"><div id="footer_l">kontakt</div><div id="footer_r">inne napisy</div></div></div>


  1. #footer {
  2. background-position: bottom center;
  3. width: 100%;
  4. background: url('../images/bg2.png') no-repeat;
  5. margin: 0;
  6. padding: 0;
  7. height: 175px;
  8. color: #a583ad;
  9. font-family: tahoma, georgia;
  10. font-size: 13px;
  11. }
  12. #footer_c {
  13. width: 1000px;
  14. }
  15. #footer_l {
  16. width: 340px;
  17. height: 100%;
  18. font-size: 11px;
  19. text-align: left;
  20. float: left;
  21. margin-top: 15px;
  22. margin-left: 160px;
  23. }
  24. #footer_r {
  25. width: 450px;
  26. height: 100%;
  27. text-align: right;
  28. float: right;
  29. margin-top: 5px;
  30. margin-right: 50px;
  31. font-size: 10px;
  32. }
  33. #footer_r, #footer_l {
  34. display: inline;
  35. }
Dapi
Cytat
I drugi problem: jak jest mało treści to stopka "odrywa się" od dolnej krawędzi okna przeglądarki.


Kod
#footer {
    background-position: bottom center;
    width: 100%;
    background: url('../images/bg2.png') no-repeat;
    position: absolute;
    bottom: 0;[quote][/quote]
    margin: 0;
    padding: 0;
    height: 175px;
    color: #a583ad;
    font-family: tahoma, georgia;
    font-size: 13px;
}
mortus
@Dapi: Na pewno nie tędy droga.

@Age1869: CSS wygląda dobrze i w sumie tło powinno być wyśrodkowane. Jeśli masz możliwość, to wrzuć to online, a jeśli nie, to za pomocą Firebuga sprawdź dokładnie styl stopki. Jeśli chcesz, aby stopka była na dole strony zastosuj sticky footer.
Age1869
To zapraszam na http://www.smokeart.pl, zakładam sobie małą galerię online, ale że narazie pustka to i wstyd było wrzucać linka ;-)

P.S.
Zaraz wypróbuję to ze stopką.
mortus
Problemem są dwa zera w atrybucie background stylu CSS, ustawiają one tło 0px od górnej i lewej krawędzi div-a. Styl powinien wyglądać tak:
  1. #footer {
  2. margin: 0;
  3. padding: 0;
  4. background: transparent url('../images/bg2.png') no-repeat scroll bottom center;
  5. width: 100%;
  6. height: 175px;
  7. color: #a583ad;
  8. font-family: tahoma, georgia;
  9. font-size: 13px;
  10. }
Age1869
Dobra, tło już działa. A co do stopki to sprawdzę ten link, ale nie teraz, bo nie mam siły haha.gif

Dzięki za pomoc!:)
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.