Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS] problemy ze stopką, Proszę o pomoc!
avatar79
post 13.12.2007, 19:44:07
Post #1





Grupa: Zarejestrowani
Postów: 11
Pomógł: 0
Dołączył: 12.12.2007

Ostrzeżenie: (0%)
-----

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 
  1. <body>
  2. <div id="main">
  3.   <div id="top"><img src="../img/banner770X140-Czolowka2.jpg" alt="baner" width="770" height="140" border="0" usemap="#Map" />
  4.       <map name="Map" id="Map">
  5.         <area shape="rect" coords="0,0,177,140" href="../index.html" alt="Back to Main" />
  6.       </map>
  7.   </div>
  8.   <div class="link" id="pasek">
  9.     <div align="right"><a href="../kontakt/kontakt.html" class="link">Kontakt</a>&nbsp; </div>
  10.   </div>
  11.   <div id="left_box_podstrony">
  12.     <div class="buttons">buton1</div>
  13.     <div class="buttons">buton2</div>
  14.     <div class="buttons">buton3</div>
  15.     <div class="buttons">buton4</div>
  16.     <div class="buttons">buton5</div>
  17.   </div>
  18.   <div id="center_box">
  19.     <table width="96%" border="0" align="center" cellpadding="5" cellspacing="0">
  20.       <tr>
  21.         <td>tekst</td>
  22.       </tr>
  23.     </table>
  24.   </div>
  25.   <div id="stopka">Content for  id "stopka" Goes Here</div>
  26. </div>
  27. </body>
  28. </html>
[HTML] pobierz, plaintext


style wyglądają następująco:

[HTML] pobierz, plaintext 
  1. #top {
  2.     height: 140px;
  3.     width: 770px;
  4.     left: 0px;
  5.     top: 0px;
  6.     position: absolute;
  7.     z-index: 1;
  8.     background-repeat: no-repeat;
  9. }
  10.  
  11.  
  12. #main {
  13.     position: relative;
  14.     width: 770px;
  15.     height: 100%;
  16.     margin: 0px;
  17. }
  18.  
  19. body #main {
  20.     margin-right: auto;
  21.     margin-left: auto;
  22.     height: auto;
  23.     position: relative;
  24. }
  25.  
  26. #pasek {
  27.     position: absolute;
  28.     height: 20px;
  29.     width: 770px;
  30.     left: 0px;
  31.     top: 140px;
  32.     z-index: 2;
  33. }
  34.  
  35. #left_box {
  36.     position: absolute;
  37.     height: 360px;
  38.     width: 210px;
  39.     left: 0px;
  40.     top: 160px;
  41.     background-image: url(img/boxPodstrona1ramkaObrazek.jpg);
  42.     overflow: hidden;
  43.     background-repeat: no-repeat;
  44.     background-position: center center;
  45. }
  46.  
  47. .link {
  48.     padding-right: 0px;
  49.     padding-left: 0px;
  50.     color: #4092C2;
  51.     text-decoration: none;
  52.     position: static;
  53.     font-family: Arial, Helvetica, sans-serif;
  54.     font-size: 12px;
  55.     right: 0px;
  56. }
  57.  
  58. #stopka {
  59.     height: 60px;
  60.     width: 100%;
  61.     overflow: visible;
  62.     position: absolute;
  63.     left: 0px;
  64.     z-index: auto;
  65.     visibility: visible;
  66.     clear: both;
  67.     vertical-align: 100%;
  68. }
  69.  
  70. .buttons {
  71.     text-align: center;
  72.     height: 40px;
  73.     width: 175px;
  74.     position: relative;
  75.     top: 0px;
  76.     left: 0px;
  77.     margin: 23px 0px 0px 16px;
  78.     background-position: center;
  79.     padding: 0px;
  80. }
  81.  
  82. #center_box {
  83.     height: auto;
  84.     width: 560px;
  85.     left: 212px;
  86.     top: 157px;
  87.     z-index: 4;
  88.     position: absolute;
  89.     float: bottom;
  90.     overflow: hidden;
  91. }
  92.  
  93. .tekst {
  94.     font-family: Arial, Helvetica, sans-serif;
  95.     font-size: 11px;
  96.     text-align: left;
  97. }
  98.  
  99. .heading_main {
  100.     font-family: Arial, Helvetica, sans-serif;
  101.     font-size: 18px;
  102. }
[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....

Ten post edytował JaRoPHP 13.12.2007, 19:58:28
Powód edycji: Proszę używać bbcode. Tym razem poprawiam.
Go to the top of the page
+Quote Post
Garrappachc
post 13.12.2007, 20:59:45
Post #2





Grupa: Zarejestrowani
Postów: 76
Pomógł: 2
Dołączył: 15.11.2007
Skąd: Kraków

Ostrzeżenie: (0%)
-----

Usuń position: absolute ze stopki


--------------------


CPU | GPU | RAM | HDD | OS
Go to the top of the page
+Quote Post
--avatar79--
post 14.12.2007, 16:55:08
Post #3





Goście
Cześć kiedy zabieram position: absolute to stopka wskakuje na samą górę....
Go to the top of the page
+Quote Post
charlie-cherry
post 15.12.2007, 22:55:35
Post #4





Grupa: Zarejestrowani
Postów: 93
Pomógł: 5
Dołączył: 15.12.2007

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 18.07.2025 - 01:34
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn