Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] Strona się rozjezdza przy zmienianiu szerokosci okna przegladarki
Forum PHP.pl > Forum > Przedszkole
Lethys
Jak zrobić aby strona nie dostosowywala sie pod wielkosc okna przegladarki? tylko po prostu czesc ktora jest za zasiegiem przegladarki nie byla widoczna.

Jezeli zmieniam wielkosc okna przegladarki to strona sie rozjezdza (przesuwa sie cale menu, buttony na siebie wchodza, prawa czesc strony znika pod lewa czescia strony itp).

cale okno:


zmniejszony:



Kod css:

  1. *{
  2. padding: 0px;
  3. margin: 0px;
  4. }
  5.  
  6.  
  7. body{
  8. background: white;
  9. margin:0;
  10. padding:0;
  11. height:100%;
  12. font-size: 16px;
  13. font-family: 'Open Sans', sans-serif;
  14. }
  15.  
  16. #container {
  17. min-height:100%;
  18. position:relative;
  19. }
  20.  
  21. #header{
  22. width: 100%;
  23. height: 200px;
  24. background: eae20f;
  25. background-image:url('../img/logo_bg.png');
  26. }
  27.  
  28. #background{
  29. /* background-image:url('../img/logo_wallpaper.png'); */
  30. width: 100%;
  31. height: 200px;
  32. position: absolute;
  33. }
  34.  
  35. #background2{
  36. background-image:url('../img/logo_bg.png');
  37. width: 100%;
  38. height: 200px;
  39. position: absolute;
  40. opacity:0.9;
  41. filter:alpha(opacity=90); /* For IE8 and earlier */
  42. }
  43.  
  44. #logo{
  45. color: black;
  46. font-size: 28px;
  47. margin-left: 5%;
  48. margin-top: 20px;
  49. position: absolute;
  50. }
  51.  
  52. #logo h2{
  53. font-size: 18px;
  54. }
  55.  
  56. .final{
  57. text-align: center;
  58. }
  59.  
  60. #main{
  61. color: #4d4e4f;
  62. margin-left: 5%;
  63. margin-right: 5%;
  64. margin-top: 20px;
  65. padding-bottom:80px; /* Height of the footer */
  66. position:relative;
  67. }
  68.  
  69. #main_left{
  70. width: 70%;
  71. float: left;
  72. }
  73.  
  74. #main_right{
  75. margin-left: 50px;
  76. width: 250px;
  77. padding: 10px;
  78. border:1px solid;
  79. border-radius:2px;
  80. box-shadow: 5px 5px 5px #888888;
  81. float: left;
  82. }
  83.  
  84. .clear{
  85. clear: both;
  86. }
  87.  
  88. #main h2{
  89. text-transform: uppercase;
  90. }
  91. #main hr{
  92. color: #4f0853;
  93. width: 300px;
  94. }
  95.  
  96. #main p{
  97. margin-top: 20px;
  98. }
  99.  
  100. .textwrap{
  101. float: left;
  102. margin: 10px;
  103. }
  104.  
  105. nav {float:left; position: absolute; z-index: 100; margin-left: 5%; margin-top: 155px; text-transform: uppercase; color: black;}
  106. nav ul {text-align:center;}
  107. nav ul li {float:left;display:inline; }
  108. nav ul li:hover {background-color: black; color: #4f0853; cursor: pointer;}
  109. nav ul li a {display:block;padding:15px 25px; color: white; text-decoration:none;} /* kolor czcionki menu głównego */
  110. nav ul li ul {position:absolute;width:200px;background:#FFF;}
  111. nav ul li ul li {width:200px; background: #eae20f;} /* kolor tła rozwijanego */
  112. nav ul li ul li a {display:block;padding:15px 10px; color: black;} /* kolor czcionki z menu rozwijanego */
  113. nav ul li ul li:hover a {background:black; color: white;} /* kolor najechanego z menu rozwijanego */
  114. nav ul li ul.fallback {display:none;}
  115. nav ul li:hover ul.fallback {display:block;}
  116.  
  117. label{
  118. width: 4em;
  119. float: left;
  120. text-align: right;
  121. margin-right: 0.5em;
  122. display: block;
  123. font-size: 21px;
  124. margin-top: 5px;
  125. }
  126.  
  127. input{
  128. -webkit-border-radius: 3px;
  129. -moz-border-radius: 3px;
  130. border-radius: 3px;
  131. border-style:solid;
  132. border-width:1px;
  133. border-color: #4d4e4f;
  134. padding: 4px;
  135. font-size: 21px;
  136. }
  137.  
  138. textarea{
  139. -webkit-border-radius: 3px;
  140. -moz-border-radius: 3px;
  141. border-radius: 3px;
  142. border-style:solid;
  143. border-width:1px;
  144. border-color: #4d4e4f;
  145. padding: 4px;
  146. font-size: 21px;
  147. }
  148.  
  149. #contact_button{
  150. width: 200px;
  151. font-size: 28px;
  152. margin-left: 95px;
  153. }
  154.  
  155. #footer{
  156. position: absolute;
  157. bottom:0;
  158. width:100%;
  159. height:40px; /* Height of the footer */
  160. background: #eae20f;
  161. }
  162.  
  163. #footer p{
  164. margin-left: 5%;
  165. margin-top: 10px;
  166. color: black;
  167. }
  168.  
kropamk
Jeżeli nie chcesz aby strona się skalowała to pożegnaj się z wartościami procentowymi dla szerokości elementów. Korzystaj z px po prostu.
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.