Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS][PHP]Gdy usunę linijkę tekstu to wszystko na stronie traci pozycje
Forum PHP.pl > Forum > Przedszkole
bunga
6.08.2012, 21:17:08
Problem wygląda następująco. Mam sekcje "opis". W niej 7 linijek tekstu. Gdy usunę 1 linijkę to "opis1" podchodzi do góry. Gdy usunę, np. 4 kolejne linijki to już wszystko na stronie nie jest na swoim miejscu.

Ludzie, ratujcie. Sram się z tą stroną dzisiaj od samego rana, a tutaj chce zmienić sekcje i lipa.
Wrzucam kod, mam nadzieje, że nie dostaniecie oczopląsów, gdyż kod jest trochę obszerny..

HTML:

[HTML] pobierz, plaintext 
  1. <nav id="nawigacja" class="anchor">
  2.  			<div class="container">
  3.  				<div class="logo"><a href="index.php">Mazurski 1.0</a></div>
  4.  				<div class="menu"><a href="#opis3" rel="rozsuwane_1">Serwer</a> &nbsp;&nbsp;&nbsp;&nbsp; <a href="#opis1">Rejestracja</a> &nbsp;&nbsp;&nbsp;&nbsp; <a href="#forum">Forum</a> <p5><?php print (''.$_SERVER['REMOTE_ADDR'].''); ?></p5>
  5.  
  6.  				</div>
  7.  				<div class="jezyk"><a href="en/index.php"> </a></div>
  8.  			</div>
  9.  		</nav>
  10.  		<div id="status"><br>
  11.  		<? include 'config.php';?>
  12. <?php
  13. $ilosc = count(glob("$diraccount/*.*"));
  14. $ilosc_monsters = count(glob("$dirmonsters/*.*"));
  15. ?>
  16. <div style="position: relative; top: -10px;">
  17. <font color=red><b><?=$nazwa_serwera?></b><br></font>
  18. <b>IP: <?=$ip_serwera?><br>
  19. PORT: <?=$port_serwera?></b><br>
  20. Istniejących kont: <?=$ilosc;?><br>
  21. Ilość potworów: <?=$ilosc_monsters;?><br>
  22. </div>
  23.  
  24.  
  25.  
  26. <?php
  27.  
  28. $info = chr(6).chr(0).chr(255).chr(255).'info';
  29. $sock = @fsockopen($ip_serwera, $port_serwera, $errno, $errstr, 1);
  30.  
  31. if ($sock)
  32. {
  33.     fwrite($sock, $info);
  34.     $data='';
  35.  
  36.     while (!feof($sock))
  37.         $data .= fgets($sock, 1024);
  38.     fclose($sock);
  39.  
  40.     print '<div style="position: relative; top: -23px; font-size: 13; font-weight: bold; color: darkgreen"><br><font color="green">ONLINE!</font></div>';
  41. preg_match('/players online="(\d+)" max="(\d+)" peak="(\d+)"/', $data, $matches);
  42.     print '<div style="position: relative; top: -25px; font-size: 11; font-weight: normal; color: #000000"><font face="verdana"><strong>Graczy:</strong></font> ';
  43.     print $matches[1] . '/' . $matches[2];
  44.  
  45.     preg_match('/uptime="(\d+)"/', $data, $matches);
  46.     $h = floor($matches[1] / 3600);
  47.     $m = floor(($matches[1] - $h*3600) / 60);
  48.  
  49.  
  50.     print "<br><strong>Uptime:</strong> $h " . ($h==1? 'godzina' : ($h==2||$h==3||$h==4? 'godziny' : 'godzin'));
  51.     print " $m " . ($m==1? 'minuta' : ($m==12||$m==13||$m==14? 'minut' : ($m%10==2||$m%10==3||$m%10==4? 'minuty' : 'minut'))) . '</div>';
  52. }
  53. else
  54.     print '<div style="position: relative; top: -23px;font-size: 13; font-weight: bold; color: red"><br>OFF!</div>';
  55.  
  56.  
  57. ?> </strong></div>
  58. 		<header class="anchor">	
  59.  
  60. 	 		<div class="container">	 			
  61. 		 			<div id="content">
  62.  
  63. <div class="content-top">
  64.  
  65. <div class="content-bot">
  66.  
  67.  
  68.  
  69.     <div id="homepage">
  70.  
  71.         <div id="left">
  72.  
  73.  
  74. 		<script type="text/javascript" src="slideshow.js?v42"></script>
  75.  
  76. 		<script type="text/javascript" src="/wow/static/local-common/js/third-party/swfobject.js?v42"></script>
  77.  
  78.  
  79.  
  80.     <div id="slideshow" class="ui-slideshow">
  81.  
  82.         <div class="slideshow">
  83.  
  84.  
  85.  
  86. 				<div class="slide" id="slide-0"
  87.  
  88. 					style="background-image: url(images/1.png); ">
  89.  
  90.  
  91.  
  92. 				</div>
  93.  
  94.  
  95.  
  96. 				<div class="slide" id="slide-1"
  97.  
  98. 					style="background-image: url(images/2.png); display: none;">
  99.  
  100.  
  101.  
  102. 				</div>
  103.  
  104.  
  105.  
  106. 				<div class="slide" id="slide-2"
  107.  
  108. 					style="background-image: url(images/3.png); display: none;">
  109.  
  110.  
  111.  
  112. 				</div>
  113.  
  114.  
  115.  
  116. 				<div class="slide" id="slide-3"
  117.  
  118. 					style="background-image: url('images/4.png'); display: none;">
  119.  
  120.  
  121.  
  122. 				</div>
  123.  
  124.  
  125.  
  126. 				<div class="slide" id="slide-4"
  127.  
  128. 					style="background-image: url('images/5.png'); display: none;">
  129.  
  130.  
  131.  
  132. 				</div>
  133.  
  134. 		</div>
  135.  
  136.  
  137.  
  138. 			<div class="paging">
  139.  
  140.  
  141.  
  142. 					<a href="java script:;" id="paging-0"
  143.  
  144. 					   onclick="Slideshow.jump(0, this);"
  145.  
  146. 						onmouseover="Slideshow.preview(0);"
  147.  
  148. 						class="current">
  149.  
  150. 					</a>
  151.  
  152.  
  153.  
  154. 					<a href="java script:;" id="paging-1"
  155.  
  156. 					   onclick="Slideshow.jump(1, this);"
  157.  
  158. 						onmouseover="Slideshow.preview(1);"
  159.  
  160. 						>
  161.  
  162. 					</a>
  163.  
  164.  
  165.  
  166. 					<a href="java script:;" id="paging-2"
  167.  
  168. 					   onclick="Slideshow.jump(2, this);"
  169.  
  170. 						onmouseover="Slideshow.preview(2);"
  171.  
  172. 						>
  173.  
  174. 					</a>
  175.  
  176.  
  177.  
  178. 					<a href="java script:;" id="paging-3"
  179.  
  180. 					   onclick="Slideshow.jump(3, this);"
  181.  
  182. 						onmouseover="Slideshow.preview(3);"
  183.  
  184. 						>
  185.  
  186. 					</a>
  187.  
  188.  
  189.  
  190. 					<a href="java script:;" id="paging-4"
  191.  
  192. 					   onclick="Slideshow.jump(4, this);"
  193.  
  194. 						onmouseover="Slideshow.preview(4);"
  195.  
  196. 						class=" last-slide">
  197.  
  198. 					</a>
  199.  
  200. 			</div>
  201.  
  202.  
  203.  
  204. 		<div class="caption">
  205.  
  206. 			<h3><a href="#" class="link"></a></h3>
  207.  
  208.  
  209.  
  210. 		</div>
  211.  
  212.  
  213.  
  214. 		<div class="preview"></div>
  215.  
  216. 		<div class="mask"></div>
  217.  
  218.     </div>
  219.  
  220.  
  221.  
  222.         <script type="text/javascript">
  223.  
  224.         //<![CDATA[
  225.  
  226.         $(function() {
  227.  
  228.             Slideshow.initialize('#slideshow', [
  229.  
  230.                 {
  231.  
  232. 					image: "images/1.png",
  233.  
  234.  
  235.                     title: "Interesujące miejsca!",
  236.  
  237.                     url: "",
  238.  
  239. 					id: "5469718"
  240.  
  241.                 },
  242.  
  243.                 {
  244.  
  245. 					image: "images/2.png",
  246.  
  247.  
  248.                     title: "Ciekawe zadania!",
  249.  
  250.                     url: "",
  251.  
  252. 					id: "5469724"
  253.  
  254.                 },
  255.  
  256.                 {
  257.  
  258. 					image: "images/3.png",
  259.  
  260.  
  261.                     title: "Niezliczone nagrody!",
  262.  
  263.                     url: "",
  264.  
  265. 					id: "5543230"
  266.  
  267.                 },
  268.  
  269.                 {
  270.  
  271. 					image: "4.png",
  272.  
  273.                  title: "Areny gladiatorów!",
  274.  
  275.                    url: "",
  276.  
  277. 					id: "5490809"
  278.  
  279.                 },
  280.  
  281.                 {
  282.  
  283. 					image: "5.png",
  284.  
  285.  
  286.                     title: "Ogromne piekła z wieloma tajemnicami!",
  287.  
  288.                     url: "",
  289.  
  290. 					id: "5338753"
  291.  
  292.                 }
  293.  
  294.             ]);
  295.  
  296.  
  297.  
  298.         });
  299.  
  300.         //]]>
  301.  
  302.         </script>
  303. 		 			<section id="opis">
  304. 		 				<h1>Acc maker</h1>
  305. 		 				<strong>Cześć!</strong> Jest to ACC Maker napisany specjalnie dla <strong>Tibia.net.pl</strong>!<br>
  306. 		 				Styl strony powstał na podstawie jednego z portfolii. Chciałem napisać coś unikalnego, unikatowego. Chciałem, aby owy ACC maker odróżniał się od innych. Aby nie był taki sam jak reszta. Dwie kolumny po prawej stronie, środek i koluma po lewej. Jest to mój pierwszy ACC Maker. Obecna wersja strony jest pod <strong>XML</strong>. W przyszłości może napiszę wersję SQL! Wszelkie propozycje, błędy etc. proszę zgłaszać w <strong>temacie na forum</strong>, z którego pobraliście owy ACC Maker!<br>
  307. 		 				ss<br>
  308. 		 				s
  309.  
  310.  
  311. 		 						 				<h1>Informacje</h1>
  312. 		 				<p>Wszystkie opisy na stronie głównej można usunąć i edytować według swojego upodobania!<br>
  313. 		 				Proszę nie usuwać tylko <strong>stopki</strong> na samym dole strony!</p>
  314. 									</section>
  315.  
  316. 	 		</div>
  317. 	 		<section id="opis1">
  318.  
  319. 							<h1>Rejestracja</h1>
  320. 			 			<form method="post" action="newacc.php">
  321.  
  322. Account Number:
  323. <?
  324. $account = rand(100000, 999999);
  325. print '<font color="#000000" face="verdana" size="1">' . $account . '</font> <input type="hidden" name="account" value="' . $account . '">' . "\n";
  326.   ?><br>
  327.  
  328.  Nick:<input type="text" name="nick" maxlength="20" /> <p3>(Maksymalnie 20 znaków!)</p3><br>
  329.  Password:<input type="password" name="pass" maxlength="10"><p3>(Maksymalnie 10 znaków!)</p3><br>
  330.  Płeć:<br><input type="radio" name="sex" value="1" checked> Male <br>
  331.  <input type="radio" name="sex" value="0"> Famale <br>
  332.  Klasa:<br><input type="radio" name="vocation" value="1" checked> Sorcerer<br>
  333.  <input type="radio" name="vocation" value="2" > Druid<br>
  334. <input type="radio" name="vocation" value="3" > Paladin<br>
  335. <input type="radio" name="vocation" value="4" > Knight<br>
  336. <input type="submit" value="Create">&nbsp;
  337. <input type="reset" value="Reset">
  338. 		 			</section>
  339. 		 			</form>
  340.  
  341. 		 				 		<section id="opis2">
  342. 		 				 		<h2>Logowanie</h2>
  343. 		 				 		<p4>
  344. 		 				 		Account Number:<input type="text" name="account"><br>		 				 	
  345. 		 				 		Password:<input type="password" name="pass"><br>
  346. 		 				 		<input type="submit" value="Zaloguj!">
  347. 		 				 		</p4>
  348. 		 				 		</section>
  349.  
  350. 		 				 		<section id="opis3">
  351. 		 				 		<h1>Statystyki</h1>
  352.  
  353. <a href="stats.php&showskill=level"><p3>Level</p3></a><br>
  354. <a href="?body=stats&skill=magic"><p3>Magic Level</p3></a><br>
  355. <a href="?body=stats&skill=sword"><p3>Sword</p3></a><br>
  356. <a href="?body=stats&skill=axe"><p3>Axe</p3></a><br>
  357. <a href="?body=stats&skill=club"><p3>Club</p3></a><br>
  358. <a href="?body=stats&skill=distance"><p3>Distance</p3></a><br>
  359. <a href="?body=stats&skill=fist"><p3>Fist</p3></a><br>
  360. <a href="?body=stats&skill=fishing"><p3>Fishing</p3></a><br>
  361. <a href="?body=stats&skill=shield"><p3>Shielding</p3></a><br>
  362. <a href="?body=stats&skill=kills"><p3>Kills Frag</p3></a><br>
  363.  
  364. 		 				 		</section>
  365.  		<div class="galeria">
  366.  	<div class="praca"><div class="first"><img src="images/1a252.png"  alt="" /></div>
  367.  	<div class="praca1"><div class="first"><img src="images/2a252.png" alt="" /></div>
  368.  	<div class="praca2"><div class="first"><img src="images/3a252.png" alt="" /></div>
  369.  		</div>
  370.  		<div style="clear: both"></div>
  371.  		</header>
  372.  
[HTML] pobierz, plaintext

bunga
6.08.2012, 21:19:59
CSS:

[PHP] pobierz, plaintext 
  1. body{
  2.     margin: 0;
  3. 	font-family: Helvetica;
  4.     font-size: 13px;
  5.     color:#8b8b8b;
  6. 	background-color:#f1f0ef;
  7. }
  8.  
  9. #nawigacja {
  10. 	background: url("images/menu.png");
  11. 	border-style:none;
  12. 	width:100%;
  13. 	height:54px;
  14.     position: absolute;
  15.     top:0px;
  16. 	z-index: 10;
  17. }
  18.  
  19. header {
  20. 	background: #ffffff;
  21. 	min-height: 1000px;
  22. 	margin-top: 150px;
  23. }
  24.  
  25. #rejestracja {
  26. 	min-height:1000px;
  27. }
  28.  
  29. #forum {
  30. 	height:600px;
  31. 	background: #e8e8e9;
  32. 	text-align: center;
  33. }
  34.  
  35. #opis {
  36. 	width: 600px;
  37. 	height: auto;
  38. 	float: left;
  39. 	margin-top: 50px;
  40. 	margin-left: 480px;
  41. 	top: -350px;
  42. 	position: relative;
  43. }
  44.  
  45.  
  46.  
  47. h1{	
  48. 	font-size: 16px;
  49. }
  50.  
  51. strong{	
  52. 	color:#6ea031;
  53. }
  54.  
  55. a{
  56. 	color: #e8e8e9;
  57. 	text-decoration:none;
  58. }
  59.  
  60. a:active{
  61. 	color: #fff;
  62. 	text-decoration:none;
  63. }
  64.  
  65. a:hover{
  66. 	color: #fff;
  67. 	text-decoration:none;
  68. }
  69.  
  70.  
  71. .container{
  72.   width: 900px;
  73.   z-index: 0;
  74.   margin: 0 auto 0 auto;
  75.  
  76.  
  77. }
  78.  
  79. .logo {
  80. 	margin-top: 20px;
  81. 	text-align: left;
  82. 	font-size: 15px;
  83. }
  84. .menu {
  85. 	margin-top:-18px;
  86. 	text-align: center;
  87. 	font-size: 16px;
  88. }
  89. .jezyk {
  90. 	margin-top: -15px;
  91. 	text-align: right;
  92. 	font-size: 11px;
  93. }
  94.  
  95. #status {
  96. background-color: #fff; height: 90px; width: 200px; float: right; top: -90px; position: relative; border-top-right-radius: 5px; border-top-left-radius: 5px; text-align: center; margin-right: 5px; -webkit-transition: all 1s ease;
  97. }
  98. #status:hover {
  99. background: #fff 100% 0; height: 150px; width: 250px; float: right; top: -95px; position: relative;  text-align: center; margin-right: 5px; border-radius: 5px; -webkit-transition: all 1s ease;
  100. }
  101.  
  102. #opis1 {
  103. 	width: 385px;
  104. 	height: auto;
  105. 	float: left;
  106. 	margin-top: 50px;
  107. 	margin-left: 480px;
  108. 	top: -335px;
  109. 	position: relative;
  110. 	float: left;
  111. 	align: left;
  112. 	margin-left: -175px;
  113. 	border: 1px solid #000000;
  114. 	padding: 5px;
  115. 	background-color: #f2f2f2;
  116.         border: 7px solid rgba(0,0,0,.05);
  117.         background-clip: padding-box;
  118.         box-shadow: 0 0 2px rgba(0, 0, 0, .5);
  119.         	-webkit-transition: all 1s ease;
  120. 	        	border-radius: 3px;
  121. }
  122. #opis1:hover {
  123. 	width: 385px;
  124. 	height: auto;
  125. 	float: left;
  126. 	margin-top: 50px;
  127. 	margin-left: 480px;
  128. 	top: -335px;
  129. 	position: relative;
  130. 	float: left;
  131. 	align: left;
  132. 	margin-left: -175px;
  133. 	border: 1px solid #000000;
  134. 	padding: 5px;
  135. 	background-color: #fff;
  136.         	-webkit-transition: all 1s ease;
  137.  
  138. }
  139.  
  140. #opis2 {
  141. 	width: 385px;
  142. 	height: 286px;
  143. 	top: 30px;
  144.  
  145. 	position: relative;
  146. 	border: 1px solid #000000;
  147. 	padding: 5px;
  148. 	background-color: #f2f2f2;
  149.         border: 7px solid rgba(0,0,0,.05);
  150.         background-clip: padding-box;
  151.         box-shadow: 0 0 2px rgba(0, 0, 0, .5);
  152.         	-webkit-transition: all 1s ease;
  153.         	margin: 0 auto;
  154. 	        	border-radius: 3px;
  155. }
  156. #opis2:hover {
  157. 	width: 385px;
  158. 	height: 286px;
  159. 	position: relative;
  160. 	border: 1px solid #000000;
  161. 	padding: 5px;
  162. 	background-color: #fff;
  163.         	-webkit-transition: all 1s ease;
  164.         	margin: 0 auto;
  165.  
  166. }
  167.  
  168. #opis3 {
  169. 	width: 385px;
  170. 	height: 286px;
  171. 	margin-right: -175px;
  172. 	top: -285px;
  173. 	position: relative;
  174. 	border: 1px solid #000000;
  175. 	padding: 5px;
  176. 	background-color: #f2f2f2;
  177.         border: 7px solid rgba(0,0,0,.05);
  178.         background-clip: padding-box;
  179.         box-shadow: 0 0 2px rgba(0, 0, 0, .5);
  180.         	-webkit-transition: all 1s ease;
  181.         	float: right;
  182.         	border-radius: 3px;
  183.  
  184.  
  185. }
  186. #opis3:hover {
  187. 	width: 385px;
  188. 	height: 286px;
  189. 	margin-right: -175px;
  190. 	top: -285px;
  191. 	position: relative;
  192. 	border: 1px solid #000000;
  193. 	padding: 5px;
  194. 	background-color: #fff;
  195.         	-webkit-transition: all 1s ease;
  196.         	float: right;
  197.  
  198. }
  199. h2 {
  200. position: relative;
  201. top: -290px;
  202. 	font-size: 16px;
  203. }
  204.  
  205. input {border-radius: 5px;}
  206. p3 {
  207. color: #000000;
  208. }
  209.  
  210. p4 {
  211. position: relative;
  212. top: -285px;
  213. }
  214.  
  215. p5 {
  216. position: relative;
  217. color: #fff;
  218. float: right;
  219. right: -175px;
  220. font-size: 9px;
  221. top: -19px;
  222. }
  223.  
  224. .galeria {
  225. 	margin: 50px auto 0 auto;
  226. 	width: 900px;
  227. 	height: 300px;
  228. 	background-color: #f2f2f2;
  229. 	border-radius: 5px;
  230. 	        border: 7px solid rgba(0,0,0,.05);
  231.         background-clip: padding-box;
  232.         box-shadow: 0 0 2px rgba(0, 0, 0, .5);
  233.  
  234.  
  235. }
  236.  
  237. div.galeria1{
  238.  
  239. 	margin-left:290px;
  240. 	margin-top: 22px;
  241. 	margin-bottom: 28px;
  242. 	overflow: hidden;
  243. 	float: left;
  244.  
  245.  
  246.  
  247. }
  248. 	div.galeria1 div{
  249. 		width: 252px;
  250. 		height: 252px;
  251. 		text-align: center;
  252. 		position: absolute;
  253. 		margin-left: -255px;
  254.  
  255.  
  256.  
  257. 	}
  258. 	div.galeria1 div.first {
  259. 			z-index: 1;
  260.  
  261. 	}		
  262.  
  263. 	div.galeria1 div.first {
  264. 		display: none;
  265.  
  266. 	}
  267.  
  268.  
  269. 	div.praca{
  270.  
  271. 	margin-left: 600px;
  272. 	margin-top: -240px;
  273. 	margin-bottom: 28px;
  274.   float: left;
  275. 	display: block;
  276.  
  277.  
  278.  
  279.  
  280. }
  281. 	div.praca div{
  282. 		width: 252px;
  283. 		height: 252px;
  284. 		text-align: center;
  285. 		position: absolute;
  286. 		margin-left: -255px;
  287.  
  288.  
  289. 	}
  290. 	div.praca div.first {
  291. 			z-index: 1;
  292.  
  293. 	}		
  294.  
  295.  
  296.  
[PHP] pobierz, plaintext


Sklejcie sobie ten kod i włącznie przez XAMPPA i zobaczcie o co chodzi. Zauważyłem też, że w FireFoxie slideshow jest bardziej w prawo, a nie w lewo jak w Google Chrome.
W ogóle, zawsze w Chromie mam pożądany efekt, ale to już na marginesie.

Więc jeszcze raz proszę, poprawcie kod jak możecie. Sram się z tym od samego rana, mimo stylu okodowałem jeszcze kawałek strony rejestracja, status itd.. :/
bunga
7.08.2012, 08:26:50
Odświeżam!
bunga
7.08.2012, 09:57:33
Myślałem, że przyczyną może być to, że wszystko jest w jednym divie, jednak nie.
Zrobiłem na dwa divy <div class="header></div></div class="header"></div> i nadal nic. Gdy usunę linijki to wszystko na stronie traci swój ład :/
bunga
7.08.2012, 10:02:08
Jestem już tak zmęczony tym pieprzonym kodem, że nie wiem co sam pisze..
Niech moderator usunie ten komentarz i poprzedni.
W poprzednim poście chodziło mi o <header></header><header></header>
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.