Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML] "wyskakujący" div?
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
Pucy
28.09.2006, 01:16:35
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
gWd
28.09.2006, 06:48:16
Masz mały błąd w HTMLu, przed <div id="footer"> wywal jednego </div>
Pucy
28.09.2006, 12:01:47
Dzieki ale to nie to, to pop rostu byl blad przy wklejaniu i wycinaniu niepotrzebnych rzeczy. Problem lezy w czyms innym a ja nie wiem gdzie, czy ktos jest w stanie mi pomoc? Prosze
My4tic
28.09.2006, 12:24:46
Moim zdaniem niepotrzebnie używasz float i przez to możesz mieć takie problemy. Poza tym są inne błędy w CSSie. Po co nadajesz DIVowi display: block? Przecież DIV standardowo jest elementem blokowym.

Albo to:

[HTML] pobierz, plaintext 
  1. <div id="center">
  2.  
  3. <div id="billboard">BILLBOARD</div>
  4.  
  5. <div style="float:left;">
  6.  
  7. <div class="box">
  8.  
  9. <div class="b" style="width:250px;"><div class="txt">b1</div></div>
  10. <div class="b" style="width:249px;"><div class="txt">b2</div></div>
  11. <div class="b" style="width:244px;"><div class="txt">b3</div></div>
  12.  
  13. </div>
[HTML] pobierz, plaintext


...nie uważasz ze za duzo tych DIVów? To tylko jeden z przykładów. Stanowczo przesadzasz z DIVami nie używając prawie w ogóle innych tagów jak P, SPAN czy Hx. ... i na koniec - po co Ci ta tabelka, hmm?

Spróbuj uporządkować ten kod, wywal zbędne DIVy, używaj odpowiednich tagów i używaj jak najmniej floatów.
Pucy
28.09.2006, 12:31:18
Tableka jest o tla;) Bo nikt nie nie potrafil pomoc z uzykaniem rezultatu takim jakim daje ta tabela, ale ona nie sprawwia tu problemu. Hm moze fakt za duzo divow, ale sie przyzwyczailem, bo mozna je jakby od zera modyfikowac.

Hm, przeciez jak chce uzywac eelementow blokowych jak div to jak nie uzywajac floata, ustawic je obok siebie? Chyba zadnych nadmiarowych floatow nie zrobilem (nie liczac tych w nadmiarowych divach) ?;]
My4tic
28.09.2006, 12:33:41
Cytat(Pucy @ 28.09.2006, 11:31:18 ) *
Hm, przeciez jak chce uzywac eelementow blokowych jak div to jak nie uzywajac floata, ustawic je obok siebie? Chyba zadnych nadmiarowych floatow nie zrobilem (nie liczac tych w nadmiarowych divach) ?;]


position: absolute/relative
left/right/top/bottom
Pucy
28.09.2006, 13:04:36
No tak, ale czy ie lepiej odnosic sie bezposrednio do elementow blockowych bedacych w bezposrednim kontakcie z danym elementem blkowym? (czyli uzywajac float), a nie przez pozycjonowanie wzgledem blokow oplywajacych ktore defaktow nie sa w bezposrednim polozeniu z biezacym leementem blokowym?
gWd
28.09.2006, 15:43:44
Cytat(My4tic @ 28.09.2006, 13:33:41 ) *
position: absolute/relative
left/right/top/bottom

Tak sobie czytam na forum o wyższości DIV nad TABLE...

Mam w takim razie pytanie. W jaki sposób zaprojektować DIV-ami, wykorzystując position taki prosty układ:

[HTML] pobierz, plaintext 
  1. <table style="width:100px">
  2.   <tr>
  3.     <td>1.1</td>
  4.     <td>1.2 [tutaj treść o nieznanej długości (może być długa i ze zdjęciami, ale może być też pusta), w związku z tym nieznana jest wysokość całego rzędu, a chcemy, żeby wszystkie komórki z pierwszego rzędu były tej samej wysokości, no i oczywiście, żeby drugi rząd nie zachodził, ani nie odstawał od pierwszego]</td>
  5.     <td>1.3</td>
  6.   </tr>
  7.   <tr>
  8.     <td>2.1</td>
  9.     <td>2.2</td>
  10.     <td>2.3</td>
  11.   </tr>
  12. </table>
[HTML] pobierz, plaintext


Przy tabelkach jest to banalne...
Krzysztofem
29.09.2006, 08:59:39
na divach to tez jest banalne winksmiley.jpg

zerknij:
http://www.alistapart.com/articles/holygrail
http://www.fox.com.pl/articles/web/layout.php
http://www.webinside.pl/webstandards/artykuly/205
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.