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?(IMG:http://forum.php.pl/style_emoticons/default/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
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 8)
gWd
post
Post #2





Grupa: Zarejestrowani
Postów: 55
Pomógł: 0
Dołączył: 17.09.2006

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

Masz mały błąd w HTMLu, przed <div id="footer"> wywal jednego </div>
Go to the top of the page
+Quote Post
Pucy
post
Post #3





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

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

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
Go to the top of the page
+Quote Post
My4tic
post
Post #4





Grupa: Zarejestrowani
Postów: 260
Pomógł: 0
Dołączył: 4.08.2005

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

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.
Go to the top of the page
+Quote Post
Pucy
post
Post #5





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

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

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) ?;]
Go to the top of the page
+Quote Post
My4tic
post
Post #6





Grupa: Zarejestrowani
Postów: 260
Pomógł: 0
Dołączył: 4.08.2005

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

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
Go to the top of the page
+Quote Post
Pucy
post
Post #7





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

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

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?
Go to the top of the page
+Quote Post
gWd
post
Post #8





Grupa: Zarejestrowani
Postów: 55
Pomógł: 0
Dołączył: 17.09.2006

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

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...
Go to the top of the page
+Quote Post
Krzysztofem
post
Post #9





Grupa: Zarejestrowani
Postów: 13
Pomógł: 0
Dołączył: 16.03.2006

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

na divach to tez jest banalne (IMG:http://forum.php.pl/style_emoticons/default/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

Ten post edytował Krzysztofem 29.09.2006, 09:00:19
Go to the top of the page
+Quote Post
« Następny starszy · HTML \ XHTML · 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: 26.08.2025 - 14:06
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn