Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: pozycjonowanie stopki na stronie
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
Kinool
mam strone w tabeli (centrowana na srodku ale mniejsza o to smile.gif ) chcialbym zrobic aby stopka strony zawsze byla na samym dole tzn przy dolnej krawedzi okna przegladarki, naturalnie jest to jesli tresc strony jest wieksza niz wysokosc okna smile.gif ale w innym przypadku to stopka jest tak jak by w powietrzu sad.gif probowalem przez style (position absolute) ale to jest zbyt drastyczne rozwiazanie smile.gif bo pozycjanuje wtedy stopke zawsze na dole, zaslaniajac tresc smile.gif jakies sugestie jak to zrobic?? moze ododzielna tabela i wyrownac ja do dolnej krawedzi??

pozdrawiam
revyag
Kod
<style type="text/css">
html,body{
    margin:0;
    padding:0;
    height:100%;
}
#cont{
    width:700px;
    height:100%;
}
#head{
    height:10%;
    width:100%;
    background-color:blue;
}
#bod{
    height:85%;
    width:100%;
    background-color:white;
}
#bcont{
    width:100%;
    background-color:green;
}
#foot{
    height:5%;
    background-color:red;
}
</style>

  1. <div id="cont">
  2. <div id="head"></div>
  3. <div id="bod">
  4. <div id="bcont">
  5. <!--zawartość strony-->
  6. </div>
  7. </div>
  8. <div id="foot"></div>
  9. </div>
Mefju
A nie dało by sie jakoś pokombinować ze stylami fixed?
hmmm
jest jeszcze z-index :] taka wartosc CSS
  1. #tresc {
  2. z-index: 2;
  3. }
  4.  
  5. #stopka {
  6. margin-top: 10px;
  7. z-index: 1;
  8. }

musisz jeszcze ustawic pozycje stopki i ... jezeli dobrze wykombinowalem, to bedziesz mial stopke zawsze na dole w okreslonej pozycji, nad stopka bedzie 10px wolnego miejsca (wzgledy estetyczne) a okno bedzie sie przewijac, no tylko ... ze dalej bedzie zaslaniac chyba :/
i nie jestem pewien, czy im wyzszy z-index, to element jest 'bardziej nad innymi' czy na odwrot :P
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.