Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Osuwanie się strony w dół.
Forum PHP.pl > Forum > Po stronie przeglądarki
Recik
18.05.2011, 19:25:23
Witam.. ma problem. Jakim cudem, gdy utworzę sobie nowego diva na dole strony to osuwa mi się automatycznie cała strona? Nowy div pokazuje się na górze strony. Jak to możliwe, jeżeli umieściłem go w kodzie strony na samym dole?

Pozdrawiam.
Kshyhoo
18.05.2011, 19:29:57
Albo pokaż kod, albo idź do wróżki...
Recik
18.05.2011, 19:30:29 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3c.org/1999/xhtml" xml:lang="pl" lang="pl">
  4.  
  5.  
  6. <head>
  7. <title>BEST - Oficjalna Strona</title>
  8. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  9. <link rel="stylesheet" href="style.css" type="text/css" media="all"  />
  10. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  11. <script type="text/javascript" src="swfobject.js"></script>
  12.  
  13.  
  14.  
  15. </head>
  16.  
  17. <body>
  18.  
  19.  
  20. <div id="container">     
  21.  
  22. 	<div id="logo"></div>
  23.  
  24. 							<div id="girder">
  25.  
  26.                         <a href="#" onClick="$('#tu_wczytuj').load('inc/home.php')"><div id="home"></div></a>
  27.                         <a href="#" onClick="$('#tu_wczytuj').load('inc/zespol.php')"><div id="ozespole"></div></a>
  28.                         <a href="index3.php?id=foto" target="_blank"><div id="galeria"></div></a>
  29. 						<a href="#" onClick="$('#tu_wczytuj').load('inc/plytoteka.php')"><div id="multimedia"></div></a>
  30.                         <a href="#" onClick="$('#tu_wczytuj').load('inc/plytoteka.php')"><div id="plytoteka"></div></a>
  31.                         <a href="#" onClick="$('#tu_wczytuj').load('inc/partnerzy.php')"><div id="partnerzy"></div></a>
  32.                         <a href="#" onClick="$('#tu_wczytuj').load('inc/kontakt.php')"><div id="kontakt"></div></a>
  33.  
  34.  
  35.  
  36. 						</div>
  37.  
  38. 						<div id="news_gora"></div>
  39. 						<div id="news_center">
  40. 						<div id="#tu_wczytuj">
  41. 						<?
  42. 						include ("inc/home.php");
  43. 						?>
  44. 						</div>
  45. 						</div>
  46. 						<div id="news_down"></div>
  47.  
  48.  
  49.  
  50.   </div>                          
  51. </body>
[HTML] pobierz, plaintext



To właśnie ten "news_down" pokazuje się na samej górze.
GyniO
18.05.2011, 19:39:06
A css skąd mam wziąć?
Recik
18.05.2011, 19:40:47 
[HTML] pobierz, plaintext 
  1. html, body {
  2. margin: 0;
  3. padding: 0;
  4. }
  5.  
  6. a img {
  7.     border: none;
  8. }
  9.  
  10. body {
  11. background: #000000;
  12. background-image: url('images/bg.jpg');
  13. background-repeat: no-repeat;
  14. background-position: top;
  15.  
  16. }
  17.  
  18. #container{
  19.  
  20.  
  21.     width: 1100px;
  22.     margin: 0 auto;
  23. }
  24.  
  25. #logo{
  26.  
  27. width: 577px;
  28. height: 118px;
  29. background-image: url(images/logo.png);
  30. float: left;
  31. margin-top: 30px;
  32. position: static;
  33. }
  34. #koncerty{
  35.  
  36. width: 592px;
  37. height: 45px;
  38. background-image: url(images/koncerty.png);
  39. margin-left: 430px;
  40. margin-top: 70px;
  41.  
  42.  
  43. }
  44. #girder{
  45.  
  46. width: 761px;
  47. height: 63px;
  48. background-image: url(images/belka_navi.png);
  49. margin-left: 429px;
  50. margin-top: 30px;
  51. position: absolute;
  52.  
  53. }
  54. #home{
  55.  
  56. width: 111px;
  57. height: 63px;
  58. background-image: url(images/home.png); 
  59. margin-top: -5px;
  60. margin-left: 10px;
  61. position: absolute;
  62. }
  63. #home:hover{
  64.  
  65. width: 111px;
  66. height: 63px;
  67. background-image: url(images/home_hover.png); 
  68. background-repeat: no-repeat;
  69. margin-top: -5px;
  70. margin-left: 10px;
  71. position: absolute;
  72. }
  73. #ozespole{
  74.  
  75. width: 116px;
  76. height: 52px;
  77. background-image: url(images/ozespole.png); 
  78. margin-top: 4px;
  79. margin-left: 117px;
  80. position: absolute;
  81. }
  82. #ozespole:hover{
  83.  
  84. width: 116px;
  85. height: 52px;
  86. background-image: url(images/ozespole_hover.png); 
  87. margin-top: 4px;
  88. margin-left: 117px;
  89. position: absolute;
  90.  
  91. }
  92. #galeria{
  93.  
  94. width: 115px;
  95. height: 51px;
  96. background-image: url(images/galeria.png); 
  97. margin-top: 4px;
  98. margin-left: 230px;
  99. position: absolute;
  100.  
  101. }
  102. #galeria:hover{
  103.  
  104. width: 115px;
  105. height: 51px;
  106. background-image: url(images/galeria_hover.png); 
  107. margin-top: 4px;
  108. margin-left: 230px;
  109. position: absolute;
  110. }
  111. #multimedia{
  112.  
  113. width: 113px;
  114. height: 50px;
  115. background-image: url(images/multimedia.png); 
  116. margin-top: 5px;
  117. margin-left: 345px;
  118. position: absolute;
  119. }
  120. #multimedia:hover{
  121.  
  122. width: 113px;
  123. height: 50px;
  124. background-image: url(images/multimedia_hover.png); 
  125. margin-top: 5px;
  126. margin-left: 345px;
  127. position: absolute;
  128.  
  129. }
  130. #plytoteka{
  131.  
  132. width: 115px;
  133. height: 52px;
  134. background-image: url(images/plytoteka.png); 
  135. margin-top: 4px;
  136. margin-left: 450px;
  137. position: absolute;
  138.  
  139. }
  140. #plytoteka:hover{
  141.  
  142. width: 115px;
  143. height: 52px;
  144. background-image: url(images/plytoteka_hover.png); 
  145. background-repeat: no-repeat;
  146. margin-top: 4px;
  147. margin-left: 450px;
  148. position: absolute;
  149.  
  150. }
  151. #kontakt{
  152.  
  153. width: 114px;
  154. height: 51px;
  155. background-image: url(images/kontakt.png); 
  156. margin-top: 4px;
  157. margin-left: 570px;
  158. position: absolute;
  159.  
  160. }
  161. #kontakt:hover{
  162.  
  163. width: 114px;
  164. height: 51px;
  165. background-image: url(images/kontakt_hover.png); 
  166. margin-top: 4px;
  167. margin-left: 570px;
  168. position: absolute;
  169.  
  170. }
  171. #news_gora{
  172.  
  173. width: 906px;
  174. height: 64px;
  175. background-image: url(images/news_bg.png); 
  176. background-repeat: no-repeat;
  177. margin-top: 570px;
  178. margin-left: 100px;
  179. position: absolute;
  180.  
  181. }
  182.  
  183. #linie_news{
  184.  
  185. width: 970px;
  186. height: 130px;
  187. background-image: url(images/linie_news.png); 
  188. margin-top: 32px;
  189. margin-left: -680px;
  190.  
  191. }
  192. #news_center{
  193.  
  194. margin-top: 622px;
  195. margin-left: 97px;
  196. width: 926px;
  197. height: auto;
  198. background-image: url(images/news_center.png);
  199. background-repeat: repeat-y;
  200. position: absolute;
  201.  
  202.  
  203.  
  204. }
  205.  
  206. #news_down{
  207.  
  208. width: 892px;
  209. height: 26px;
  210. background-image: url(images/news_dol.png);
  211. margin-left: 9px;
  212. margin-top: 100px;
  213. position: relative;
  214. }
[HTML] pobierz, plaintext
Kshyhoo
18.05.2011, 19:57:58
Zapewne winne pozycjonowanie:
[HTML] pobierz, plaintext 
  1. #news_down{
  2.   width: 892px;
  3.   height: 26px;
  4.   background-image: url(images/news_dol.png);
  5.   margin-left: 9px;
  6.   margin-top: 100px;
  7.   position: relative;
  8. }
[HTML] pobierz, plaintext

Spróbuj dać position: absolute;
Recik
18.05.2011, 20:02:31
Tak, wszystko byłoby dobrze, tylko jest jedno ale. news_down jest to zakończenie newsów, tak więc nie mogę wypozycjonowować tego z position: absolute; ponieważ nie będzie mi się automatycznie opuszczało w dół po wpisaniu newsów. Nie wiem dlaczego ten div mi się pojawia na samej górze.
Kshyhoo
18.05.2011, 20:06:22
No to daj mu szerokość taką, żeby nie wskoczył na miejsce innego i użyj floatowania.
Recik
18.05.2011, 20:10:00
Bardziej nurtuje mnie pytanie jakim cudem div który jest pod wszystkimi divami w całej stronie pokazuje się na samej górze?
Kshyhoo
18.05.2011, 20:15:47
Źle myślisz. DIV to nie komórka tabeli i zachowuje się inaczej. Jeżeli nie będzie wypozycjonowany, wskoczy tam, gdzie mu każe przeglądarka...
Możesz spróbować dać tak, ale nie ręczę za efekt:
[HTML] pobierz, plaintext 
  1. position: relative;
  2. bottom: 0;
[HTML] pobierz, plaintext
Recik
18.05.2011, 20:20:38
Troszkę pomieszałem te divy i pomogło.
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.