Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> szablon serwisu na div'ach, problem z pozycjonowaniem
rozny
post
Post #1





Grupa: Zarejestrowani
Postów: 116
Pomógł: 0
Dołączył: 14.01.2004
Skąd: Zielona Góra

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

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 (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Dzieki za zainteresowanie i ewentualna pomoc (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

pozdrawiam!

Nikt nie ma pomyslu jak to rozwiazac? bardzo prosze o pomoc, bo bede zmuszony zrezygnowac ze stopki wogole (IMG:http://forum.php.pl/style_emoticons/default/sad.gif)

Ten post edytował rozny 15.11.2006, 23:58:28
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 3)
dooq
post
Post #2





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 28.11.2006

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

#footer {
position: absolute;
/*bottom: 5px;*/
width: auto;
height: 50px;
clear: both;
border: 1px solid black;
background-color: #f6f5f1;
z-index: 5;
}
Go to the top of the page
+Quote Post
Saddam92
post
Post #3





Grupa: Zarejestrowani
Postów: 69
Pomógł: 0
Dołączył: 17.11.2006

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

http://forum.php.pl/index.php?showtopic=56977
http://www.webtips.pl/post6163.html
http://www.webtips.pl/post7929.html

polecam przejrzeć te linki.. (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) i jeśli sposób podany przez doog'a nic nie da.. zbudowac ten szablon od nowa.. (IMG:http://forum.php.pl/style_emoticons/default/sad.gif)
Go to the top of the page
+Quote Post
Kreton
post
Post #4





Grupa: Zarejestrowani
Postów: 345
Pomógł: 3
Dołączył: 20.02.2005

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

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

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

 

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

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

RSS Aktualny czas: 23.08.2025 - 17:17
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn