Joomla 1.5 Резиновый сайт на Div

Тема в разделе "CSS, HTML, Web 2.0, верстка по web-стандартам", создана пользователем najdera, 05.01.2011.

  1. najdera
    Offline

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

    Регистрация:
    26.07.2010
    Сообщения:
    48
    Симпатии:
    0
    Пол:
    Женский
    Делаю сайт, нужно чтобы он тянулся в высоту при изменении главного контента.

    Применила следующую конструкцию

    Код (PHP):
    1. <div class="seredina_1">
    2.              <div class="seredina_2">
    3.                   <div id="knopka1">
    4.                    <?php if ($this->countModules('knopka1')): ?>
    5.                    <jdoc:include type="modules" name="knopka1"  style="knopka1"  />
    6.                    <?php endif; ?>
    7.                   </div>
    8.                   <div id="knopka2">
    9.                    <?php if ($this->countModules('knopka2')): ?>
    10.                    <jdoc:include type="modules" name="knopka2"  style="knopka2"  />
    11.                    <?php endif; ?>
    12.                   </div>
    13.                   <div id="knopka3">
    14.                    <?php if ($this->countModules('knopka3')): ?>
    15.                    <jdoc:include type="modules" name="knopka3"  style="knopka3"  />
    16.                    <?php endif; ?>
    17.                   </div>
    18.                   <div id="knopka4">
    19.                    <?php if ($this->countModules('knopka4')): ?>
    20.                    <jdoc:include type="modules" name="knopka4"  style="knopka4"  />
    21.                    <?php endif; ?>
    22.                   </div>
    23.                   <div id="knopka5">
    24.                    <?php if ($this->countModules('knopka5')): ?>
    25.                    <jdoc:include type="modules" name="knopka5"  style="knopka5"  />
    26.                    <?php endif; ?>
    27.                   </div>
    28.                   <div id="knopka6">
    29.                    <?php if ($this->countModules('knopka6')): ?>
    30.                    <jdoc:include type="modules" name="knopka6"  style="knopka6"  />
    31.                    <?php endif; ?>
    32.                   </div>
    33.                   <div id="knopka7">
    34.                    <?php if ($this->countModules('knopka7')): ?>
    35.                    <jdoc:include type="modules" name="knopka7"  style="knopka7"  />
    36.                    <?php endif; ?>
    37.                   </div>
    38.                  <div class="seredina_3">
    39.                       <jdoc:include type="component" />
    40.                  </div>
    41.              </div>
    42.          </div>


    На много элементов меню не смотрите, это специфика

    Код стилей следующий

    .seredina_1{
    background:url(images/belij_fon.gif);
    position:relative;
    float:left;}
    .seredina_2{
    left:15px;
    position:relative;
    width:228px;
    float:left;
    background:url(images/zelenij_fon.gif);}
    .seredina_3{
    float:left;
    left:228px;
    position:relative;
    background:url(images/belij_fon.gif);
    width:781px;}


    Только вот получается странно. Блок основного контента съезжает под кнопки. Как в приложенной картинке. Не знаю что делать. Укажите ошибку... :hz:
     

    Вложения:

  2.  
  3. Offline

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

    Регистрация:
    17.09.2010
    Сообщения:
    11
    Симпатии:
    0
    Пол:
    Мужской
    попробуй в .seredina_3 применить
    position:adsolute;
    и float:right;
    у тебя все равно 2 колонки
     
  4. najdera
    Offline

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

    Регистрация:
    26.07.2010
    Сообщения:
    48
    Симпатии:
    0
    Пол:
    Женский
    Разобралась, попробовала переделать всю структуру. Оказалось была проблема в размере столбца.
    Вышло следующим образом.
    Код (PHP):
    1. <div class="seredina_1">
    2.              <div class="seredina_2">
    3.                  <div class="knopki">
    4.                       <div id="knopka1">
    5.                        <?php if ($this->countModules('knopka1')): ?>
    6.                        <jdoc:include type="modules" name="knopka1"  style="knopka1"  />
    7.                        <?php endif; ?>
    8.                       </div>
    9.                       <div id="knopka2">
    10.                        <?php if ($this->countModules('knopka2')): ?>
    11.                        <jdoc:include type="modules" name="knopka2"  style="knopka2"  />
    12.                        <?php endif; ?>
    13.                       </div>
    14.                       <div id="knopka3">
    15.                        <?php if ($this->countModules('knopka3')): ?>
    16.                        <jdoc:include type="modules" name="knopka3"  style="knopka3"  />
    17.                        <?php endif; ?>
    18.                       </div>
    19.                       <div id="knopka4">
    20.                        <?php if ($this->countModules('knopka4')): ?>
    21.                        <jdoc:include type="modules" name="knopka4"  style="knopka4"  />
    22.                        <?php endif; ?>
    23.                       </div>
    24.                       <div id="knopka5">
    25.                        <?php if ($this->countModules('knopka5')): ?>
    26.                        <jdoc:include type="modules" name="knopka5"  style="knopka5"  />
    27.                        <?php endif; ?>
    28.                       </div>
    29.                       <div id="knopka6">
    30.                        <?php if ($this->countModules('knopka6')): ?>
    31.                        <jdoc:include type="modules" name="knopka6"  style="knopka6"  />
    32.                        <?php endif; ?>
    33.                       </div>
    34.                       <div id="knopka7">
    35.                        <?php if ($this->countModules('knopka7')): ?>
    36.                        <jdoc:include type="modules" name="knopka7"  style="knopka7"  />
    37.                        <?php endif; ?>
    38.                       </div>
    39.                  </div>
    40.                  <div class="seredina_3">
    41.                       <jdoc:include type="component" />
    42.                  </div>
    43.              </div>
    44.          </div>


    А стили следующие

    /*Верх
    -------------------------------------------------------------------*/
    .verh_1{
    width:15px;
    float:left;}
    .verh1_1{
    height:11px;
    background:url(images/belij_fon.gif);}
    .verh1_2{
    height:17px;
    background:url(images/uzor.gif);}
    .verh1_3{
    height:200px;
    background:url(images/header_right.jpg);}
    .verh1_4{
    height:17px;
    background:url(images/uzor.gif);}
    .verh_2{
    width:228px;
    float:left;
    background:url(images/zelenij_fon.gif);}
    .verh2_1{
    height:11px;}
    .verh2_2{
    height:234px;}
    .logo_img{
    top:50%;
    margin-top:60px;}
    .verh_3{
    width:781px;
    float:left;}
    .verh3_1{
    height:11px;
    background:url(images/belij_fon.gif);}
    .verh3_2{
    height:17px;
    background:url(images/uzor.gif);}
    .verh3_3{
    height:200px;
    background:url(images/header.jpg);}
    .verh3_4{
    height:17px;
    background:url(images/uzor.gif);}
    /*Середина
    -------------------------------------------------------------------*/
    .seredina_1{
    background:url(images/belij_fon.gif);
    position:relative;
    width:15px;
    float:left;}
    .seredina_2{
    position:relative;
    width:1009px;
    left:15px;
    float:left;
    background:url(images/zelenij_fon.gif);}
    .knopki{
    position:relative;
    width:228px;
    float:left;
    background:url(images/zelenij_fon.gif);}
    .seredina_3{
    float:left;
    position:relative;
    background:url(images/belij_fon.gif);
    min-height:994px;
    width:781px;}
    /*Низ
    -------------------------------------------------------------------*/
    .niz{
    height:117px;
    float:left;}
    .niz_1{
    width:15px;
    float:left;}
    .niz1_1{
    height:17px;
    background:url(images/uzor.gif);}
    .niz1_2{
    height:100px;
    background:url(images/belij_fon.gif);}
    .niz_2{
    width:228px;
    height:117px;
    vertical-align:middle;
    position:relative;
    background:url(images/zelenij_fon.gif);
    float:left;}
    .niz_2 span{
    display:block;
    position:absolute;
    top:50%;
    left:0%;
    width:100%;}
    .niz_2 span span{
    position:relative;
    top:-50%;}
    .niz_3{
    width:781px;
    float:left;}
    .niz3_1{
    height:17px;
    background:url(images/uzor.gif);}
    .niz3_2{
    height:100px;
    background:url(images/belij_fon.gif);}
     

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

Загрузка...