За последние 24 часа нас посетили 17530 программистов и 1597 роботов. Сейчас ищет 1961 программист ...

Опять про высоту..

Тема в разделе "HTML и CSS", создана пользователем Demon, 14 июн 2007.

  1. Demon

    Demon Активный пользователь

    С нами с:
    20 апр 2006
    Сообщения:
    239
    Симпатии:
    0
    Всем привет.
    Есть код. Никак не могу заставить ИЕ отображать блок с меню на всю длинну страницы.. Раз получилось, но вариант не подошел, т.к при добавлении новостей блок меню растягивался не на всю высоту страницы, а только видимую часть окна. Помогите плиз..
    HTML:
    1.  
    2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
    3.  
    6. <title>Untitled</title>
    7. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    8. <style type="text/css">
    9. <!--
    10. html, body {
    11. height: 100%;
    12. }
    13. #main {
    14. border: 1px solid red;
    15. overflow: hidden;
    16. border-right: 1px solid #DAF2FB;
    17. border-left: 1px solid #DAF2FB;
    18. width: 800px;
    19. margin: 0 auto;
    20. background-color: #F9F9F9;
    21. }
    22. #header {
    23. margin: 0 auto;
    24. height: 203px;
    25. width: 800px;
    26. background: silver url('img/logo.jpg') no-repeat;
    27. }
    28. #head-menu {
    29. margin: 0 auto;
    30. width: 802px;
    31. background-color: #02B9FF;
    32. -moz-border-radius-topleft: 50%;
    33. -moz-border-radius-topright: 50%;
    34. }
    35. #menu {
    36. background-color: white;
    37. width: 150px;
    38. height: 100%;
    39. float: left;
    40. font-size: 10px;
    41. font-family: "Verdana";
    42. }
    43. #content {
    44. width: 648px;
    45. float: left;
    46. font-size: 10px;
    47. font-family: "Verdana";
    48. }
    49. #menu ul {
    50. padding-bottom: 100%;
    51. margin: 0;
    52. padding: 0;
    53. padding-left: 25px;
    54. padding-top: 5px;
    55. }
    56. #menu ul li {
    57. text-indent: 9px;
    58. height: 17px;
    59. list-style-type: none;
    60. background: url('img/dot.jpg') no-repeat left center;
    61. }
    62. #menu ul li a {
    63. color: black;
    64. text-decoration: none;
    65. }
    66. #menu * a:hover {
    67. color: #015E81;
    68. text-decoration: none;
    69. }
    70. .rubric {
    71. color: #285262;
    72. margin-top: 3px;
    73. text-indent: 5px;
    74. font-weight: bold;
    75. }
    76. .rubric a {
    77. color: #285262;
    78. text-decoration: none;
    79. }
    80. #foother {
    81. background-color: #02B9FF;
    82. height: 17px;
    83. clear: both;
    84. width: 802px;
    85. margin: 0 auto;
    86. -moz-border-radius-bottomleft: 50%;
    87. -moz-border-radius-bottomright: 50%;
    88. }
    89. .news-header {
    90. width: 100%;
    91. margin: 0 auto;
    92. border-left: 1px solid #D8D8D8;
    93. border-bottom: 1px solid #ADAEAE;
    94. border-right: 1px solid #ADAEAE;
    95. border-top: 1px solid #D8D8D8;
    96. color: #285262;
    97. line-height: 1.5;
    98. text-indent: 4px;
    99. margin-bottom: 5px;
    100. margin-top: 10px;
    101. height: 17px;
    102. background-color: #E9E9E9;
    103. font-size: 10px;
    104. font-weight: bold;
    105. }
    106. .news {
    107. width: 95%;
    108. overflow: hidden;
    109. margin: 0 auto;
    110. background-color: #F5F4F4;
    111. }
    112. .news-links {
    113. width: 95%;
    114. height: 17px;
    115. margin: 0 auto;
    116. border-left: 1px solid #D8D8D8;
    117. border-bottom: 1px solid #ADAEAE;
    118. border-right: 1px solid #ADAEAE;
    119. border-top: 1px solid #D8D8D8;
    120. background-color: #E9E9E9;
    121. }
    122. -->
    124.  
    125. </head>
    127. <div id="header">&nbsp;</div>
    128. <div id="head-menu">&nbsp;</div>
    129. <div id="main">
    130. <div id="menu">
    131. <div class="rubric">Рубрики</div>
    132. <ul>
    133. <li><a href="">Горячие новости</a></li>
    134. <li><a href="">Право          </a></li>
    135. <li><a href="">Общество       </a></li>
    136. <li><a href="">Власть         </a></li>
    137. <li><a href="">Город и область</a></li>
    138. <li><a href="">Транспорт      </a></li>
    139. <li><a href="">Медицина       </a></li>
    140. <li><a href="">Спорт          </a></li>
    141. </ul>
    142. <div class="rubric"><a href="">Интервью   </a></div>
    143. <div class="rubric"><a href="">Проишествие</a></div>
    144. </div>
    145. <div id="content">
    146.  
    147. <div class="news">
    148. <div class="news-header">Новость дня!</div>
    149. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    150. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    151. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    152. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    153. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    154. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    155. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    156. <br />
    157. <a href="">Подробнее..</a>
    158. <br />
    159. <br />
    160. </div>
    161. <div class="news-links">Добавил: Demon  Дата: 19.06.07.</div>
    162.  
    163. </div>
    164. </div>
    165. <div id="foother">&nbsp;df</div>
    166. </body>
    167. </html>
    168.  
    169.  
     
    #1 Demon, 14 июн 2007
  2. Caman

    Caman Активный пользователь

    С нами с:
    16 май 2007
    Сообщения:
    46
    Симпатии:
    0
    #main{height: 100%;}
     
    #2 Caman, 15 июн 2007
  3. Demon

    Demon Активный пользователь

    С нами с:
    20 апр 2006
    Сообщения:
    239
    Симпатии:
    0
    Пробовал - если указать у мэйн высоту, и не убрать ovewflow, то содержимое обрезается, если убрать - меню и контент не растягиваются по высоте.
     
    #3 Demon, 15 июн 2007
  4. Caman

    Caman Активный пользователь

    С нами с:
    16 май 2007
    Сообщения:
    46
    Симпатии:
    0
    Я конечно не знаю почему именно такой простой диз. на слоях сделан, но если в табличный вид переделать, то кода гораздо меньше будет и намного проще.
     
    #4 Caman, 15 июн 2007
  5. Demon

    Demon Активный пользователь

    С нами с:
    20 апр 2006
    Сообщения:
    239
    Симпатии:
    0
    Это понятно, но хочу сделать именно на дивах (привык уже, хоть и больший геммор при верстке). Без хаков не обойтись?
     
    #5 Demon, 15 июн 2007
  6. Caman

    Caman Активный пользователь

    С нами с:
    16 май 2007
    Сообщения:
    46
    Симпатии:
    0
    HTML:
    2.  <head>
    3.  <title>Untitled</title>
    4.  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    5. </head>
    7. <body topmargin=10>
    8. <table border=1 align=center height=100%>
    9. <tr><td colspan=2 width=800 height=250>
    10. тут шапка
    11. </td></tr>
    12. <tr>
    13. <td width=200>тут меню</td>
    14. <td width=600>тут новости</td>
    15. </tr>
    16. <tr><td colspan=2 height=25>
    17. &copy;
    18. </td></tr>
    20.  </body>
    21.  </html>
    А потом стили подгони и будет класс... гемора меньше...
     
    #6 Caman, 15 июн 2007
  7. Demon

    Demon Активный пользователь

    С нами с:
    20 апр 2006
    Сообщения:
    239
    Симпатии:
    0
    Ну а все-таки? Как можно побороть этот глюк?
     
    #7 Demon, 15 июн 2007
(Вы должны войти или зарегистрироваться, чтобы разместить сообщение.)