Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]problem z rozciągnięciem strony
Forum PHP.pl > Forum > Przedszkole
-Andrzej-
Witam, mam problem jestem zielony i nie lubię css.




http://iv.pl/viewer.php?file=41457247298586172997.png - Wygląd problemu

Chciałbym rozciągnąć to tak, aby stopka była na dole strony, gdy jest duża ilość tekstu jest ok, ale gdy mała robią się problemy. sad.gif


  1. /*#############################################################
  2. Name: Coffee N Cream
  3. Date: 2006-08-24
  4. Description: A smooth coffee style template.
  5. Author: Viktor Persson
  6. URL: <a href="http://templates.arcsin.se" target="_blank">http://templates.arcsin.se</a>
  7.  
  8. Feel free to use and modify but please provide credits.
  9. #############################################################*/
  10.  
  11. /* standard elements */
  12. * {
  13. margin: 0;
  14. padding: 0;
  15. }
  16. a {
  17. color: #963;
  18. }
  19. a:hover {
  20. color: #C60;
  21. }
  22. body {
  23. background: #655A46 url(img/bg.gif);
  24. color: #543;
  25. font: normal 62.5% "Lucida Sans Unicode",sans-serif;
  26. }
  27. input {
  28. color: #555;
  29. font: normal 1.1em "Lucida Sans Unicode",sans-serif;
  30. }
  31. p,cite,code,ul {
  32. font-size: 1.2em;
  33. padding-bottom: 1.2em;
  34. }
  35. h1 {
  36. font-size: 1.4em;
  37. margin-bottom: 4px;
  38. }
  39. code {
  40. background: #FFE;
  41. border: 1px solid #EED;
  42. border-left: 6px solid #938262;
  43. color: #554;
  44. display: block;
  45. font: normal 1.1em "Lucida Sans Unicode",serif;
  46. margin-bottom: 12px;
  47. padding: 8px 10px;
  48. white-space: pre;
  49. }
  50. blockquote {
  51. background: url(img/quote.gif) no-repeat;
  52. color: #666;
  53. display: block;
  54. font: normal 1.3em "Lucida Sans Unicode",serif;
  55. padding-left: 28px;
  56. }
  57. h1,h2,h3 {
  58. color: #654;
  59. padding-top: 6px;
  60. }
  61.  
  62. /* misc */
  63. .clearer {
  64. clear: both;
  65. }
  66.  
  67. /* structure */
  68. .container {
  69. background: url(img/bgcontainer.gif) repeat-y;
  70. margin: 0 auto;
  71. width: 780px;
  72. }
  73.  
  74. /* header */
  75. .header {
  76. background: url(img/bgheader.gif) repeat-x;
  77. height: 120px;
  78. margin: 0 auto;
  79. width: 760px;
  80. }
  81.  
  82. /* title */
  83. .title {
  84. padding: 32px;
  85. }
  86. .title h1 {
  87. color: #E4DBCF;
  88. font: normal 3.4em "Lucida Sans Unicode","Trebuchet MS",sans-serif;
  89. }
  90.  
  91. /* navigation */
  92. .navigation {
  93. background: #FFF url(img/bgnavigation.gif) repeat-x;
  94. font: bold 1.2em Verdana,sans-serif;
  95. height: 44px;
  96. margin: 0 auto;
  97. padding: 0 18px;
  98. width: 725px;
  99. }
  100. .navigation a {
  101. color: #543;
  102. text-decoration: none;
  103. padding: 3px 4px;
  104. margin-right: 12px;
  105. line-height: 44px;
  106. }
  107. .navigation a:hover {
  108. background: #CEBDA1;
  109. color: #420;
  110. }
  111.  
  112. /* main */
  113. .main {
  114. clear: both;
  115. padding: 0 10px 12px 28px;
  116. }
  117.  
  118. /* sub navigation */
  119. .sidenav {
  120. float: right;
  121. width: 218px;
  122. }
  123. .sidenav h1 {
  124. background: #BCB39F url(img/sidenavh1.gif) repeat-x;
  125. border-bottom: 1px solid #999;
  126. border-top: 1px solid #CCC;
  127. color: #4A4A44;
  128. font-size: 1.2em;
  129. height: 22px;
  130. margin: 0;
  131. padding-left: 12px;
  132. }
  133. .sidenav ul {
  134. margin: 0;
  135. padding: 0;
  136. }
  137. .sidenav li {
  138. border-bottom: 1px solid #A98;
  139. border-top: 1px solid #DDC;
  140. list-style: none;
  141. }
  142. .sidenav li a {
  143. background: #CCC3AF;
  144. color: #554;
  145. display: block;
  146. padding: 8px 4px 8px 12px;
  147. text-decoration: none;
  148. }
  149. .sidenav li a:hover {
  150. background: #D6CCB9;
  151. color: #654;
  152. }
  153.  
  154. /* content */
  155. .content {
  156. padding-top: 12px;
  157. float: left;
  158. width: 68%;
  159. }
  160. .content .descr {
  161. color: #987E57;
  162. font-size: 1.1em;
  163. margin-bottom: 6px;
  164. }
  165. .content li {
  166. list-style: url(img/li.gif);
  167. margin-left: 18px;
  168. }
  169.  
  170. /* footer */
  171. .footer {
  172. background: #958463 url(img/bgfooter.gif) repeat-x;
  173. color: #FED;
  174. font-size: 1.1em;
  175. line-height: 40px;
  176. margin: 0 auto;
  177. text-align: center;
  178. width: 760px;
  179. }
  180. .footer a {
  181. color: #FFD;
  182. text-decoration: none;
  183. }
  184. .footer a:hover {
  185. color: #FFF;
  186. text-decoration: underline;
  187. }



Dzięki za pomoc!
Kshyhoo
Cytat(-Andrzej- @ 28.01.2012, 20:11:00 ) *
Witam, mam problem jestem zielony i nie lubię css.

Zacznij handlować kapustą...
Co do problemu, możesz nadać pojemnikowi wysokość minimalną.
-Andrzej-
Dawalem heighy: 100% i nic!
-Andrzej-
Cytat(-Andrzej- @ 28.01.2012, 20:19:21 ) *
Dawalem heighy: 100% i nic!


height*
Kshyhoo
  1. min-height: xxxpx;
-Andrzej-
Dzięki, ok. Ale nie dopasuje tego bo każdy ma inna rozdzielczość, nie? A nie mogę nadać jakoś dolnego albo górnego marginesu? ;p
Testosteron
Prawdopodobnie można wartość minimalną ustawić procentowo, ale nie polecam takiego rozwiązania. Na twoim miejscu ustawiłbym normalnie.
Tutaj masz kurs css: http://www.kurshtml.edu.pl/css/
Korab
Poszukaj w Google sticky footer.
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.