Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML] "wyskakujący" div?
Pucy
post
Post #1





Grupa: Zarejestrowani
Postów: 124
Pomógł: 0
Dołączył: 8.05.2006

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

Czy ktos spotkal sie z czyms takim jak wyskakujacy div?

Chodzi oto ze moze raz na 30 odswiezen strony div spada mi na dol, i pierwsze moje skojarzenie ze sie plik.css nie laduje, lub laduje sie za wolno i styl nie lapie (tak to wyglada mniej wiecej). Wymiary dobralem idealnie by sie wszystko miescilo... warte uwagi jest miejsce miedzy:

<div id="leftside">LEWA</div>
<div id="center">SRODEK</div>

bo tutaj mi sie wykrzacza, po prostu #center spada pod #leftside, myslalem ze moze chodzi o pewna kombinacje display:table albo display:block, ale nie wiem, probowalem na wszelkie spsoby i sie dalej wykrzacza. A moze to #billboard i ten <div> zaraz pod nim?sad.gif Eh no nie wiem i prosze o pomoc, bo to jest bardzo wazny projekt a jego zachowanie jest conajmniej dziwne, a najgorsze co moze byc to błąd niewiadomo z czego pochodzący

[HTML] pobierz, plaintext 
  1. <body>
  2.  
  3. <table cellspacing="0" cellpadding="0" style="width:100%;" >
  4. <tr>
  5. <td style="background-image:url({$s_uri}templates/page/images/bgll.jpg);background-repeat:repeat-x;">&nbsp;</td>
  6. <td style="background-image:url({$s_uri}templates/page/images/bgleft.jpg);background-repeat:no-repeat;width:56px;"></td>
  7. <td width="970">
  8. <center>
  9. <div id="container">
  10.  
  11.  <div id="top">
  12.  
  13. 	<div class="topleft"><a href="{make_link a=index}"><img src="{$s_uri}templates/page/images/logo.jpg" border="0" alt="" /></a></div>
  14. 	<div class="topright">
  15.  
  16. 		<div class="icons" {if $loggedin}style="margin-left:15px;"{else}style="margin-left:75px;"{/if}>
  17.  
  18. 			<div class="i">HOME</div>
  19.  
  20. 		</div>
  21.  
  22. 	</div>
  23.  
  24. 	<div class="logobottom"><img src="{$s_uri}templates/page/images/leftblogo.jpg" border="0" alt="" /></div>
  25. 	<div class="logobottom"><img src="{$s_uri}templates/page/images/rightblogo.jpg" border="0" alt="" /></div>
  26.  
  27.  </div>
  28.  
  29. <div id="middle">
  30.  
  31.  	<div class="category">
  32. 		<div class="name">KATEGORIE</div>
  33. 	</div>
  34.  
  35. 	<div class="belka"><br />BLA BLA BLA</div>
  36.  
  37.  </div>
  38.  
  39.  <div id="leftside">
  40.  		<div id="linkstxt">
  41.  
  42. 	<div class="row"><a href="#">LINK</a></div>
  43.  
  44.         <div class="sep">sep</div>
  45.  
  46. 	        </div>
  47.  
  48.  </div>
  49.  
  50.  <div id="center">
  51.  
  52.  	<div id="billboard">BILLBOARD</div>
  53.  
  54. 	  <div style="float:left;">
  55.  
  56. 		<div class="box">
  57.  
  58. 		 <div class="b" style="width:250px;"><div class="txt">b1</div></div>
  59. 		 <div class="b" style="width:249px;"><div class="txt">b2</div></div>
  60. 		 <div class="b" style="width:244px;"><div class="txt">b3</div></div>
  61.  
  62. 		</div>
  63.  
  64. <div class="box">
  65.  
  66. 		<div class="c" style="width:256px;">
  67. 			<div class="txt2">TOP 20 USER&Oacute;W</div>
  68.  
  69. 	<div class="row">XX</div>
  70.  
  71. 		</div>
  72.  
  73. 		<div class="c" style="width:252px;">
  74. 			<div class="txt2">TOP 20 TEST&Oacute;W</div>
  75.  
  76.         <div class="row">XX</div>
  77.  
  78. 		</div>
  79.  
  80. 		<div class="c" style="width:235px;">
  81. 			<div class="txt2">NAJAKTYWNIEJSI USERZY</div>
  82.  
  83.         <div class="row">XX</div>
  84.  
  85. 		</div>
  86.  
  87. </div>
  88.  
  89. 	<div id="normal" class="row" style="display:block;border:1px solid black;">NORMAL</div>
  90.  
  91.  </div>
  92.  
  93.  </div>
  94. </div>
  95.  
  96. <div id="footer">
  97.  
  98. <img src="{$s_uri}templates/page/images/fot.jpg" border="0" alt="" />
  99.  
  100. 	<div class="left">
  101.                    <div style="margin-left:20px;margin-top:15px;text-align:center;">Copy</div>
  102.         </div>
  103. 	<div class="cent">
  104.                    <img src="./templates/page/images/fotsep.jpg" border="0" alt="" />
  105.         </div>
  106. 	<div class="right">
  107.                    <div style="margin-right:40px;margin-top:21px;text-align:center;">XX</div>
  108.         </div>
  109.  
  110. </div>
  111.  
  112. </center>
  113.  
  114. </td>
  115. <td style="width:58px;"></td>
  116. <td>&nbsp;</td>
  117. </tr>
  118. </table>
  119. </body>
  120. </html>
[HTML] pobierz, plaintext


Moj plik CSS:

[HTML] pobierz, plaintext 
  1. body { 
  2.  
  3. padding:0px; 
  4. margin:0px; 
  5. background-color:#F2F2F2;
  6.  
  7. }
  8.  
  9. .error {
  10.  
  11. font-family:verdana;
  12. font-size:11px;
  13. color:red;
  14.  
  15. }
  16.  
  17. input, textarea {
  18.  
  19. background-color:#DEEDA3;
  20. font-size:11px;
  21. font-family:tahoma; 
  22. border:1px solid #9FBC2C;
  23.  
  24. }
  25.  
  26. select {
  27.  
  28. background-color:#DEEDA3;
  29. border:1px solid #9FBC2C;
  30. font-size:10px;
  31. font-family:verdana;
  32.  
  33. }
  34.  
  35. button {
  36.  
  37. background-color:#DEEDA3;
  38. font-size:10px;
  39. font-family:verdana;
  40. border:1px solid #9FBC2C;
  41.  
  42. }
  43.  
  44. .formn {
  45.  
  46. font-size:11px;
  47. font-family:verdana;
  48.  
  49. }
  50.  
  51. .listcat {
  52.  
  53. float:left;
  54. width:335px;
  55. min-height:120px;
  56. padding:15px;
  57. margin:2px;
  58. border:1px solid black;
  59. text-align:left;
  60. font-size:11px;
  61. font-family:verdana;
  62.  
  63. }
  64.  
  65. .header {
  66.  
  67. font-family:verdana;
  68. padding-top:5px;
  69. font-size:12px;
  70. font-weight:bold;
  71. border-bottom: 1px solid black;
  72. padding-bottom:3px;
  73. margin-bottom:4px;
  74.  
  75.  
  76. }
  77.  
  78. A:link {
  79.  
  80. text-decoration:none;
  81. color:red;
  82. font-size:12px;
  83. font-weight:normal;
  84.  
  85. }
  86.  
  87. A:visited {
  88. text-decoration:none;
  89. color:red;
  90. font-size:12px;
  91.  
  92. }
  93.  
  94. A:hover {
  95.  
  96. text-decoration:none;
  97. color:red;
  98. font-size:12px;
  99.  
  100. }
  101.  
  102. .stats {
  103.  
  104. border:1px solid black;
  105. width:200px;
  106.  
  107. }
  108.  
  109. .stats
  110.  
  111. .button A {
  112.  
  113.     color: #FFFFFF;
  114. 	font-family: tahoma;
  115.     text-decoration: none;
  116.     padding-left: 10px;
  117.     padding-right: 10px;
  118.     border: 1px solid #000000;
  119.     margin-bottom: 4px;
  120. 	font-size: 11px;
  121.     background-color: #C60337;
  122. }
  123.  
  124.  
  125. .button a:hover{
  126.     background-color: #FFFFFA;
  127.     color: #000000;
  128. 	border: 1px solid #000000;
  129. }
  130.  
  131. .portion A {
  132.  
  133. color:black;
  134. text-decoration:none;
  135.  
  136. }
  137.  
  138. #category {margin-left:10px;font-size:10px;} 
  139. #category a { color:#738271; text-decoration:none; }
  140.  
  141. #container {
  142.  
  143. background-color:#FFFFFF;
  144. width:970px;
  145. display:table;
  146. border:0px solid black;
  147.  
  148. }
  149.  
  150. #top {
  151.  
  152. width:970px;
  153. float:left;
  154. height:91px;
  155. display:table;
  156. border:0;
  157.  
  158. }
  159.  
  160. #top .topleft {
  161.  
  162. width:290px;
  163. height:85px;
  164. float:left;
  165.  
  166. }
  167.  
  168. #top .logobottom {
  169.  
  170. height:6px;
  171. float:left;
  172.  
  173. }
  174.  
  175. #top .topright {
  176.  
  177.  
  178. background-color:#FFFFFF;
  179. height:85px;
  180. width:680px;
  181. float:left;
  182.  
  183. }
  184.  
  185. #top .topright .icons {
  186.  
  187. border:0px solid black;
  188. margin-top:19px;
  189. height:70px;
  190.  
  191. }
  192.  
  193. #top .topright .icons .i {
  194.  
  195. border:0px solid black;
  196. width:92px;
  197. display:table;
  198. text-align:center;
  199. font-size:9px;
  200. font-family:Verdana;
  201. height:44px;
  202. float:left;
  203.  
  204. }
  205.  
  206. #middle {
  207.  
  208. height:44px;
  209. width:970px;
  210. float:left;
  211. display:table;
  212. border:0px solid black;
  213.  
  214. }
  215.  
  216. #middle .category {
  217.  
  218. width:220px;
  219. height:44px;
  220. float:left;
  221. background-image:url('bgcats.jpg');
  222. background-repeat:no-repeat;
  223. border:0px solid black;
  224.  
  225. }
  226.  
  227. #middle .category .name {
  228.  
  229. font-family: Verdana;
  230. font-size:13px;
  231. text-align:right;
  232. margin-right:52px;
  233. margin-top:14px;
  234. font-weight:bold;
  235. color:white;
  236. line-height:12px;
  237.  
  238. }
  239.  
  240. #middle .belka {
  241.  
  242. background-color:#C60032;
  243. color:#FFFFFF;
  244. text-align:left;
  245. font-size:12px;
  246. font-family:verdana;
  247. border:0px solid black;
  248. height:42px;
  249. width:743px;
  250. float:left;
  251.  
  252. }
  253.  
  254. #middle .belka A {
  255.  
  256. font-size:12px;
  257. font-family:verdana;
  258. text-decoration:none;
  259. color:#FFFFFF;
  260.  
  261. }
  262.  
  263. #userpage {
  264.  
  265. border:0px solid black;
  266. height:94px;
  267. text-align:center;
  268. vertical-align:middle;
  269. padding-top:5px;
  270. width:208px;
  271. background-color:#ABCE24;
  272.  
  273. }
  274.  
  275. #userstats {
  276.  
  277. text-align:center;
  278. padding-top:5px;
  279. width:208px;
  280.  
  281. }
  282.  
  283. #userstats .name {
  284.  
  285. font-family:verdana;
  286. font-size:11px;
  287. color:#FFFFFF;
  288. height:17px;
  289. padding:5px 0 1px 12px;
  290. margin-top:8px;
  291. margin-top:10px;
  292. border:1px solid #000000;
  293.  
  294. }
  295.  
  296. #userstats .main {
  297.  
  298. font-family:verdana;
  299. font-size:10px;
  300. text-align:left;
  301. padding:2px 3px 2px 3px;
  302.  
  303. }
  304.  
  305. #userstats .main A {
  306.  
  307. text-decoration:none;
  308. color:#000000;
  309. font-size:11px;
  310. font-weight:bold;
  311. }
  312.  
  313. #leftside {
  314.  
  315. width:220px;
  316. float:left;
  317. border:0px solid black;
  318.  
  319. }
  320.  
  321. #linkstxt{
  322.  
  323. padding-top:12px;
  324. padding-bottom:15px;
  325. text-align:left;
  326. padding-left:30px;
  327.  
  328. }
  329.  
  330. #linkstxt .row {
  331.  
  332. font-family: verdana;
  333. font-size:13px;
  334. line-height:18px;
  335. margin-bottom:2px;
  336. margin-top:3px;
  337. height:19px;
  338. text-align:right;
  339. width:180px;
  340. background-image:url('arrow.jpg');
  341. background-repeat:no-repeat;
  342. background-position:center right;
  343.  
  344. }
  345.  
  346. #linkstxt .sep {
  347.  
  348. width:180px;
  349. height:1px;
  350. line-height:1px;
  351. padding:0;
  352. margin:0;
  353. font-size:0px;
  354.  
  355. }
  356.  
  357. #linkstxt .row A {
  358.  
  359. color:#000000;
  360. text-decoration:none;
  361. margin-right:18px;
  362.  
  363. }
  364.  
  365. #center {
  366.  
  367. width:750px;
  368. float:left;
  369. margin-bottom:20px;
  370. display:block;
  371. border:0px solid black;
  372.  
  373. }
  374.  
  375. .box {
  376.  
  377. width:743px;
  378. float:left;
  379. margin-top:2px;
  380.  
  381. }
  382.  
  383. .box .b {
  384.  
  385. float:left;
  386. height:212px;
  387. background-repeat:no-repeat;
  388. text-align:left;
  389. border:0px solid black;
  390.  
  391. }
  392.  
  393. .box .c {
  394.  
  395. float:left;
  396. background-repeat:no-repeat;
  397. text-align:left;
  398.  
  399. }
  400.  
  401. .box .b .txt {
  402.  
  403. font-size:13px;
  404. font-family:tahoma;
  405. padding-left:15px;
  406. padding-top:14px;
  407. color: #717171;
  408.  
  409. }
  410.  
  411. .box .c .txt2 {
  412.  
  413. font-size:12px;
  414. font-weight:bold;
  415. font-family:tahoma;
  416. padding-left:30px;
  417. padding-top:4px;
  418. height:21px;
  419. color: #FFFFFF;
  420.  
  421. }
  422.  
  423. .box .c .row {
  424.  
  425. font-size:11px;
  426. font-family:tahoma;
  427. padding-left:13px;
  428. color: #717171;
  429. display:block;
  430.  
  431. }
  432.  
  433. .box .c .row A {
  434.  
  435. font-size:11px;
  436. font-family:tahoma;
  437. color: #717171;
  438. text-decoration:none;
  439.  
  440. }
  441.  
  442. #billboard {
  443.  
  444. width:750px;
  445. height:100px;
  446. float:left;
  447. background-image:url('centerrright.jpg');
  448. background-repeat:no-repeat;
  449. background-position:center right;
  450. background-color:#000000;
  451. border:0;
  452. display:table;
  453.  
  454. }
  455.  
  456. #footer {
  457.  
  458. clear:both;
  459. background-color:#FFFFFF;
  460. width:970px;
  461. height:77px;
  462.  
  463. }
  464.  
  465. #footer .left {
  466.  
  467. font-family:tahoma;
  468. font-size:11px;
  469. float:left;
  470. height:66px;
  471. width:204px;
  472.  
  473. }
  474.  
  475. #footer .cent {
  476.  
  477. float:left;
  478. height:66px;
  479.  
  480. }
  481.  
  482. #footer .right {
  483.  
  484. height:66px;
  485. font-family:tahoma;
  486. font-size:12px;
  487. float:right;
  488.  
  489. }
  490.  
  491. #footer .right A {
  492.  
  493. text-decoration:none;
  494. font-size:11px;
  495. color:#000000;
  496.  
  497. }
[HTML] pobierz, plaintext


Ten post edytował Pucy 28.09.2006, 12:01:04


--------------------
TESTWIEDZY.PL - Przetestuj swoją wiedzę...

Nie ma rzeczy niemożliwych. Niemożliwe wymaga jedynie więcej czasu...
Pracujemy na Ciebie! - MINDFLOW.PL
Go to the top of the page
+Quote Post

Posty w temacie
- Pucy   [HTML] "wyskakujący" div?   28.09.2006, 01:16:35
- - gWd   Masz mały błąd w HTMLu, przed <div id="foo...   28.09.2006, 06:48:16
- - Pucy   Dzieki ale to nie to, to pop rostu byl blad przy w...   28.09.2006, 12:01:47
- - My4tic   Moim zdaniem niepotrzebnie używasz float i przez t...   28.09.2006, 12:24:46
- - Pucy   Tableka jest o tla;) Bo nikt nie nie potrafil pomo...   28.09.2006, 12:31:18
|- - My4tic   Cytat(Pucy @ 28.09.2006, 11:31:18 ) H...   28.09.2006, 12:33:41
|- - gWd   Cytat(My4tic @ 28.09.2006, 13:33:41 )...   28.09.2006, 15:43:44
- - Pucy   No tak, ale czy ie lepiej odnosic sie bezposrednio...   28.09.2006, 13:04:36
- - Krzysztofem   na divach to tez jest banalne zerknij: http://ww...   29.09.2006, 08:59:39

« Następny starszy · HTML \ XHTML · 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: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

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

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