Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Rozjechała się strona
Forum PHP.pl > Forum > Przedszkole
prantan
Cześć.

Tworzę stronę z szerokością 100% czyli na cały ekran. Wszystko było ok, ale teraz zauważyłem że na dole pokazał się suwak i mogę ją przesunąć w prawą stronę (białe tło obok normalnej strony), nawet nie wiem kiedy to się stało, coś musiałem spieprzyć. Jak usunę część tekstu to ta szerokość nieznacznie się zmniejsza, ale nie do końca. Gdzie może leżeć problem?

Pzdr
Kshyhoo
Mam nadzieję, że zakumasz aluzję.
prantan
Sorry. Nie śmiejcie się z burdelu w kodzie, jestem początkujący.

Wszystko było ok, przed paroma zmianami, ale co konkretnie to nie wiem. Może coś zmieniłem co dobrze działało i zapomniałem powrócić do poprzedniego stanu, tutaj niestety nikt nie wywróży. Dlatego jakby ktoś rzucił okiem na kod i coś zasugerował.

  1.  
  2. @charset "UTF-8";
  3. /*
  4. Notatki
  5.  */
  6.  
  7.  
  8.  
  9. .container
  10. {
  11. width: 100%;
  12. height: 200px;
  13. margin: 0 auto;
  14. overflow: hidden;
  15. }
  16.  
  17. .kontener
  18. {
  19. width: 100%;
  20. height: 92px;
  21. margin: 0 auto;
  22. overflow: hidden;
  23. display: inline;
  24. }
  25.  
  26. p {
  27. padding-left: 8px;
  28. padding-right: 8px;
  29. font-family: Arial,Helvetica,Verdana,FreeSans,sans-serif;
  30. font-style: italic;
  31. font-size: 12px;
  32. text-shadow: 0 0 1px rgba(0,0,0,0.5);
  33. }
  34.  
  35. div.dziewcze img {
  36. margin-left: 10%;
  37. }
  38.  
  39. div.pierwszy img {
  40. width: 20%;
  41. height: 84px;
  42. margin-top: 4px;
  43. margin-left: 4%;
  44. position: relative;
  45. float: left;
  46.  
  47. }
  48.  
  49. .ptaszek {
  50. color: green;
  51. font-size: 19pt;
  52. }
  53.  
  54. div.drugi img {
  55. width: 20%;
  56. height: 84px;
  57. margin-top: 4px;
  58. margin-left: 4%;
  59. position: relative;
  60. float: left;
  61.  
  62. }
  63.  
  64. div.trzeci img {
  65. width: 20%;
  66. height: 84px;
  67. margin-top: 4px;
  68. margin-left: 4%;
  69. position: relative;
  70. float: left;
  71.  
  72. }
  73.  
  74. div.czwarty img {
  75. width: 20%;
  76. height: 84px;
  77. margin-top: 4px;
  78. margin-left: 4%;
  79. position: relative;
  80. float: left;
  81.  
  82. }
  83.  
  84. div#farleft
  85. {
  86. width: 20%;
  87. height: 144px;
  88. margin-right: 4%;
  89. margin-left: 4%;
  90. margin-top: 8px;
  91. background: #cee0d2;
  92. float: left;
  93. overflow: auto;
  94.  
  95. }
  96.  
  97. div#left
  98. {
  99. width: 20%;
  100. height: 144px;
  101. margin-right: 4%;
  102. margin-top: 8px;
  103. background: #cee0d2;
  104. float: left;
  105. overflow: auto;
  106. }
  107.  
  108. div#right
  109. {
  110. width: 20%;
  111. height: 144px;
  112. margin-left: 0%;
  113. margin-top: 8px;
  114. background: #cee0d2;
  115. float: left;
  116. overflow: auto;
  117. }
  118.  
  119. div#farright
  120. {
  121. width: 20%;
  122. height: 144px;
  123. margin-left: 4%;
  124. margin-top: 8px;
  125. background: #cee0d2;
  126. float: left;
  127. overflow: auto;
  128. }
  129.  
  130.  
  131.  
  132.  
  133. @font-face {
  134. font-family: 'Twentieth Century MT Condensed';
  135. src: url('webfonts/twc/twentieth_century_mt_condensed.eot');
  136. src: url('webfonts/twc/twentieth_century_mt_condensed.eot?#iefix') format('embedded-opentype'),
  137. url('webfonts/twc/twentieth_century_mt_condensed.svg#Twentieth Century MT Condensed') format('svg'),
  138. url('webfonts/twc/twentieth_century_mt_condensed.woff') format('woff'),
  139. url('webfonts/twc/twentieth_century_mt_condensed.ttf') format('truetype');
  140. font-weight: normal;
  141. font-style: normal;
  142. }
  143.  
  144. @font-face {
  145. font-family: 'Brush Script Std Medium';
  146. src: url('webfonts/bssm/brush_script_std_medium.eot');
  147. src: url('webfonts/bssm/brush_script_std_medium.eot?#iefix') format('embedded-opentype'),
  148. url('webfonts/bssm/brush_script_std_medium.svg#Brush Script Std Medium') format('svg'),
  149. url('webfonts/bssm/brush_script_std_medium.woff') format('woff'),
  150. url('webfonts/bssm/brush_script_std_medium.ttf') format('truetype');
  151. font-weight: normal;
  152. font-style: normal;
  153. }
  154.  
  155. @font-face {
  156. font-family: 'Brush Script MT Italic';
  157. src: url('webfonts/bsmti/brush_script_mt_italic.eot');
  158. src: url('webfonts/bsmti/brush_script_mt_italic.eot?#iefix') format('embedded-opentype'),
  159. url('webfonts/bsmti/brush_script_mt_italic.svg#Brush Script MT Italic') format('svg'),
  160. url('webfonts/bsmti/brush_script_mt_italic.woff') format('woff'),
  161. url('webfonts/bsmti/brush_script_mt_italic.ttf') format('truetype');
  162. font-weight: normal;
  163. font-style: normal;
  164. }
  165.  
  166. @font-face {
  167. font-family: 'garineldoregular';
  168. src: url('webfonts/g/garineldo.eot');
  169. src: url('webfonts/g/garineldo.eot?#iefix') format('embedded-opentype'),
  170. url('webfonts/g/garineldo.woff') format('woff'),
  171. url('webfonts/g/garineldo.ttf') format('truetype'),
  172. url('webfonts/g/garineldo.svg#garineldoregular') format('svg');
  173. font-weight: normal;
  174. font-style: normal;
  175. }
  176.  
  177. div.logo {
  178. color: #000000;
  179. font-size: 32pt;
  180. font-family: Brush Script Std Medium;
  181. white-space:nowrap;
  182. position: relative;
  183. top: -10px;
  184. left: 120px;
  185.  
  186. }
  187.  
  188. div.czerwony_napis {
  189. color: #990101;
  190. font-size: 60pt;
  191. text-align: center;
  192. font-family: Twentieth Century MT Condensed;
  193. white-space:nowrap;
  194. position: relative;
  195. top: -10px;
  196. }
  197.  
  198. div.niebieski_napis {
  199. color: #013366;
  200. font-size: 30pt;
  201. text-align: center;
  202. font-family: Twentieth Century MT Condensed;
  203. white-space:nowrap;
  204. position: relative;
  205. top: -40px;
  206. line-height: 35px;
  207. }
  208.  
  209. div.info2_text {
  210. color: #000000;
  211. font-size: 30pt;
  212. left: 16%;
  213. font-family: garineldoregular;
  214. font-weight: bolder;
  215. white-space:nowrap;
  216. position:relative;
  217. }
  218.  
  219. div.info2_text2 {
  220. color: #000000;
  221. font-size: 24pt;
  222. left: 35%;
  223. top: -15%;
  224. font-family: garineldoregular;
  225. font-weight: bolder;
  226. white-space: nowrap;
  227. position: relative;
  228. }
  229.  
  230. div.opinia_naglowek {
  231. color: #000000;
  232. font-size: 32pt;
  233. text-align: center;
  234. font-family: Brush Script MT Italic;
  235. white-space:nowrap;
  236. position: relative;
  237. top: -9px;
  238.  
  239. }
  240.  
  241. html, body {
  242. margin: 0;
  243. padding: 0;
  244. width: 100%;
  245. height: 100%;
  246. }
  247.  
  248. .content {
  249. min-height: 100%;
  250. position: relative;
  251. overflow: auto;
  252. z-index: 0;
  253. }
  254.  
  255. .background {
  256. position: absolute;
  257. z-index: -1;
  258. top: 0;
  259. bottom: 0;
  260. margin: 0;
  261. padding: 0;
  262. }
  263.  
  264.  
  265.  
  266. #header {
  267. width: 100%;
  268. height: 40px;
  269. background-color: #add140;
  270. }
  271.  
  272. #header2 {
  273. width: 100%;
  274. height: 30px;
  275. background-color: #ebf8c2;
  276. }
  277.  
  278. #line {
  279. width: 100%;
  280. height: 2px;
  281. background-color: #dbf395;
  282. }
  283.  
  284. #info1 {
  285. width: 100%;
  286. height: 150px;
  287. background-color: #ffffff;
  288. }
  289.  
  290.  
  291.  
  292. #info2 {
  293. width: 100%;
  294. height: 150px;
  295. background-color: #ffffff;
  296. }
  297.  
  298.  
  299.  
  300. #oferta {
  301. width: 100%;
  302. height: 450px;
  303. background-color: #ffffff;
  304. }
  305.  
  306.  
  307.  
  308. #opinie {
  309. width: 100%;
  310. height: 40px;
  311. background-color: #ffffff;
  312.  
  313. }
  314.  
  315. #opinie_tlo {
  316. width: 100%;
  317. height: 160px;
  318. background-color: #f8f8f9;
  319. }
  320.  
  321. #reszta_opinii {
  322. width: 100%;
  323. height: 40px;
  324. background-color: #ffffff;
  325. }
  326.  
  327. #reszta_opinii_tlo {
  328. width: 100%;
  329. height: 92px;
  330. background-color: #f8f8f9;
  331. }
  332.  
  333.  
  334.  
  335. #footer {
  336. width: 100%;
  337. height: 100px;
  338. background-color: #add140;
  339. }
  340.  
  341. div.copyright {
  342. font-size: 10pt;
  343. text-align: center;
  344. padding-top: 80px;
  345. }
  346.  
  347.  
  348. /*
  349. Klasa podstrony
  350.  */
  351. #regulamin {
  352. width: 100%;
  353. height: 1000px;
  354. background-color: #ffffff;
  355. }
  356.  
  357.  
nospor
A co nam po samym css?? NIe sadzisz ze byloby najlepiej jakbys podal linka do strony?
prantan
Spoko dzięki. Pewnie że byłoby lepiej tylko że ona jest na kompie do ćwiczeń, nie w sieci z przeznaczeniem do publikacji. Już się uporałem z problemem, wystarczyło wycinać po kawałku atrybuty z html i po sznurku dojść do problemu. Cześć!

p.s Problem polegał na odległościach elementów tekstowych od krawędzi typu padding, margin i inne duperelki.
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.