Forum PHP.pl > [CSS] problemy ze stopką

Pomoc - Szukaj - Użytkownicy - Kalendarz

avatar79

13.12.2007, 19:44:07

Witam,

witam problem ze stopką pojawia sie gdy zawartość divu center_box jest większa niż ekran i stopka powinna sie przesunąć wdół. Kod strony jak poniżej:

[HTML] pobierz, plaintext 
<body>
<div id="main">
  <div id="top"><img src="../img/banner770X140-Czolowka2.jpg" alt="baner" width="770" height="140" border="0" usemap="#Map" />
      <map name="Map" id="Map">
        <area shape="rect" coords="0,0,177,140" href="../index.html" alt="Back to Main" />
      </map>
  </div>
  <div class="link" id="pasek">
    <div align="right"><a href="../kontakt/kontakt.html" class="link">Kontakt</a>&nbsp; </div>
  </div>
  <div id="left_box_podstrony">
    <div class="buttons">buton1</div>
    <div class="buttons">buton2</div>
    <div class="buttons">buton3</div>
    <div class="buttons">buton4</div>
    <div class="buttons">buton5</div>
  </div>
  <div id="center_box">
    <table width="96%" border="0" align="center" cellpadding="5" cellspacing="0">
      <tr>
        <td>tekst</td>
      </tr>
    </table>
  </div>
  <div id="stopka">Content for  id "stopka" Goes Here</div>
</div>
</body>
</html>
[HTML] pobierz, plaintext

style wyglądają następująco:

[HTML] pobierz, plaintext 
#top {
    height: 140px;
    width: 770px;
    left: 0px;
    top: 0px;
    position: absolute;
    z-index: 1;
    background-repeat: no-repeat;
}
 
 
#main {
    position: relative;
    width: 770px;
    height: 100%;
    margin: 0px;
}
 
body #main {
    margin-right: auto;
    margin-left: auto;
    height: auto;
    position: relative;
}
 
#pasek {
    position: absolute;
    height: 20px;
    width: 770px;
    left: 0px;
    top: 140px;
    z-index: 2;
}
 
#left_box {
    position: absolute;
    height: 360px;
    width: 210px;
    left: 0px;
    top: 160px;
    background-image: url(img/boxPodstrona1ramkaObrazek.jpg);
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center center;
}
 
.link {
    padding-right: 0px;
    padding-left: 0px;
    color: #4092C2;
    text-decoration: none;
    position: static;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    right: 0px;
}
 
#stopka {
    height: 60px;
    width: 100%;
    overflow: visible;
    position: absolute;
    left: 0px;
    z-index: auto;
    visibility: visible;
    clear: both;
    vertical-align: 100%;
}
 
.buttons {
    text-align: center;
    height: 40px;
    width: 175px;
    position: relative;
    top: 0px;
    left: 0px;
    margin: 23px 0px 0px 16px;
    background-position: center;
    padding: 0px;
}
 
#center_box {
    height: auto;
    width: 560px;
    left: 212px;
    top: 157px;
    z-index: 4;
    position: absolute;
    float: bottom;
    overflow: hidden;
}
 
.tekst {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-align: left;
}
 
.heading_main {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}
[HTML] pobierz, plaintext

Prosze o pomoc nie wiem jakie parametry ustawić by stopka się przesuwała odpowiednio jak treść centralnego boxu się zwiększa
pozdrawiam....

Garrappachc

13.12.2007, 20:59:45

Usuń position: absolute ze stopki

-avatar79-

14.12.2007, 16:55:08

Cześć kiedy zabieram position: absolute to stopka wskakuje na samą górę....

charlie-cherry

15.12.2007, 22:55:35

Kod po poprawkach. Chyba o to chodziło, przynajmniej pod FireFoxem:

CODE

#top {
height: 140px;
width: 770px;
background-repeat: no-repeat;
}


#main {
position: relative;
width: 770px;
height: 100%;
margin: 0px;
}

body #main {
margin-right: auto;
margin-left: auto;
height: auto;
position: relative;
}

#pasek {
position: absolute;
height: 20px;
width: 770px;
left: 0px;
top: 140px;
z-index: 2;
}

#left_box {
height: 360px;
width: 210px;
background-image: url(img/boxPodstrona1ramkaObrazek.jpg);
overflow: hidden;
float: left;
background-repeat: no-repeat;
background-position: center center;
}

.link {
padding-right: 0px;
padding-left: 0px;
color: #4092C2;
text-decoration: none;
position: static;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
right: 0px;
}

#stopka {
height: 60px;
width: 100%;
overflow: visible;

visibility: visible;
clear: both;

}

.buttons {
text-align: center;
height: 40px;
width: 175px;
position: relative;
top: 0px;
left: 0px;
margin: 23px 0px 0px 16px;
background-position: center;
padding: 0px;
}

#center_box {
height: auto;
width: 560px;
overflow: hidden;
}

.tekst {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: left;
}

.heading_main {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}

Generalnie:

1) upewnij się, że #left_box w arkuszu stylów i w kodzie html mają taką samą nazwę (w twoim przykładzie nie mają)
2) pomieszałeś pozycjonowania, wstawiając niepotrzebne z-indeksy i dziwności w stylu "float:bottom"
3) nadal można, a nawet trzeba wprowadzić do kodu wiele poprawek. Zbytnio kombinujesz, a całość można by rozpisać na kilku divach.

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.