Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [XHTML] Problem z IE
spit
post 27.11.2005, 19:25:05
Post #1





Grupa: Zarejestrowani
Postów: 135
Pomógł: 0
Dołączył: 1.08.2005

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

Cześć
Ostatnio postanowiłem nauczyć się XHTML, i jakoś tam idzie. Złożyłem już stronę, nawet gładko poszło, ale właśnie mam taki problem, iż pod Operą wszystko wygląda b. dobrze a w IE to wogóle wszystko się rozlatuje :|
Tu kod:
(strona)
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5. <head>
  6.  
  7. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  8.  
  9. <title>[ aftersound.info ]</title>
  10.  
  11. <link href="style.css" rel="stylesheet" type="text/css" />
  12.  
  13. </head>
  14.  
  15.  
  16. <body>
  17.  
  18. <div id="main_div">
  19.  
  20.   <div id="upper_menu"><img src="images/img_01.jpg" alt="" width="302" height="70" /><img src="images/img_02.jpg" alt="" width="97" height="70" /><img src="images/img_03.jpg" alt="" width="124" height="70" /><img src="images/img_04.jpg" alt="" width="127" height="70" /></div>
  21.  
  22.   <div id="logo"><img src="images/img_05.jpg" alt="" width="399" height="77" /></div>
  23.  
  24.   <div id="navigator">
  25.  
  26.     <div id="nav_up"><img src="images/img_06.jpg" alt="" width="251" height="34" /></div>
  27.  
  28.     <div id="nav_back"><img src="tytul.jpg" alt="" width="220" height="200" /></div>
  29.  
  30.   </div>
  31.  
  32.   <div id="forum">
  33.  
  34.     <div id="forum_up"><img src="images/img_08.jpg" alt="" width="399" height="26" /></div>
  35.  
  36.     <div id="forum_left"><img src="images/img_09.jpg" alt="" width="17" height="149" /></div>
  37.  
  38.     <div id="forum_bg">
  39.  
  40.       <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit </a></p>
  41.  
  42.       <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit </a></p>
  43.  
  44.       <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit </a></p>
  45.  
  46.       <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit</a></p>
  47.  
  48.       <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit</a></p>
  49.  
  50.       <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit</a></p>
  51.  
  52.       <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit</a></p>
  53.  
  54.     </div>
  55.  
  56.   </div>
  57.  
  58.   <div id="left"><img src="images/img_11.jpg" alt="" width="11" height="478" /></div>
  59.  
  60.   <div id="menu">
  61.  
  62.     <div id="menu_up"><img src="images/img_12.jpg" alt="" width="205" height="41" /></div>
  63.  
  64.     <div id="menu_main">
  65.  
  66.       <p class="strzalka_imp">Strona</p>
  67.  
  68.       <p class="strzalka"><a href="#">Wiadomości</a></p>
  69.  
  70.       <p class="strzalka"><a href="#">Ekipa</a></p>
  71.  
  72.       <p class="strzalka"><a href="#">Historia strony</a></p>
  73.  
  74.       <p class="strzalka"><a href="#">Ciekawe odnośniki</a></p>
  75.  
  76.       <p>&nbsp;</p>
  77.  
  78.       <p>&nbsp;</p>
  79.  
  80.       <p class="strzalka_imp">Zespoły</p>
  81.  
  82.       <p class="strzalka"><a href="#">A Perfect Circle</a></p>
  83.  
  84.       <p class="strzalka"><a href="#">At The Drive-In</a></p>
  85.  
  86.       <p class="strzalka"><a href="#">Bjork</a></p>
  87.  
  88.       <p class="strzalka"><a href="#">Cire</a></p>
  89.  
  90.       <p class="strzalka"><a href="#">Coldplay</a></p>
  91.  
  92.       <p class="strzalka"><a href="#">Dredg</a></p>
  93.  
  94.       <p class="strzalka"><a href="#">Day One Symphony</a></p>
  95.  
  96.       <p class="strzalka"><a href="#">Feeder</a></p>
  97.  
  98.       <p class="strzalka"><a href="#">Lenny Valentino</a></p>
  99.  
  100.       <p class="strzalka"><a href="#">Marilyn Manson</a></p>
  101.  
  102.       <p class="strzalka"><a href="#">Mars Volta, The</a></p>
  103.  
  104.       <p class="strzalka"><a href="#">Mass Hysteria</a></p>
  105.  
  106.       <p class="strzalka"><a href="#">Mayan Factor, The</a></p>
  107.  
  108.       <p class="strzalka"><a href="#">Mindless Self Indulgence</a></p>
  109.  
  110.       <p class="strzalka"><a href="#">Muse</a></p>
  111.  
  112.       <p class="strzalka"><a href="#">Myslovitz</a></p>
  113.  
  114.       <p class="strzalka"><a href="#">Nine Inch Nails</a></p>
  115.  
  116.       <p class="strzalka"><a href="#">Orgy</a></p>
  117.  
  118.       <p class="strzalka"><a href="#">Placebo</a></p>
  119.  
  120.       <p class="strzalka"><a href="#">Radiohead</a></p>
  121.  
  122.       <p class="strzalka"><a href="#">Team Sleep</a></p>
  123.  
  124.       <p class="strzalka"><a href="#">Tool </a></p>
  125.  
  126.       <p>&nbsp;</p>
  127.  
  128.       <p>&nbsp;</p>
  129.  
  130.       <p class="strzalka_imp">Interakcja</p>
  131.  
  132.       <p class="strzalka"><a href="#">Forum</a></p>
  133.  
  134.       <p class="strzalka"><a href="#">Księga Gości</a></p>
  135.  
  136.       <p>&nbsp;</p>
  137.  
  138.       <p>&nbsp;</p>
  139.  
  140.       <p class="strzalka_imp">Multimedia</p>
  141.  
  142.       <p class="strzalka">Galerie</p>
  143.  
  144.       <p class="strzalka">Audio</p>
  145.  
  146.       <p class="strzalka">Wideo</p>
  147.  
  148.       <p class="strzalka">Inne</p>
  149.  
  150.       <p>&nbsp;</p>
  151.  
  152.       <p>&nbsp;</p>
  153.  
  154.       <p class="strzalka_imp">Wspólpracujemy z...</p>
  155.  
  156.       <p class="link_button"><a href="http://dredg.fan.pl/" onclick="target='_blank';"><img src="http://www.dredg.inside.net.pl/pics/bannery/button.gif" alt="" width="88" height="31" border="0" class="button_img" longdesc="http://dredg.fan.pl" /></a></p>
  157.  
  158.       <p class="link_button"><a href="http://dredg.fan.pl/" onclick="target='_blank';"><img src="http://www.dredg.inside.net.pl/pics/bannery/button.gif" alt="dredg" width="88" height="31" border="0" class="button_img" longdesc="http://dredg.fan.pl" /></a></p>
  159.  
  160.       <p class="link_button"><a href="http://dredg.fan.pl/" onclick="target='_blank';"><img src="http://www.dredg.inside.net.pl/pics/bannery/button.gif" alt="" width="88" height="31" border="0" class="button_img" longdesc="http://dredg.fan.pl" /></a></p>
  161.  
  162.     </div>
  163.  
  164.   </div>
  165.  
  166.   <div id="odstep"><img src="images/img_13.jpg" alt="" width="20" height="478" /></div>
  167.  
  168.   <div id="content">
  169.  
  170.     <div id="content_up"><img src="images/img_14.jpg" alt="" width="410" height="41" /></div>
  171.  
  172.     <div id="content_main">
  173.  
  174.       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc id felis at elit aliquam ullamcorper. Phasellus arcu tellus, varius ac, bibendum id, rutrum id, sem. Mauris pretium mollis nisi. Cras ut eros. Ut sed mauris vitae risus euismod bibendum. Nulla facilisi. In malesuada ullamcorper tellus. Vivamus sed pede. Vestibulum elementum urna quis sapien. Quisque egestas, massa vehicula tempor mollis, metus nisl eleifend velit, eget laoreet leo tellus nec lacus. Pellentesque eu metus sed metus placerat nonummy. Praesent mollis, purus vitae dapibus ornare, velit libero eleifend erat, quis egestas leo purus vitae est. </p>
  175.  
  176.       <p>Sed lobortis, massa non interdum ornare, quam orci venenatis augue, scelerisque porttitor metus libero vel augue. Aenean non enim non libero mollis hendrerit. Suspendisse potenti. Maecenas elementum, tellus ut tincidunt ultricies, ipsum urna vulputate leo, id tristique leo quam id justo. Nunc et eros sed neque laoreet varius. Nulla in nunc ut pede nonummy imperdiet. Suspendisse quis quam. Nulla in dui vitae felis viverra laoreet. In hac habitasse platea dictumst. Aliquam ligula turpis, eleifend eu, sodales sed, semper sed, purus. Phasellus egestas egestas erat. </p>
  177.  
  178.       <p>Nulla blandit. Duis ut augue. Fusce pharetra. Sed orci. Nulla nisl. Morbi sapien. In at pede. Maecenas sit amet tortor vel justo adipiscing eleifend. Nunc nec orci. Nullam arcu. Vivamus elementum magna sed nulla. Cras quis neque. Sed vestibulum, risus non convallis rhoncus, velit justo porttitor dolor, iaculis porttitor enim erat a risus. Proin justo. In at enim. Sed enim risus, sagittis id, pellentesque at, auctor et, eros. Morbi pharetra lacus a pede. Curabitur lobortis ipsum nec augue. Duis accumsan. </p>
  179.  
  180.       <p>Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed et justo non lectus commodo tempor. Vestibulum quis nulla pretium diam elementum laoreet. Morbi ullamcorper, nibh vitae interdum congue, sem nisi semper elit, ac bibendum ligula odio ac nulla. Morbi auctor, lorem vel sodales tristique, pede lacus luctus ipsum, in hendrerit tellus tellus ut arcu. Maecenas cursus cursus nulla. Ut tincidunt, tellus cursus tempor varius, sapien tellus sodales augue, in interdum nisl leo quis neque. Maecenas libero ligula, viverra et, vehicula quis, lacinia sed, urna. Vivamus arcu. Nam pharetra. Nullam in lectus. Quisque ac diam. Sed dolor felis, dapibus vitae, gravida sed, venenatis ut, tellus. Nunc elementum nonummy lectus. Nulla facilisi. Pellentesque semper purus pellentesque risus. Cras venenatis leo quis urna. Quisque quam sem, euismod nec, pretium vitae, rhoncus nec, felis. Phasellus ullamcorper posuere quam. </p>
  181.  
  182.       <p>Aliquam eu leo. Mauris arcu justo, interdum sed, laoreet nec, laoreet sed, turpis. Praesent ipsum mi, rhoncus at, placerat et, gravida at, purus. Maecenas aliquet ligula tincidunt leo. Nullam a quam. In placerat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed venenatis, neque ac posuere auctor, nisi risus facilisis augue, eu ornare ligula lectus ac ipsum. In aliquet dictum dui. Suspendisse non eros. Maecenas iaculis mauris sed tellus. In eros arcu, vehicula non, luctus a, accumsan vel, nibh. Vivamus quam.</p>
  183.  
  184.     </div>
  185.  
  186.   </div>
  187.  
  188.   <div id="righ"><img src="images/img_15.jpg" alt="</span>" /><<span style='color:blue'>/div>
  189.  
  190.   <div id="footer">[ w3c buttons ]</div>
  191.  
  192. </div>
  193.  
  194. </body>
  195.  
  196. </html>
[HTML] pobierz, plaintext


(css)
[HTML] pobierz, plaintext 
  1. body {
  2.  
  3. margin: 0px;
  4.  
  5. padding: 0px;
  6.  
  7. background-image: url(images/bg.gif);
  8.  
  9. }
  10.  
  11. #content_up {
  12.  
  13. height: 41px;
  14.  
  15. width: 401px;
  16.  
  17. margin: 0px;
  18.  
  19. padding: 0px;
  20.  
  21. }
  22.  
  23. #content_main {
  24.  
  25. width: 400px;
  26.  
  27. padding-right: 5px;
  28.  
  29. padding-left: 5px;
  30.  
  31. text-align: justify;
  32.  
  33. vertical-align: top;
  34.  
  35. margin: 0px;
  36.  
  37. padding-top: 0px;
  38.  
  39. padding-bottom: 0px;
  40.  
  41. }
  42.  
  43.  
  44.  
  45. #main_div {
  46.  
  47. margin: auto;
  48.  
  49. width: 650px;
  50.  
  51. overflow: auto;
  52.  
  53. border-right-width: 15px;
  54.  
  55. border-left-width: 15px;
  56.  
  57. border-right-style: solid;
  58.  
  59. border-left-style: solid;
  60.  
  61. border-right-color: #3F3D36;
  62.  
  63. border-left-color: #3F3D36;
  64.  
  65. background-color: #000;
  66.  
  67. padding: 0px;
  68.  
  69. }
  70.  
  71. #left {
  72.  
  73. width: 11px;
  74.  
  75. float: left;
  76.  
  77. margin: 0px;
  78.  
  79. padding: 0px;
  80.  
  81. }
  82.  
  83. #menu {
  84.  
  85. float: left;
  86.  
  87. width: 205px;
  88.  
  89. background-image: url(images/img_18.jpg);
  90.  
  91. border-bottom-width: 1px;
  92.  
  93. border-bottom-style: solid;
  94.  
  95. border-bottom-color: #4C483F;
  96.  
  97. overflow: auto;
  98.  
  99. height: auto;
  100.  
  101. z-index: auto;
  102.  
  103. margin: 0px;
  104.  
  105. padding: 0px;
  106.  
  107. }
  108.  
  109. #menu_main {
  110.  
  111. background-image: url(images/img_16.jpg);
  112.  
  113. background-repeat: no-repeat;
  114.  
  115. overflow: auto;
  116.  
  117. z-index: auto;
  118.  
  119. visibility: visible;
  120.  
  121. height: auto;
  122.  
  123. margin: 0px;
  124.  
  125. padding: 0px;
  126.  
  127. }
  128.  
  129.  
  130. #menu_up {
  131.  
  132. height: 41px;
  133.  
  134. width: 205px;
  135.  
  136. float: none;
  137.  
  138. margin: 0px;
  139.  
  140. padding: 0px;
  141.  
  142. }
  143.  
  144. #odstep {
  145.  
  146. float: left;
  147.  
  148. width: 20px;
  149.  
  150. }
  151.  
  152. #content {
  153.  
  154. float: left;
  155.  
  156. width: 410px;
  157.  
  158. margin: 0px;
  159.  
  160. overflow: auto;
  161.  
  162. background-image: url(images/img_19.jpg);
  163.  
  164. border-bottom-width: 1px;
  165.  
  166. border-bottom-style: solid;
  167.  
  168. border-bottom-color: #4C483F;
  169.  
  170. padding-top: 0px;
  171.  
  172. padding-right: 0px;
  173.  
  174. padding-bottom: 10px;
  175.  
  176. padding-left: 0px;
  177.  
  178. }
  179.  
  180. #righ {
  181.  
  182. float: right;
  183.  
  184. width: 4px;
  185.  
  186. }
  187.  
  188. #forum_left {
  189.  
  190. float: left;
  191.  
  192. width: 17px;
  193.  
  194. height: 149px;
  195.  
  196. }
  197.  
  198. #forum_bg {
  199.  
  200. background-image: url(images/img_10.jpg);
  201.  
  202. float: right;
  203.  
  204. height: 149px;
  205.  
  206. width: 382px;
  207.  
  208. }
  209.  
  210.  
  211.  
  212. #logo {
  213.  
  214. float: left;
  215.  
  216. height: 77px;
  217.  
  218. width: 399px;
  219.  
  220. }
  221.  
  222. #navigator {
  223.  
  224. float: right;
  225.  
  226. width: 251px;
  227.  
  228. height: 252px;
  229.  
  230. }
  231.  
  232. #nav_up {
  233.  
  234. height: 34px;
  235.  
  236. width: 251px;
  237.  
  238. clear: none;
  239.  
  240. float: none;
  241.  
  242. }
  243.  
  244. #nav_back {
  245.  
  246. background-image: url(images/img_07.jpg);
  247.  
  248. height: 218px;
  249.  
  250. width: 251px;
  251.  
  252. text-align: center;
  253.  
  254. vertical-align: middle;
  255.  
  256. }
  257.  
  258. #forum {
  259.  
  260. float: left;
  261.  
  262. height: 175px;
  263.  
  264. width: 399px;
  265.  
  266. }
  267.  
  268. #forum_up {
  269.  
  270. height: 26px;
  271.  
  272. }
  273.  
  274.  
  275. #upper_menu {
  276.  
  277. width: 650px;
  278.  
  279. height: 70px;
  280.  
  281. }
  282.  
  283. .strzalka_imp {
  284.  
  285. margin-top: 2px;
  286.  
  287. padding-top: 2px;
  288.  
  289. background-image: url(images/arrow.gif);
  290.  
  291. background-repeat: no-repeat;
  292.  
  293. background-position: 10px 4px;
  294.  
  295. text-indent: 22px;
  296.  
  297. font-weight: bolder;
  298.  
  299. border-bottom-width: 1px;
  300.  
  301. border-bottom-style: dotted;
  302.  
  303. border-bottom-color: #5C5B52;
  304.  
  305. margin-bottom: 2px;
  306.  
  307. padding-bottom: 2px;
  308.  
  309. width: 95%;
  310.  
  311. border-top-width: 1px;
  312.  
  313. border-top-style: dotted;
  314.  
  315. border-top-color: #5C5B52;
  316.  
  317. font-variant: normal;
  318.  
  319. text-transform: none;
  320.  
  321. font-family: Verdana, Arial, Helvetica, sans-serif;
  322.  
  323. font-size: 10px;
  324.  
  325. cursor: default;
  326.  
  327. }
  328.  
  329. #footer {
  330.  
  331. height: 50px;
  332.  
  333. width: 650px;
  334.  
  335. clear: both;
  336.  
  337. float: none;
  338.  
  339. vertical-align: middle;
  340.  
  341. text-align: center;
  342.  
  343. margin-top: 15px;
  344.  
  345. padding-top: 15px;
  346.  
  347. }
  348.  
  349.  
  350. img {
  351.  
  352. border: 0px;
  353.  
  354. }
  355.  
  356. .link_button {
  357.  
  358. background-repeat: no-repeat;
  359.  
  360. border-bottom-width: 1px;
  361.  
  362. border-bottom-style: dotted;
  363.  
  364. border-bottom-color: #5C5B52;
  365.  
  366. width: 95%;
  367.  
  368. text-align: center;
  369.  
  370. }
  371.  
  372. .button_img {
  373.  
  374. margin-top: 5px;
  375.  
  376. margin-bottom: 5px;
  377.  
  378. padding-top: 5px;
  379.  
  380. padding-bottom: 5px;
  381.  
  382. border-top-width: 0px;
  383.  
  384. border-right-width: 1px;
  385.  
  386. border-bottom-width: 1px;
  387.  
  388. border-left-width: 1px;
  389.  
  390. border-right-style: none;
  391.  
  392. border-bottom-style: none;
  393.  
  394. border-left-style: none;
  395.  
  396. border-color: #5C5B52;
  397.  
  398. }
  399.  
  400. .screen_wideografia {
  401.  
  402. margin: 5px;
  403.  
  404. padding: 5px;
  405.  
  406. }
  407.  
  408. .punkt {
  409.  
  410. background-image: url(images/arrow.gif);
  411.  
  412. background-repeat: no-repeat;
  413.  
  414. background-position: 2px 2px;
  415.  
  416. text-indent: 14px;
  417.  
  418. margin-bottom: 2px;
  419.  
  420. padding-bottom: 2px;
  421.  
  422. width: 95%;
  423.  
  424. }
  425.  
  426. td, div {
  427.  
  428. vertical-align: top;
  429.  
  430. font-family: Verdana, Arial, Helvetica, sans-serif;
  431.  
  432. font-size: 10px;
  433.  
  434. color: #787669;
  435.  
  436. }
  437.  
  438. .strzalka {
  439.  
  440. margin-top: 1px;
  441.  
  442. padding-top: 1px;
  443.  
  444. background-image: url(images/arrow.gif);
  445.  
  446. background-repeat: no-repeat;
  447.  
  448. background-position: 2px 3px;
  449.  
  450. text-indent: 14px;
  451.  
  452. border-bottom-width: 1px;
  453.  
  454. border-bottom-style: dotted;
  455.  
  456. border-bottom-color: #5C5B52;
  457.  
  458. margin-bottom: 2px;
  459.  
  460. padding-bottom: 2px;
  461.  
  462. width: 95%;
  463.  
  464. }
  465.  
  466. a {
  467.  
  468. color: #827260;
  469.  
  470. text-decoration: none;
  471.  
  472. }
  473.  
  474. p {
  475.  
  476. margin: 0px;
  477.  
  478. padding: 0px;
  479.  
  480. }
[HTML] pobierz, plaintext

I screeny:
Opera
Internet Explorer

Ten post edytował spit 27.11.2005, 19:26:37
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 4)
revyag
post 28.11.2005, 09:56:17
Post #2





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

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

Proponuję najpierw zopytmalizowanie cssa smile.gif
Kod
//ustawiasz wartości margin i padding dla wszystkich elementow - nie trzeba osobno dla kazdego
* {
    margin:0;
    padding:0;
}
//zamiast ustawiac paddingi i marginy osobno dla top,bottom,left,right mozna tak:
padding: 0 5px 0 5px;  -->(top,right,bottom,left), margin tak samo

//border można ustawić prościej
border-right: 15px solid #3F3D36;

Nie musisz ustawiac np. float:none, bo domyślnie dla elementu jest już to już ustawione.
Masz dużo niepotrzebnych rzeczy, np.z-index, visibility, text-transform, overflow po co to ?
Ustawiasz width dla border, a potem jego styl na none, ta operacja nie ma sensu bo bordera nie będzie widać, a produkuje to tylko dodatkowy niepotrzebny kod css.
Według mnie sprawa layoutu powinna być jeszcze raz przemyślana, bo są małe szanse żeby udało Ci się to zrobić w tej formie jaka jest. Wszechobecne paski przewijania po prostu zabiją tą stronę.
Poprawiłem Ci to, nie wiem czy wszystko:
Kod
* {
    margin: 0;
    padding: 0;
}
body {
    background-image: url(images/bg.gif);
}

#content_up {
    height: 41px;
    width: 401px;
}

#content_main {
    width: 400px;
    text-align: justify;
    vertical-align: top;
    background-color: blue;
}
#main_div {
    margin: auto;
    width: 650px;
    border-right: 15px solid #3F3D36;
    border-left: 15px solid #3F3D36;
    background-color: red;
}
#left {
    width: 11px;
    float: left;
}

#menu {
    float: right;
    width: 205px;
    background-image: url(images/img_18.jpg);
    border-bottom-width: 1px solid #4C483F;
    background-color: green;
}

#menu_main {
    background-image: url(images/img_16.jpg);
    background-repeat: no-repeat;
}

#menu_up {
    height: 41px;
    width: 205px;
}

#odstep {
    float: left;
    width: 10px;
}

#content {
    float: left;
    width: 410px;
    background-image: url(images/img_19.jpg);
    border-bottom-width: 1px solid #4C483F;
    padding-bottom: 10px;
}

#right {
    float: right;
    width: 4px;
}

#forum_left {
    float: left;
    width: 17px;
    height: 149px;
}

#forum_bg {
    background-image: url(images/img_10.jpg);
    float: right;
    height: 149px;
    width: 382px;
}

#logo {
    float: left;
    height: 77px;
    width: 399px;
}

#navigator {
    float: right;
    width: 251px;
    height: 252px;
}

#nav_up {
    height: 34px;
    width: 251px;
}

#nav_back {
    background-image: url(images/img_07.jpg);
    height: 218px;
    width: 251px;
    text-align: center;
    vertical-align: middle;
}

#forum {
    float: left;
    height: 175px;
    width: 399px;
}

#forum_up {
    height: 26px;
}

#upper_menu {
    width: 650px;
    height: 70px;
}

.strzalka_imp {
    margin: 2px 0 2px 0;
    padding: 2px 0 2px 0;
    background-image: url(images/arrow.gif);
    background-repeat: no-repeat;
    background-position: 10px 4px;
    text-indent: 22px;
    font-weight: bolder;
    border-bottom: 1px dotted #5C5B52;
    width: 95%;
    border-top-width: 1px dotted #5C5B52;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
}

#footer {
    height: 50px;
    width: 650px;
    clear: both;
    vertical-align: middle;
    text-align: center;
    margin-top: 15px;
    padding-top: 15px;
}


img {
    border: 0px;
}

.link_button {
    background-repeat: no-repeat;
    border-bottom-width: 1px dotted #5C5B52;
    width: 95%;
    text-align: center;
}

.button_img {
    margin: 5px 0 5px 0;
    padding-top: 5px 0 5px 0;
    border-color: #5C5B52;
}

.screen_wideografia {
    margin: 5px;
    padding: 5px;
}

.punkt {
    background-image: url(images/arrow.gif);
    background-repeat: no-repeat;
    background-position: 2px 2px;
    text-indent: 14px;
    margin-bottom: 2px;
    padding-bottom: 2px;
    width: 95%;

}

td, div {
    vertical-align: top;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #787669;
}

.strzalka {
    margin: 1px 0 2px 0;
    padding: 1px 0 2px 0;
    background-image: url(images/arrow.gif);
    background-repeat: no-repeat;
    background-position: 2px 3px;
    text-indent: 14px;
    border-bottom: 1px dotted #5C5B52;
    width: 95%;
}

a {
    color: #827260;
    text-decoration: none;

}

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5. <title>[ aftersound.info ]</title>
  6. <link href="st.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <body>
  9. <div id="main_div">
  10.     <div id="upper_menu"><img src="images/img_01.jpg" alt="" width="302" height="70" /><img src="images/img_02.jpg" alt="" width="97" height="70" /><img src="images/img_03.jpg" alt="" width="124" height="70" /><img src="images/img_04.jpg" alt="" width="127" height="70" /></div>
  11.     <div id="logo"><img src="images/img_05.jpg" alt="" width="399" height="77" /></div>
  12.     <div id="navigator">
  13.         <div id="nav_up"><img src="images/img_06.jpg" alt="" width="251" height="34" /></div>
  14.         <div id="nav_back"><img src="tytul.jpg" alt="" width="220" height="200" /></div>
  15.     </div>
  16.     <div id="forum">
  17.         <div id="forum_up"><img src="images/img_08.jpg" alt="" width="399" height="26" /></div>
  18.         <div id="forum_left"><img src="images/img_09.jpg" alt="" width="17" height="149" /></div>
  19.         <div id="forum_bg">
  20.             <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit </a></p>
  21.             <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit </a></p>
  22.             <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit </a></p>
  23.             <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit</a></p>
  24.             <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit</a></p>
  25.             <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit</a></p>
  26.             <p class="strzalka"><a href="#">Nie lubie kaczora</a> przez <a href="#">spit</a></p>
  27.         </div>
  28.     </div>
  29.     <div id="menu">
  30.         <div id="menu_up"><img src="images/img_12.jpg" alt="" width="205" height="41" /></div>
  31.         <div id="menu_main">
  32.             <p class="strzalka_imp">Strona</p>
  33.             <p class="strzalka"><a href="#">Wiadomości</a></p>
  34.             <p class="strzalka"><a href="#">Ekipa</a></p>
  35.             <p class="strzalka"><a href="#">Historia strony</a></p>
  36.             <p class="strzalka"><a href="#">Ciekawe odnośniki</a></p>
  37.             <p>&nbsp;</p>
  38.             <p>&nbsp;</p>
  39.             <p class="strzalka_imp">Zespoły</p>
  40.             <p class="strzalka"><a href="#">A Perfect Circle</a></p>
  41.             <p class="strzalka"><a href="#">At The Drive-In</a></p>
  42.             <p class="strzalka"><a href="#">Bjork</a></p>
  43.             <p class="strzalka"><a href="#">Cire</a></p>
  44.             <p class="strzalka"><a href="#">Coldplay</a></p>
  45.             <p class="strzalka"><a href="#">Dredg</a></p>
  46.             <p class="strzalka"><a href="#">Day One Symphony</a></p>
  47.             <p class="strzalka"><a href="#">Feeder</a></p>
  48.             <p class="strzalka"><a href="#">Lenny Valentino</a></p>
  49.             <p class="strzalka"><a href="#">Marilyn Manson</a></p>
  50.             <p class="strzalka"><a href="#">Mars Volta, The</a></p>
  51.             <p class="strzalka"><a href="#">Mass Hysteria</a></p>
  52.             <p class="strzalka"><a href="#">Mayan Factor, The</a></p>
  53.             <p class="strzalka"><a href="#">Mindless Self Indulgence</a></p>
  54.             <p class="strzalka"><a href="#">Muse</a></p>
  55.             <p class="strzalka"><a href="#">Myslovitz</a></p>
  56.             <p class="strzalka"><a href="#">Nine Inch Nails</a></p>
  57.             <p class="strzalka"><a href="#">Orgy</a></p>
  58.             <p class="strzalka"><a href="#">Placebo</a></p>
  59.             <p class="strzalka"><a href="#">Radiohead</a></p>
  60.             <p class="strzalka"><a href="#">Team Sleep</a></p>
  61.             <p class="strzalka"><a href="#">Tool </a></p>
  62.             <p>&nbsp;</p>
  63.             <p>&nbsp;</p>
  64.             <p class="strzalka_imp">Interakcja</p>
  65.             <p class="strzalka"><a href="#">Forum</a></p>
  66.             <p class="strzalka"><a href="#">Księga Gości</a></p>
  67.             <p>&nbsp;</p>
  68.             <p>&nbsp;</p>
  69.             <p class="strzalka_imp">Multimedia</p>
  70.             <p class="strzalka">Galerie</p>
  71.             <p class="strzalka">Audio</p>
  72.             <p class="strzalka">Wideo</p>
  73.             <p class="strzalka">Inne</p>
  74.             <p>&nbsp;</p>
  75.             <p>&nbsp;</p>
  76.             <p class="strzalka_imp">Wspólpracujemy z...</p>
  77.             <p class="link_button"><a href="http://dredg.fan.pl/" onclick="target='_blank';"><img src="http://www.dredg.inside.net.pl/pics/bannery/button.gif" alt="" width="88" height="31" border="0" class="button_img" longdesc="http://dredg.fan.pl" /></a></p>
  78.             <p class="link_button"><a href="http://dredg.fan.pl/" onclick="target='_blank';"><img src="http://www.dredg.inside.net.pl/pics/bannery/button.gif" alt="dredg" width="88" height="31" border="0" class="button_img" longdesc="http://dredg.fan.pl" /></a></p><p class="link_button"><a href="http://dredg.fan.pl/" onclick="target='_blank';"><img src="http://www.dredg.inside.net.pl/pics/bannery/button.gif" alt="" width="88" height="31" border="0" class="button_img" longdesc="http://dredg.fan.pl" /></a></p>
  79.         </div>
  80.     </div>
  81.     <div id="odstep"><img src="images/img_13.jpg" alt="" width="10" /></div>
  82.     <div id="content">
  83.         <div id="content_up"><img src="images/img_14.jpg" alt="" width="410" height="41" /></div>
  84.         <div id="content_main">
  85.             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc id felis at elit aliquam ullamcorper. Phasellus arcu tellus, varius ac, bibendum id, rutrum id, sem. Mauris pretium mollis nisi. Cras ut eros. Ut sed mauris vitae risus euismod bibendum. Nulla facilisi. In malesuada ullamcorper tellus. Vivamus sed pede. Vestibulum elementum urna quis sapien. Quisque egestas, massa vehicula tempor mollis, metus nisl eleifend velit, eget laoreet leo tellus nec lacus. Pellentesque eu metus sed metus placerat nonummy. Praesent mollis, purus vitae dapibus ornare, velit libero eleifend erat, quis egestas leo purus vitae est. </p>
  86.             <p>Sed lobortis, massa non interdum ornare, quam orci venenatis augue, scelerisque porttitor metus libero vel augue. Aenean non enim non libero mollis hendrerit. Suspendisse potenti. Maecenas elementum, tellus ut tincidunt ultricies, ipsum urna vulputate leo, id tristique leo quam id justo. Nunc et eros sed neque laoreet varius. Nulla in nunc ut pede nonummy imperdiet. Suspendisse quis quam. Nulla in dui vitae felis viverra laoreet. In hac habitasse platea dictumst. Aliquam ligula turpis, eleifend eu, sodales sed, semper sed, purus. Phasellus egestas egestas erat. </p>
  87.             <p>Nulla blandit. Duis ut augue. Fusce pharetra. Sed orci. Nulla nisl. Morbi sapien. In at pede. Maecenas sit amet tortor vel justo adipiscing eleifend. Nunc nec orci. Nullam arcu. Vivamus elementum magna sed nulla. Cras quis neque. Sed vestibulum, risus non convallis rhoncus, velit justo porttitor dolor, iaculis porttitor enim erat a risus. Proin justo. In at enim. Sed enim risus, sagittis id, pellentesque at, auctor et, eros. Morbi pharetra lacus a pede. Curabitur lobortis ipsum nec augue. Duis accumsan. </p>
  88.             <p>Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed et justo non lectus commodo tempor. Vestibulum quis nulla pretium diam elementum laoreet. Morbi ullamcorper, nibh vitae interdum congue, sem nisi semper elit, ac bibendum ligula odio ac nulla. Morbi auctor, lorem vel sodales tristique, pede lacus luctus ipsum, in hendrerit tellus tellus ut arcu. Maecenas cursus cursus nulla. Ut tincidunt, tellus cursus tempor varius, sapien tellus sodales augue, in interdum nisl leo quis neque. Maecenas libero ligula, viverra et, vehicula quis, lacinia sed, urna. Vivamus arcu. Nam pharetra. Nullam in lectus. Quisque ac diam. Sed dolor felis, dapibus vitae, gravida sed, venenatis ut, tellus. Nunc elementum nonummy lectus. Nulla facilisi. Pellentesque semper purus pellentesque risus. Cras venenatis leo quis urna. Quisque quam sem, euismod nec, pretium vitae, rhoncus nec, felis. Phasellus ullamcorper posuere quam. </p>
  89.             <p>Aliquam eu leo. Mauris arcu justo, interdum sed, laoreet nec, laoreet sed, turpis. Praesent ipsum mi, rhoncus at, placerat et, gravida at, purus. Maecenas aliquet ligula tincidunt leo. Nullam a quam. In placerat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed venenatis, neque ac posuere auctor, nisi risus facilisis augue, eu ornare ligula lectus ac ipsum. In aliquet dictum dui. Suspendisse non eros. Maecenas iaculis mauris sed tellus. In eros arcu, vehicula non, luctus a, accumsan vel, nibh. Vivamus quam.</p>
  90.         </div>
  91.     </div>
  92.     <div id="left"><img src="images/img_11.jpg" alt="" width="11" height="478" /></div>
  93.     <div id="righ"><img src="images/img_15.jpg" alt="" /><span style='color:blue'></span></div>
  94.     <div id="footer">[ w3c buttons ]</div>
  95. </div>
  96. </body>
  97.  
  98. </html>
[HTML] pobierz, plaintext


--------------------
-------------

------
Go to the top of the page
+Quote Post
spit
post 28.11.2005, 15:27:15
Post #3





Grupa: Zarejestrowani
Postów: 135
Pomógł: 0
Dołączył: 1.08.2005

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

Dzieki wielkie za odpowiedz i zainteresowanie, ale to niestety nie to.. tzn. działa prawie że dobrze, ale wszystkie elementy sie posypały... Ogólnie to zauwazyłem, że pod IE między div'ami pojawiają się niepotrzebne odstępny... jak temu zaradzić?
Go to the top of the page
+Quote Post
popo
post 28.11.2005, 17:30:17
Post #4





Grupa: Zarejestrowani
Postów: 85
Pomógł: 0
Dołączył: 15.07.2005

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

powinno pomoc snitch.gif jest tam maly przykladzik jak obejsc w css'ie problemy ie i wczesniejszych wersji opery z obsluga box model (problemy z marginesami i borderami)

Ten post edytował popo 28.11.2005, 17:40:39
Go to the top of the page
+Quote Post
spit
post 28.11.2005, 19:08:42
Post #5





Grupa: Zarejestrowani
Postów: 135
Pomógł: 0
Dołączył: 1.08.2005

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

No tak, z tym że ja, gdy mam padding, to zaznaczam różnicę w wymiarze div'a. Ale to przy dwóch czy trzech warstwach tylko, a dziś sklejałem strone od nowa, i w miejscach gdzie jeszcze nie wspominałem o paddingu były odstępy (linijka od linijki).
Go to the top of the page
+Quote Post
« 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 · Linearny+ · Przełącz na: Drzewo

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

RSS Wersja Lo-Fi Aktualny czas: 13.07.2025 - 01:44
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn