Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML]DIV najeżdza na drugi
Forum PHP.pl > Forum > Przedszkole
AboutMe
24.05.2010, 13:15:14
Czy ktoś wie czemu footer najeżdża na higher-foot?

[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2.  
  3. .clear {
  4. clear: both;
  5. }
  6.  
  7. #xfoot {
  8. width: 100%;
  9. margin-top: 50px;
  10. margin-left: 0px;
  11. margin-bottom: 0px;
  12. padding: 0px 0px 0px 0px;
  13. color: #999999;
  14. }
  15.  
  16. #xfoot h2 {
  17. overflow:hidden;
  18. padding: 0px 0px 10px 0px;
  19. color: #b3b3b3;
  20. font-weight: 400;
  21. }
  22.  
  23. #xfoot a {
  24. color: #999999;
  25. }
  26.  
  27. #higher-foot {
  28. margin-top: 10px;
  29. width: 960px;
  30. margin: 0 auto;
  31. font: 8pt Verdana, Arial, sans-serif;
  32. font-weight: 400;
  33. }
  34.  
  35.  
  36. #calendar {
  37. width: 150px;
  38. padding: 0px 10px 0px 0px;
  39. margin-top: 30px;
  40. margin-left: 0px;
  41. float: left;
  42. }
  43.  
  44. #calendar td {
  45. font: 14pt Verdana, Arial, sans-serif;
  46. color: #b3b3b3;
  47. }
  48.  
  49. #calendar th {
  50. font: 14pt Verdana, Arial, sans-serif;
  51. color: #b3b3b3;
  52. }
  53.  
  54. #calendar caption {
  55. font: 19pt Verdana, Arial, sans-serif;
  56. color: #b3b3b3;
  57. }
  58.  
  59. #calendar a {
  60. color: #b3b3b3;
  61. text-decoration: underline;
  62. }
  63.  
  64. #recent {
  65. padding: 0px 0px 0px 10px;
  66. font: 9pt Verdana, Arial, sans-serif;
  67. width: 220px;
  68. height: 250px;
  69. margin-right: 60px;
  70. margin-top: 30px;
  71. float: right;
  72. }
  73.  
  74. #recent li {
  75. border-bottom: 1px solid #272727;
  76. padding: 5px 0px 5px 0px;
  77. }
  78.  
  79. #blogroll {
  80. padding: 0px 0px 0px 10px;
  81. width: 140px;
  82. height: 250px;
  83. margin-right: 50px;
  84. margin-top: 30px;
  85. float: right;
  86. font: 9pt Verdana, Arial, sans-serif;
  87. }
  88.  
  89. .links li {
  90. border-bottom: 1px solid #272727;
  91. padding: 5px 0px 5px 0px;
  92. }
  93.  
  94. #meta {
  95. padding: 0px 0px 0px 10px;
  96. width: 150px;
  97. height: 250px;
  98. float: right;
  99. margin-right: 80px;
  100. margin-top: 30px;
  101. font: 9pt Verdana, Arial, sans-serif;
  102. }
  103.  
  104. #meta li {
  105. border-bottom: 1px solid #272727;
  106. padding: 5px 0px 5px 0px;
  107. }
  108.  
  109. #footer {
  110.  
  111. padding: 0px 0px 0px 0px;
  112. font: 7pt Verdana, Arial, sans-serif;
  113. color: #ababab;
  114. text-align: center;
  115. }
  116. </style>
  117.  
  118.  
  119.  
  120. <div id="xfoot">
  121. <div id="higher-foot">
  122.  
  123.  
  124. <div id="calendar">
  125. <table id="wp-calendar" summary="Calendar">
  126. 	<caption>May 2010</caption>
  127. 	<thead>
  128.  
  129. 	<tr>
  130. 		<th abbr="Monday" scope="col" title="Monday">M</th>
  131. 		<th abbr="Tuesday" scope="col" title="Tuesday">T</th>
  132. 		<th abbr="Wednesday" scope="col" title="Wednesday">W</th>
  133. 		<th abbr="Thursday" scope="col" title="Thursday">T</th>
  134. 		<th abbr="Friday" scope="col" title="Friday">F</th>
  135.  
  136. 		<th abbr="Saturday" scope="col" title="Saturday">S</th>
  137. 		<th abbr="Sunday" scope="col" title="Sunday">S</th>
  138. 	</tr>
  139. 	</thead>
  140.  
  141. 	<tfoot>
  142. 	<tr>
  143. 		<td abbr="September" colspan="3" id="prev"><a href="http://?m=200809" title="View posts for September 2008">&laquo; Sep</a></td>
  144.  
  145. 		<td class="pad">&nbsp;</td>
  146. 		<td colspan="3" id="next" class="pad">&nbsp;</td>
  147. 	</tr>
  148. 	</tfoot>
  149.  
  150. 	<tbody>
  151. 	<tr>
  152. 		<td colspan="5" class="pad">&nbsp;</td><td>1</td><td>2</td>
  153.  
  154. 	</tr>
  155. 	<tr>
  156. 		<td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td>
  157. 	</tr>
  158. 	<tr>
  159.  
  160. 		<td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td>
  161. 	</tr>
  162. 	<tr>
  163. 		<td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td>
  164.  
  165. 	</tr>
  166. 	<tr>
  167. 		<td id="today">24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td>
  168. 	</tr>
  169. 	<tr>
  170.  
  171. 		<td>31</td>
  172. 		<td class="pad" colspan="6">&nbsp;</td>
  173. 	</tr>
  174. 	</tbody>
  175. 	</table></br></br></br></br></br></br></br></br></br></br></br></div><!--calendar ends-->
  176.  
  177.  
  178.  
  179.  
  180. <div id="meta">
  181. <h2>Meta</h2>
  182.  
  183. <ul>
  184. <li><a href="http://wp-admin/">Site Admin</a></li>					<li><a href="http://wp-login.php?action=logout&amp;_wpnonce=79c65bddfe">Log out</a></li>
  185. 					<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
  186. 					<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
  187. 					<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
  188. </ul>
  189.  
  190.  </div> <!--meta ends-->
  191.  
  192.  
  193.  
  194. <div id="blogroll">
  195. <li id="linkcat-2" class="linkcat"><h2>Blogroll</h2>
  196. 	<ul class='xoxo blogroll'>
  197. <div class="links"><li><a href="">link</a></li></div>
  198. <div class="links"><li><a href="">link</a></li></div>
  199. <div class="links"><li><a href="">link</a></li></div>
  200. <div class="links"><li><a href="">link</a></li></div>
  201. <div class="links"><li><a href="">link</a></li></div>
  202. <div class="links"><li><a href="">link</a></li></div>
  203. <div class="links"><li><a href="">link</a></li></div>
  204. <div class="links"><li><a href="">link</a></li></div>
  205. <div class="links"><li><a href="">link</a></li></div>
  206. <div class="links"><li><a href="">link</a></li></div>
  207. <div class="links"><li><a href="">link</a></li></div>
  208. <div class="links"><li><a href="">link</a></li></div>
  209.  
  210. 	</ul>
  211. </li>
  212. </div>
  213.  
  214.  
  215. <div id="recent">
  216.  
  217. <h2>Recent posts</h2>
  218. <ul>	<li><a href='http://?p=188' title='Post'>Post</a></li>
  219. 	<li><a href='http://?p=185' title='Post'>Post</a></li>
  220.  
  221. 	<li><a href='http://?p=171'>Post</a></li>
  222. 	<li><a href='http://?p=170'>Post</a></li>
  223. 	<li><a href='http://?p=171'>Post</a></li>
  224. 	<li><a href='http://?p=170'>Post</a></li>
  225. 	<li><a href='http://?p=171'>Post</a></li>
  226. 	<li><a href='http://?p=170'>Post</a></li>
  227. 		<li><a href='http://?p=171'>Post</a></li>
  228. 	<li><a href='http://?p=170'>Post</a></li>
  229. 		<li><a href='http://?p=171'>Post</a></li>
  230. 	<li><a href='http://?p=170'>Post</a></li>
  231. 		<li><a href='http://?p=171'>Post</a></li>
  232. 	<li><a href='http://?p=170'>Post</a></li>
  233. 		<li><a href='http://?p=171'>Post</a></li>
  234. 	<li><a href='http://?p=170'>Post</a></li>
  235. 		<li><a href='http://?p=171'>Post</a></li>
  236. 	<li><a href='http://?p=170'>Post</a></li>
  237. 		<li><a href='http://?p=171'>Post</a></li>
  238. 	<li><a href='http://?p=170'>Post</a></li>
  239. 		<li><a href='http://?p=171'>Post</a></li>
  240. 	<li><a href='http://?p=170'>Post</a></li>
  241. </ul>
  242. </div>
  243.  
  244.  
  245. </div><!--higher-foots ends-->
  246. <div class="clear">
  247. </div>
  248.  
  249. <div id="footer">
  250.  
  251. Powered by WordPress
  252.  
  253. </div><!--footer ends-->
  254. </div><!--xfoot ends-->
[HTML] pobierz, plaintext

qrzysztof
24.05.2010, 13:44:13
#recent ma ustawione height "na sztywno" 250px. A jako, że nie ma overflow ustawionego (pozostaje domyślne overflow: visible) to tekst wylewa się poza diva.

Zmiana na min-height=250px rozwiązuje problem (testowane w firefoxie).

To samo trzeba zrobić z innymi kolumnami, które mogą być dłuższe niż to mają określone (jeśli mają się rozszerzać na wysokość).
krzysztof_kf
24.05.2010, 13:48:33
dodaj do ?

[CSS] pobierz, plaintext 
  1. #higher-foot {
  2. overflow: hidden;
  3. height: 100%;
[CSS] pobierz, plaintext
guilty82
24.05.2010, 13:50:22 
[CSS] pobierz, plaintext 
  1. #recent {
  2.  height: 250px; /* wywal to */
  3. }
[CSS] pobierz, plaintext


ogolnie mocno zabalaganiony kod w/g mnie
AboutMe
24.05.2010, 13:54:37
Echhh, faktycznie nie zauważyłem tego height, dzięki za pomoc
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.