Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: layout css się rozjeżdża
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
t4keda
http://t4keda.cba.pl/jscript/light_css/

W FF3.5 i Chrome4 wygląda tak jak powinien, niestety w Operze10 i IE8 trochę się rozjeżdża (lokalnie w IE8 to się kompletnie rozsypuje i wolę nie wiedzieć jak to wygląda w IE6 i 7).
Opera: robi się jakiś margines z prawej strony prawej kolumny
IE8: pod białym menu, skrajne kolumny dochodzą za wysoko i z lewej strony prawej kolumny jest jakiś margines

Jakbyście chcieli obejrzeć CSS:
http://t4keda.cba.pl/jscript/light_css/style.css
lub
  1. *{
  2. padding: 0px;
  3. margin: 0px;
  4. border: none;
  5. text-decoration: none;
  6. }
  7.  
  8. html {
  9. background-color: #00aa00;
  10. /* background-color: #ff9100;*/
  11. }
  12.  
  13. body{
  14. font-family: "Century Gothic", Tahoma;
  15. font-size: 11pt;
  16. margin-bottom: 15px;
  17. }
  18.  
  19. #container{
  20. color: #ffffff;
  21. background-color: #ff9100;
  22. margin: 0 auto;
  23. width: 98%;
  24. /* background-color: #0089af;*/
  25. }
  26.  
  27. #top{
  28. float: none;
  29. height: 150px;
  30. margin: 5px 0px 5px 0px;
  31. }
  32.  
  33. #login{
  34. float: right;
  35. text-align: right;
  36. padding-top: 10px;
  37. padding-right: 15px;
  38. height: 100px;
  39. width: 235px;
  40. }
  41.  
  42. #login p{
  43. padding: 5px 5px 0;
  44. }
  45.  
  46. input.poletxt{
  47. border: #00cc00 1px solid;
  48. background-color: #00aa00;
  49. height: 15px;
  50. padding: 5px 0px 5px 0px;
  51. vertical-align: middle;
  52. text-align: center;
  53. font-family: tahoma,sans-serif;
  54. font-size: 11px;
  55. color: #ffffff;
  56. }
  57.  
  58. input.przycisk{
  59. border: #00aa00 1px solid;
  60. background-color: #00cc00;
  61. height: 22px;
  62. text-align: center;
  63. padding-bottom: 3px;
  64. font-family: tahoma,sans-serif;
  65. font-size: 11px;
  66. color: #ffffff;
  67. }
  68.  
  69. #menu{
  70. float: left;
  71. width: 100%;
  72. background-color: #ffffff;
  73. border-top: solid 5px #00aa00;
  74. border-bottom: solid 5px #00aa00;
  75. height: 35px;
  76. }
  77.  
  78. #menu ul{
  79. list-style: none;
  80. text-align: center;
  81. padding-left: 205px;
  82. }
  83.  
  84. #menu li{
  85. float: left;
  86. }
  87.  
  88. #menu li a{
  89. display: block;
  90. padding: 8px 7px 9px 7px;
  91. font-weight: bold;
  92. color: #00aa00;
  93. }
  94.  
  95. #menu li a:hover{
  96. background-color: #00aa00;
  97. color: #ffffff;
  98. }
  99.  
  100. #side_center{
  101. max-width: 100%;
  102. min-height: 350px;
  103. margin-left: 200px;
  104. margin-right: 200px;
  105. padding: 15px;
  106. text-align: justify;
  107. }
  108.  
  109. #side_left{
  110. float: left;
  111. width: 190px;
  112. background-color: #0089af;
  113. padding: 10px 0px 8000px 10px;
  114. margin-bottom: -8000px;
  115. border-right: solid 5px #00aa00;
  116. }
  117.  
  118. #side_right{
  119. float: right;
  120. width: 180px;
  121. background-color: #0089af;
  122. padding: 10px 10px 8000px 10px;
  123. margin-bottom: -8000px;
  124. border-left: solid 5px #00aa00;
  125. text-align: justify;
  126. }
  127.  
  128. #content {
  129. overflow: hidden;
  130. float: left;
  131. max-width: 100%;
  132. border-bottom: solid 5px #00aa00;
  133. }
  134.  
  135. #stopka {
  136. float: none;
  137. padding: 3px;
  138. text-align: center;
  139. font-size: 8pt;
  140. }


Teraz małe zwierzenia:
Nigdy nie robiłem strony o szerokości dostosowującej się do szerokości ekranu, nie pamiętam czy robiłem stronę w układzie 3 kolumn (a tym bardziej z równą wysokością wszystkich).

Proszę o naukę, pokutę i rozwiązanie.
athei
Tu masz 3 kolumnowy, środkowa zmienia szerokość
http://forum.php.pl/index.php?showtopic=132784&hl=
t4keda
Taa, przepisanie od zera zawsze jest pewną opcją, która ma całkiem spore szanse na powodzenie: http://t4keda.cba.pl/jscript/contrast_css/
Tylko, że to wymagało lekkiej zmiany układu div'ów i css. A mi chodzi o to, czy jest możliwe poprawienie tej pierwszej wersji, żeby działała poprawnie?
W ostateczności zawsze mogę skorzystać z wersji przepisanej, ale to mi na ciekawość raczej nie pomoże.
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.