Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Strona się rozjeżdża
Forum PHP.pl > Forum > Po stronie przeglądarki
rafalew
27.09.2010, 21:45:12
Witam,
Mam problem. Na mojej stronie w starszych przeglądarkach między logo a menu robi się dziwny odstęp. Okrojoną wersję pustą praktycznie zamieszczam tu: rafalew.cba.pl pod normalnymi przeglądarkami nie widać problemu, więc pod linkiem "coś" zamieszczam zdjęcie jak to się rozjeżdża, np. pod ie6.

Zamieszczam kod index.html

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html 
  2.    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  3.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> 
  5. <head> 
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> 
  7. <meta name="Description" content="" /> 
  8. <meta name="Keywords" content="" /> 
  9. <title></title> 
  10. <link rel="Stylesheet" type="text/css" href="style.css" /> 
  11. <link rel='stylesheet' type='text/css' href='menu_style.css' /> 
  12. </head> 
  13. <body>       <img src="images/tlogora.PNG" alt="" /><div id="top"> 
  14.       <div id="BODY"> 
  15.       <div id="LOGO"><!--LOGO--><img src="images/logo.JPG" alt="" /><!--/LOGO--> 
  16.             <!--LINKI--> 
  17.             <ul class="menu blue"> 
  18.             <li><a href="index.html" title="">Strona główna</a></li> 
  19.             <li><a href="cos.html" title="">Coś</a></li> 
  20.             <li><a href="1.html" title="" >1</a></li> 
  21.             <li><a href="2.html" title="">2</a></li> 
  22.             <li><a href="3.php" title="">3</a></li> 
  23.  
  24.          </ul></div> 
  25.       <!--/LINKI--> 
  26.       <div id="TRE"> 
  27.       <div id="TRESC"> 
  28.       <div class="ZAWARTOSC"> 
  29.  
  30. <p>Witamy</p> 
  31. <p>To jest przykładowa treść strony...</p> 
  32.  
  33.  
  34.       </div> 
  35.       </div> 
  36.       </div> 
  37.  
  38.       <div id="INFO"> 
  39.          <!--INFO--> 
  40.             <div class="ZAWARTOSC"> 
  41.             <p>tu cos bedzie</p> 
  42.  
  43.             <!--ZAWARTOSC INFO--> 
  44.  
  45.             <!--/ZAWARTOSC INFO--> 
  46.             </div> 
  47.  
  48.          <!--/INFO--> 
  49.       </div> 
  50.  
  51.       <div id="STOPKA"><!--STOPKA-->STOPKA<!--/STOPKA--></div> 
  52.    </div> 
  53. </div> 
  54. </body> 
  55. </html>
[HTML] pobierz, plaintext


style.css
[HTML] pobierz, plaintext 
  1. /*STRONA*/ 
  2. body { 
  3.    font-size: 12px; 
  4.    font-family: Verdana, Arial, Helvetica, sans-serif; 
  5.    background: #eef1f6 url('images/tlo.JPG') repeat-x; 
  6.    text-align: center; 
  7.    margin-top: 20px; 
  8.    margin-bottom: 20px; 
  9.  
  10.  
  11.  
  12. } 
  13. a img { 
  14.    border: 0; 
  15. } 
  16. /*/STRONA*/ 
  17.  
  18. /*RAMKA*/ 
  19. #top { 
  20.             border-width: 1px; 
  21.             border-color: #C0C0C0; 
  22.             border-style: none dotted none dotted; 
  23.             background: white; 
  24.             font-size: 30px; 
  25.             font-family: Helvetica, Verdana, Arial, sans-serif; 
  26.             color: #000000; 
  27.             margin: 0 auto; 
  28.             width: 970px; 
  29.             padding-top: 0px; 
  30.             padding-bottom: 0px; 
  31.             } 
  32. /*/RAMKA*/ 
  33.  
  34. /*WNETRZE*/ 
  35. #BODY { 
  36.    background-color: white; 
  37.    text-align: left; 
  38.    margin-left: 15px; 
  39.    margin-right: 15px; 
  40.    width: 940px; 
  41.    z-index: 1; 
  42. } 
  43. /*/WNETRZE*/ 
  44.  
  45. /*LOGO*/ 
  46. #LOGO { 
  47.  
  48.  
  49.    background: url("images/a.PNG") no-repeat top left; 
  50.    height: 176px; 
  51.    padding-top: 34px; 
  52.    text-align: center; 
  53.    z-index: 2; 
  54. } 
  55. /*/LOGO*/ 
  56.  
  57.  
  58. /*/TRESC*/ 
  59. #TRE { 
  60.    width: 630px; 
  61.    overflow: hidden; 
  62.    float: left; 
  63.    margin-top: 20px; 
  64.    padding-left:17px; 
  65.  
  66.  
  67. } 
  68.  
  69. #TRESC { 
  70.    width: 640px; 
  71.    overflow: hidden; 
  72.    float: left; 
  73.  
  74.  
  75. } 
  76. #TRESC .ZAWARTOSC { 
  77.    font-size: small; 
  78.    font-family: Helvetica, Verdana, Arial, sans-serif; 
  79.    color: #000000; 
  80.    background: white url('images/podklad1.JPG'); 
  81.    padding-top: 5px; 
  82.    padding-right: 30px; 
  83.    padding-bottom: 30px; 
  84.    padding-left: 30px; 
  85.    line-height: 180%; 
  86. } 
  87. #TRESC .ZAWARTOSC a:link { 
  88.    color: #0000FF; 
  89.    text-decoration: underline; 
  90.    font-weight: normal; 
  91.    font-style: normal; 
  92. } 
  93. #TRESC .ZAWARTOSC a:visited { 
  94.    color: #800080; 
  95.    text-decoration: underline; 
  96.    font-weight: normal; 
  97.    font-style: normal; 
  98. } 
  99. #TRESC .ZAWARTOSC a:hover { 
  100.    color: #FF0000; 
  101.    text-decoration: underline; 
  102.    font-weight: normal; 
  103.    font-style: normal; 
  104. } 
  105. /*/TRESC*/ 
  106.  
  107. /*STOPKA*/ 
  108. #STOPKA { 
  109.    font-size: 11px; 
  110.    font-family: Helvetica, Verdana, Arial,  sans-serif; 
  111.    color: #000000; 
  112.    background-color: white; 
  113.    margin-top: 0px; 
  114.    margin-right: 0px; 
  115.    margin-bottom: 10px; 
  116.    margin-left: 404px; 
  117.    padding-top: 0px; 
  118.    padding-right: 10px; 
  119.    padding-bottom: 10px; 
  120.    padding-left: 0px; 
  121.    text-align: left; 
  122.    clear: both; 
  123.    /*-moz-box-shadow: inset 1px 1px 10px #888; 
  124.    -webkit-box-shadow: inset 1px 1px 10px #888; 
  125.    box-shadow: inset 1px 1px 10px #888;*/ 
  126. } 
  127. #STOPKA a:visited { 
  128.    color: #000000; 
  129.    text-decoration: underline; 
  130. } 
  131. #STOPKA a:link { 
  132.    color: #000000; 
  133.    text-decoration: underline; 
  134. } 
  135. #STOPKA a:hover { 
  136.    color: #000000; 
  137.    text-decoration: none; 
  138. } 
  139. /*/STOPKA*/
[HTML] pobierz, plaintext


menu_style.css

[HTML] pobierz, plaintext 
  1. ul.menu { 
  2. list-style-type:none; 
  3. position:relative; 
  4. display:block; 
  5. height:32px; 
  6. font-size:.4em; 
  7. background:url(images/bg.png) repeat-x top left; 
  8. font-family:Verdana,Helvetica,Arial,sans-serif; 
  9. border:0px solid #000; 
  10. padding-bottom: 0px; 
  11. text-align: center; 
  12. margin: 0 auto; 
  13. width: 830px; 
  14. padding: 0px 20px 0px 20px; 
  15. } 
  16.  
  17. ul.menu li { 
  18. display:block; 
  19. float:left; 
  20. margin:0; 
  21. padding:0; 
  22. } 
  23.  
  24. ul.menu li a { 
  25. float:left; 
  26. color:#A79787; 
  27. text-decoration:none; 
  28. height:24px; 
  29. padding:7px 49px 0; 
  30. font-weight:normal; 
  31. } 
  32.  
  33. ul.menu li a:hover,.current { 
  34. color:#fff; 
  35. background:url(images/bg.png) repeat-x top left; 
  36. text-decoration:none; 
  37. } 
  38.  
  39. ul.menu .current a { 
  40. color:#fff; 
  41. font-weight:700; 
  42. } 
  43.  
  44. /*BLUE*/ 
  45. ul.menu.blue{ 
  46. background-color:#3F8FD2; 
  47. } 
  48. ul.menu.blue li a:hover, .menu.blue li.current { 
  49. background-color: #A3BAE6; 
  50. /*background-color: #78B8F1;*/ 
  51. /*#A3BAE6;*/ 
  52. }
[HTML] pobierz, plaintext



Proszę o pomoc w rozwiązaniu problemu.
Damonsson
28.09.2010, 16:00:11
Nie możesz tak pozycjonować elementów na stronie. Spróbuj pousuwać wszystkie position i odległości i od nowa to napisać. Bo masz nagle absolute, później w tym samym divie chyba relative. Sam aż się pogubiłem. A jak wyskakuje reklama to wtedy ten absolute się przesuwa względem reklamy.
rafalew
28.09.2010, 19:39:49
Ok dzięki, zastosowałem się do rady i dużo rozwiązałem. Zostal jednak nowy problem, który opisałem edytując główny post. Edytowałem tez indeks, style i menu_style wrzucając nowy kod.
Proszę o dalszą pomoc.
Damonsson
28.09.2010, 20:04:43
Twój kod można by było skrócić pewnie 5krotnie ;p
Chwilowo możesz zrobić FIX dla IE6 i dać


ul.menu {
margin: -7px auto;
}

zamiast Twojego

ul.menu {
margin: 0 auto;
}

Ale to nie o to chodzi. Coś tam jest nie tak w kodzie. A ciężko mi się testuje pod IE6.
rafalew
28.09.2010, 21:06:08
Dzięki, rada pomogła. Wszystko działa jak trzeba. Niemniej jakbyś miał jakieś uwagi, co do strony, co należałoby przerobić chętnie się zastosuję.
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.