Резиновый градиент как фон сайта

Тема в разделе "Создание шаблона", создана пользователем Laon, 19.10.2009.

  1. Offline

    Laon Недавно здесь

    Регистрация:
    19.10.2009
    Сообщения:
    5
    Симпатии:
    0
    Пол:
    Мужской
    Div или Table?
    Если делать в таблице: 3 строки, 1-я заданной высоты, 2-я растягивается (в зависимости от разрешения), 3-я заданной высоты. Но тут возникает проблема с DOCTYPE. А именно - какой выбрать?

    В общем что я пытаюсь сделать: простенький шаблон для визитки, по центру табличка (1024*768) с 2-мя колонками, 1-я навигация, 2-я для вывода информации.
    Подскажите как реализовать растягивание фона по вертикали если в блок вывода (MainBody) будет высотой большей чем 768?
    Вот примерный макет того что в центре...
    Особо не ругайте, первый шаблон :[
     
    Последнее редактирование модератором: 26.11.2014
  2.  
  3. Fanamura
    Offline

    Fanamura Доброта

    Регистрация:
    12.03.2007
    Сообщения:
    5 108
    Симпатии:
    159
    Пол:
    Мужской
    Laon, ставьте этот и не мучайтесь:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
  4. Offline

    Laon Недавно здесь

    Регистрация:
    19.10.2009
    Сообщения:
    5
    Симпатии:
    0
    Пол:
    Мужской
    С этим и не получается. Т.е. если в строке ничего нет то и соответственно она не заполняется тем что я прописываю в классе, который потом указываю в этой строке (пытаюсь заполнить картинкой размерами 1х1 px).
    Я думаю есть хак или хитрость в css как это реализовать...
     
    Последнее редактирование: 19.10.2009
  5. Offline

    Laon Недавно здесь

    Регистрация:
    19.10.2009
    Сообщения:
    5
    Симпатии:
    0
    Пол:
    Мужской
    Переделал на div, и серовно не могу победить(
    Подскажите плиз (если такое вообще возможно).

    Код (CODE):
    1. <?php
    2. defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
    3. $iso = split( '=', _ISO ); echo '<?xml version="1.5" encoding="'. $iso[1] .'"?' .'>';
    4. ?>
    5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    6. <html xmlns="http://www.w3.org/1999/xhtml">
    7. <head>
    8. <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
    9. <?php mosShowHead(); ?>
    10. <link href="<?php echo "$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css";?>" rel="stylesheet" type="text/css" media="all" />
    11. <link rel="shortcut icon" href="<?php echo "$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/favicon.ico"; ?>" />
    12. <!-- This so you can see the css styles in DW  you can delete file once editing Template is complete-->
    13. <link href="css/template_css.css" rel="stylesheet" type="text/css" media="all" />
    14. </head>
    15. <body>
    16. <div class="hed">1</div>
    17. <div class="bg" align="center"><div class="container">
    18.         <div id="container2">
    19.             <div id="logo"></div>
    20.             <div id="menu"><?php if($this->countModules('left')) : ?><jdoc:include type="modules" name="left"/>
    21.             <?php endif; ?></div>
    22.       </div>
    23.       <div class="main"><table cellspacing="0" cellpadding="0">
    24.           <tr>
    25.               <td width="9" height="9" id="bg1"></td>
    26.               <td id="bg2"></td>
    27.               <td width="9" id="bg3"></td>
    28.           </tr>
    29.           <tr>
    30.               <td id="bg4"></td>
    31.               <td id="bg5"><jdoc:include type="modules" name="breadcrumb" /><jdoc:include type="component" /></td>
    32.               <td id="bg6"></td>
    33.         </tr>
    34.           <tr>
    35.               <td height="10" id="bg7"></td>
    36.               <td id="bg8"></td>
    37.               <td id="bg9"></td>
    38.           </tr>
    39.           </table>
    40.     </div>
    41.   </div></div>
    42. <div class="bg2">3</div>
    43. <div class="bg3">4</div>
    44. <div class="footer">5</div>
    45. </body>
    46. </html>

    и
    Код (CODE):
    1. div#menu {
    2.     height:300px;
    3.     width: 188px;
    4.     position: static;
    5.     margin-left: 1px;
    6.     margin-top: 160px;
    7. }
    8. .main {
    9.     position: static;
    10.     height: 100%;
    11.     width: 640px;
    12.     margin-right: 0px;
    13.     margin-bottom: 0px;
    14.     margin-left: 280px;
    15.     margin-top: 10px;
    16. }
    17. .hed {
    18.     background-image: url(../images/fon_hed.gif);
    19.     background-repeat: repeat-x;
    20.     background-position: left;
    21.     height: 8px;
    22. }
    23. div#logo {
    24.     height:156px;
    25.     width: 275px;
    26.     background-image: url(../images/logo.png);
    27.     position: static;
    28.     left: auto;
    29.     float: left;
    30. }
    31. .bg {
    32.     background-image: url(../images/bg1.png);
    33.     background-repeat: repeat-x;
    34.     padding: 0px;
    35.     position: static;
    36.     height: 642px;
    37.     margin: 0px;
    38.     width: 100%;
    39. }
    40. .bg2 {
    41.     background-image: url(../images/bg2.png);
    42.     background-repeat: repeat;
    43.     position: static;
    44.     padding: 0px;
    45.     margin: 0px;
    46.     width: 100%;
    47. }
    48. .bg3 {
    49.     background-image: url(../images/bg3.png);
    50.     background-repeat: repeat-x;
    51.     height: 124px;
    52.     position: static;
    53.     margin: 0px;
    54.     padding: 0px;
    55. }
    56.  
    57. .footer {
    58.     background-image: url(../images/footer.gif);
    59.     background-repeat: repeat;
    60.     position: static;
    61.     height: inherit;
    62.     width: auto;
    63. }
    64. #bg1 {
    65.     background-image: url(../images/main_bg_01.png);
    66.     background-repeat: no-repeat;
    67. }
    68. #bg2 {
    69.     background-image: url(../images/main_bg_02.png);
    70.     background-repeat: repeat-x;
    71. }
    72. #bg3 {
    73.     background-image: url(../images/main_bg_03.png);
    74.     background-repeat: no-repeat;
    75. }
    76. #bg4 {
    77.     background-image: url(../images/main_bg_04.png);
    78.     background-repeat: repeat-y;
    79.     background-position: top;
    80. }
    81. #bg5 {
    82.     background-image: url(../images/main_bg_05.png);
    83.     background-repeat: repeat;
    84. }
    85. #bg6 {
    86.     background-image: url(../images/main_bg_06.png);
    87.     background-repeat: repeat-y;
    88.     background-position: top;
    89. }
    90. #bg7 {
    91.     background-image: url(../images/main_bg_07.png);
    92.     background-repeat: no-repeat;
    93. }
    94. #bg8 {
    95.     background-image: url(../images/main_bg_08.png);
    96.     background-repeat: repeat-x;
    97. }
    98. #bg9 {
    99.     background-image: url(../images/main_bg_09.png);
    100.     background-repeat: no-repeat;
    101. }
    102. .container {
    103.     width: 950px; /* Отступ слева */
    104.     position: relative;
    105.     margin: 0px;
    106.     padding: 0px;
    107. }
    108. #container2 {
    109.     width: 275px; /* Отступ слева */
    110.     position: relative;
    111.     margin: 0px;
    112.     padding: 0px;
    113.     height: 500px;
    114.     left: 10px;
    115.     top: 10px;
    116.     float: left;
    117. }


    Как, блок 3 (<div class="bg2">3</div>) растянуть по высоте страницы с ее увеличением.
     
  6. stranik
    Offline

    stranik специалист

    Регистрация:
    03.12.2008
    Сообщения:
    548
    Симпатии:
    36
    Пол:
    Мужской
    Попробуй min-height: 100%;
     

Поделиться этой страницей

Загрузка...