Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: szablon serwisu na div'ach
Forum PHP.pl > Forum > Po stronie przeglądarki
rozny
16.11.2006, 10:32:11
Witam!

Mam maly problem przy pozycjonowaniu blokow div.

Zrobilem juz 3 kolumny srodkowe + 1 gorna i wszystko pasi. Problem jest kiedy chce dorobic piata kolumne dla stopki. Nie moge jej wypozycjonowac i dociagnac do niej 3 srodkowe kolumny. Zawsze wskakuje mi pod 2 srodkowa kolumne i pozycjonuje sie wobec niej. Div footer znajduje sie na samym koncu pliku index. Nie znajduje sie w zadnym divie, wiec powinna sie pozycjonwac wzgledem okna przegladarki. Tutaj cos nie pasuje. Pozycjonujac go do TOP pozycjonuje sie wzgledem okna przegladarki. Pozycjonujac BOTTOM wzgledem nie wiem czego, ale na pewno nie wzgledem przegladarki. Nie wiem o co chodzi... Macie index:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
  3. <head>
  4. 	<link rel="stylesheet" href="styl.css" type="text/css" />
  5.       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  6.       <title>GASTRO-RODAN Centrum Wyposażenia Gastronomii i Hoteli - Witamy!!!</title>
  7.  
  8. </head>
  9.  
  10. <body>
  11.  
  12. <div id="logo">
  13. <img src="img/logo.gif" alt="logo" />
  14.  
  15.  
  16. 	<div id="sublogo">
  17. 		<img src="img/search.png" class="imgsearch" alt="szukaj" />
  18. 		<form action="?=search.php" method="post">
  19. 		<p><input type="text" name="search" class="topsearch" /></p>
  20. 		</form>
  21. 	</div>
  22.  
  23. 	<div id="sublogo_1">
  24. 		<strong>Szukaj w serwisie</strong>
  25. 	</div>
  26. 	<div class="logo_menu">
  27. <?php
  28. 	if (isset($_GET['menu'])) {
  29. 	$ext = ".inc";
  30. 	if ($_GET['menu'] == sklep) {
  31. 	include ("includes/logo_menu$ext");
  32. 	}
  33. 	}
  34. 	?>
  35. 	</div>
  36. </div>
  37.  
  38. <div id="szablon">
  39.  
  40. <?php include ("engine/engine.php"); ?>
  41.  
  42. </div>
  43.  
  44. <div id="left">
  45. 	<?php
  46. 	if (!isset($_GET['menu'])) {
  47. 	include ("includes/menu.inc");
  48. 	include ("includes/info.inc");
  49. 	}
  50. 	else {
  51. 	$ext = ".inc";
  52. 	$dir = "includes/";
  53. 	include ($dir.$_GET['menu'].$ext);
  54. 	}
  55. 	?>
  56. </div>
  57.  
  58. <div id="right">
  59. 	<?php
  60. 	include ("includes/promo.inc");
  61. 	?>
  62. </div>
  63.  
  64. <div id="footer">
  65. </div>
  66. </body>
  67. </html>
[HTML] pobierz, plaintext


a tutaj css'a:

[HTML] pobierz, plaintext 
  1. body {
  2. 	background-color: #aeaa89;
  3. 	margin: 20px 20px;
  4. 	padding: 0;
  5. 	font-size: 14px;
  6. 	background-image : url(img/bg.jpg);
  7. 	background-repeat : repeat-x;
  8. 	overflow: auto;
  9. }
  10.  
  11. div > h1 {
  12. 	margin-top: 0;
  13. }
  14.  
  15. #logo {
  16. 	position: relative;
  17. 	width: auto;
  18. 	min-width: 50px;
  19. 	height: 124px;
  20. 	margin: 0;
  21. 	border: 1px solid black;
  22. 	border-bottom: 0;
  23. 	background-color: #f6f5f1;
  24. 	padding: 10px;
  25. 	z-index: 3;
  26. }
  27.  
  28. #szablon {
  29.  
  30. 	position: relative;
  31. 	width: auto;
  32. 	min-width: 50px;
  33. 	height: 100%;
  34. 	min-height: 300px;
  35. 	margin: 0px 141px 0px 221px;
  36. 	border: 1px solid black;
  37. 	border-top: 1px solid black;
  38. 	background-color: #f6f5f1;
  39. 	padding: 10px;
  40. 	z-index: 4;
  41. }
  42.  
  43. #left {
  44. 	position: absolute;
  45. 	width: 200px;
  46. 	height: auto;
  47. 	min-height: 300px;
  48. 	top: 165px;
  49. 	left: 20px;
  50. 	font-size: 14px;
  51. 	border-top: 1px solid black;
  52. 	border-left: 1px solid black;
  53. 	border-bottom: 1px solid black;
  54. 	border-right: 1px solid black;
  55. 	background-color: #d2d0be;
  56. 	padding: 1% 10px;
  57. 	z-index: 5;
  58. }
  59.  
  60. #right {
  61. 	position: absolute;
  62. 	width: 120px;
  63. 	height: auto;
  64. 	min-height: 300px;
  65. 	top: 155px;
  66. 	right: 20px;
  67. 	font-size: 14px;
  68. 	border: 1px solid black;	
  69. 	background-color: #d2d0be;
  70. 	padding: 10px;
  71. 	z-index: 2;
  72. }
  73.  
  74. #footer {
  75.          position: absolute;
  76.          bottom: 5px;
  77. 	 width: auto;
  78. 	 height: 50px;
  79.          clear: both;
  80. 	 border: 1px solid black;
  81. 	 background-color: #f6f5f1;
  82. 	 z-index: 5;
  83. }
  84.  
  85. #sublogo {
  86. 	position: absolute;
  87. 	width: 120px;
  88. 	height: 5px;
  89. 	top: 0px;
  90. 	right: 0px;
  91. 	font-size: 14px;
  92. 	border: 0px solid black;
  93. 	border-bottom: 1px solid black;	
  94. 	padding: 10px;
  95. 	z-index: 2;
  96. }
  97.  
  98. #sublogo_1 {
  99. 	position: absolute;
  100. 	width: 120px;
  101. 	height: auto;
  102. 	top: 28px;
  103. 	right: 0px;
  104. 	font-size: 14px;
  105. 	text-align: right;
  106. 	border: 0px solid black;
  107. 	padding: 10px;
  108. 	z-index: 2;
  109. }
  110.  
  111.  
  112. ul.menu {
  113. 	list-style: none;
  114. 	padding: 0;
  115. 	margin: 0;
  116. 	border: 1px solid black;
  117. 	background-color: #f6f5f1;
  118. }
  119.  
  120. ul.menu li a:link {
  121. 	display: block;
  122. 	text-decoration: none;
  123. 	margin: 0;
  124. 	width: 88%;
  125. 	padding: 2px 6%;
  126. 	font: bold 1em/1.5 "arial, sans-serif";
  127. 	color: #000000;
  128. 	border-top: 1px solid black;
  129. }
  130.  
  131. ul.menu li a:visited {
  132. 	display: block;
  133. 	text-decoration: none;
  134. 	margin: 0;
  135. 	width: 88%;
  136. 	padding: 2px 6%;
  137. 	font: bold 1em/1.5 "arial, sans-serif";
  138. 	color: #000000;
  139. 	border-top: 1px solid black;
  140.  
  141. }
  142.  
  143. ul.menu li a:hover {
  144. 	display: block;
  145. 	text-decoration: none;
  146. 	margin: 0;
  147. 	width: 88%;
  148. 	padding: 2px 6%;
  149. 	font: bold 1em/1.5 "arial, sans-serif";
  150. 	color: #000000;
  151. 	border-top: 1px solid black;
  152. 	background-color: #e4e3d8;
  153.  
  154. }
  155.  
  156. h1.menu {
  157. 	font-size: 1.2em;
  158. 	padding: 0;
  159. 	text-align: center;
  160. }
  161.  
  162. ul.menu ul.submenu {
  163. 	list-style: none;
  164. 	margin: 0;
  165. 	padding: 0;
  166.  
  167. }
  168.  
  169. ul.menu ul.submenu li {
  170.  
  171. 	padding: 0;
  172. }
  173.  
  174. ul.menu ul.submenu li a:link {
  175. 	display: block;
  176. 	width: 99%;
  177. 	padding: 1px;
  178. 	font: bold 0.7em/1.5 verdana, sans-serif;
  179. 	color: #5c6f90;
  180.  
  181. }
  182.  
  183. ul.menu ul.submenu li a:visited {
  184. 	display: block;
  185. 	width: 99%;
  186. 	padding: 1px;
  187. 	font: bold 0.7em/1.5 verdana, sans-serif;
  188. 	color: #5c6f90;
  189.  
  190. }
  191.  
  192. ul.menu ul.submenu li a:hover {
  193. 	display: block;
  194. 	width: 99%;
  195. 	padding: 1px;
  196. 	font: bold 0.7em/1.5 verdana, sans-serif;
  197. 	color: #5c6f90;
  198. 	background-color: #e4e3d8;;
  199. }
  200.  
  201. div.info {
  202.  
  203. 	position: relative;
  204. 	width: 180px;
  205. 	height: auto;
  206. 	min-height: 100px;
  207. 	top: 10px;
  208. 	left: 0;
  209. 	font-size: 14px;
  210. 	border: 1px solid black;
  211. 	background-color: #f6f5f1;
  212. 	padding: 1% 10px;
  213. 	z-index: 5;
  214.  
  215. }
  216.  
  217. input.topsearch {
  218. 	position: absolute;
  219. 	background-color: #aeaa89;
  220. 	border: 1px solid black;
  221. 	top: 2px;
  222. 	right: 5px;
  223. 	width: 100px;
  224. }
  225.  
  226. .imgsearch {
  227. 	vertical-align: right;
  228. 	margin-left: 120px;
  229. }
  230.  
  231. div.logo_menu {
  232. 	position: absolute;
  233. 	top: 119px;
  234. 	left: 150px;
  235. 	border-top: 1px solid black;
  236. 	height: 5px;
  237. 	background-color: transparent;
  238. }
  239.  
  240. div.logo_menu a:link {
  241. 	padding: 1px;
  242. 	font: bold 0.9em/1.5 verdana, sans-serif;
  243. 	color: #000000;
  244. 	text-decoration: none;
  245. 	background-color: transparent;
  246. }
  247.  
  248. div.logo_menu a:visited {
  249. 	padding: 1px;
  250. 	font: bold 0.9em/1.5 verdana, sans-serif;
  251. 	color: #000000;
  252. 	text-decoration: none;
  253. 	background-color: transparent;
  254. }
  255.  
  256. div.logo_menu a:hover {
  257. 	padding: 1px;
  258. 	font: bold 0.9em/1.5 verdana, sans-serif;
  259. 	color: #aeaa89;
  260. 	text-decoration: none;
  261. 	background-color: transparent;
  262. }
  263.  
  264. img.info {
  265. 	display: block;
  266. 	margin-left: 38px;
  267. 	margin-bottom: 10px;
  268. 	border: 1px solid black;
  269. }
  270.  
  271. p.projekt {
  272. 	position: relative;
  273. 	left: 50px;
  274. }
  275.  
  276. ul.list_info {
  277. 	list-style: none;
  278. 	padding: 0;
  279. 	margin: 0;
  280. 	border: 0;
  281. 	background-color: #f6f5f1;
  282. }
  283.  
  284. #sublogo {
  285. 	position: absolute;
  286. 	width: 250px;
  287. 	height: 86%;
  288. 	top: 0;
  289. 	right: 0;
  290. 	font-size: 14px;
  291. 	border: 0px solid black;
  292. 	background-color: #f6f5f1;
  293. 	background-image: url("img/shader.gif");
  294. 	background-repeat: no-repeat;
  295. 	padding: 10px;
  296. 	z-index: 0;
  297. }
  298.  
  299. h7 {
  300. 	display: block;
  301. 	background-color: #f6f5f1;
  302. 	border: 1px solid black;
  303. 	border-bottom: 0;
  304. 	text-align: center;
  305. 	width: 120px;
  306. }
  307.  
  308. .inf {
  309. 	background-color: #f6f5f1;
  310. 	background-image : url(img/bg_inf.gif);
  311. 	background-repeat: no-repeat;
  312. 	background-position: bottom;
  313. 	width: 120px;
  314. 	height: auto;
  315. 	border: 0px solid black;
  316. 	margin-bottom: 10px;
  317. }
[HTML] pobierz, plaintext


Tutaj jest link do stronki:
strona www

PS. Skrypty php sa tymczasowe, poprostu musze zapelnic czyms bloki winksmiley.jpg

Dzieki za zainteresowanie i ewentualna pomoc smile.gif

pozdrawiam!

Nikt nie ma pomyslu jak to rozwiazac? bardzo prosze o pomoc, bo bede zmuszony zrezygnowac ze stopki wogole sad.gif
dooq
28.11.2006, 17:51:19
#footer {
position: absolute;
/*bottom: 5px;*/
width: auto;
height: 50px;
clear: both;
border: 1px solid black;
background-color: #f6f5f1;
z-index: 5;
}
Saddam92
28.11.2006, 20:39:15
http://forum.php.pl/index.php?showtopic=56977
http://www.webtips.pl/post6163.html
http://www.webtips.pl/post7929.html

polecam przejrzeć te linki.. smile.gif i jeśli sposób podany przez doog'a nic nie da.. zbudowac ten szablon od nowa.. sad.gif
Kreton
29.11.2006, 09:43:57
Moim zdaniem powinieneś, w przypadku takiego rozmieszczenia elementów porzucić pozycjonowanie absolutne i relatywne. Uważam, że da radę to zrobić używając po prostu pływania DIV-ów w jakimś DIV-ie.
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.