Как с CSS получить нужную верстку DIV-ами

Тема в разделе "Другие языки", создана пользователем t0wer, 8 июн 2012.

Статус темы:
Закрыта.
Модераторы: Цукер
  1. t0wer

    t0wer BlackHerald

    Регистр.:
    24 июн 2008
    Сообщения:
    733
    Симпатии:
    423
    Верстаю в быстром темпе сайт. Встал на одной загвоздке так, что не могу никуда съехать.
    Нужна помощь...

    Суть вот в чем:
    - имеем три блока вывода колонок DIV-ами на главной странице
    (это рис. 001)
    001.jpg
    Нужно получить при нажатии кнопки в меню переход на второстепенную страницу в которой левый и правый блоки не выводятся, а центральный растягивается влево и вправо на всю длину.
    (это рис. 002)
    002.jpg
    Общая длина блока (в которых находятся 3 колонки) - 1000 px
    левый блок - 200 px
    центральный блок - 600 px
    правый блок - 200 px
     
  2. Hi-tech

    Hi-tech Создатель

    Регистр.:
    4 авг 2009
    Сообщения:
    39
    Симпатии:
    8
    для центрального блока
    Код:
    width:1000px;
    margin:0 auto;
    для левого и правого
    Код:
    display:none;
     
  3. dandandan

    dandandan

    Регистр.:
    7 авг 2008
    Сообщения:
    989
    Симпатии:
    267
    Удаляем боковые блоки ручками из html или если не хотите удалять, то пишем display:none;
    Для среднего блока задаем ширину в 1000 px
     
    t0wer нравится это.
  4. t0wer

    t0wer BlackHerald

    Регистр.:
    24 июн 2008
    Сообщения:
    733
    Симпатии:
    423
    в вашем варианте тогда не выводится на главной два блока (левый и правый)
    темплейт
    Код:
     <div id="container">
     
        <div id="lbnew">$block_left</div>
        <div id="mcnew">$message $block_center $modules $block_down</div>
        <div id="rbnew">$block_right</div>
     
    </div>
    
    css
    Код:
    #container {
        width: 1001px;
    }
    #lbnew {
        display: none;
    }
    #mcnew {
        width: 1000px;
        margin: 0 auto;
    }
    #rbnew {
        display: none;
    }
    
    Чтобы понять что и как...
    верстаю для этой - kasseler-cms
    нужно для отображения форума описать блоки

    вот главная Перейти по ссылке
    вот второстепенная Перейти по ссылке

    Вот главная страница
    Код:
    <div id="container">
    <div id="lbnew">$block_left</div>
    <div id="mcnew">$message $block_center $modules $block_down</div>
    <div id="rbnew">$block_right</div>
    </div>
    Вот второстепенная страница
    Код:
    <div id="container">
    <div id="mcnew">$message $block_center $modules $block_down</div>
    </div>
    Нужен CSS для корректного отображения страниц
     
  5. Hi-tech

    Hi-tech Создатель

    Регистр.:
    4 авг 2009
    Сообщения:
    39
    Симпатии:
    8
    для внутренних страниц нужно добавить новый класс mcnew2:
    Код:
    <div id="container">
    <div id="mcnew2">$message $block_center $modules $block_down</div>
    </div>
    Код:
    #container {
    width: 1001px;
    }
     
    mcnew2{
    margin:0 auto;
    }
    display:none; соответсвенно убираем, т.к. правый и левые блоки уже убраны в шаблоне
     
    t0wer нравится это.
  6. PhpEbasher

    PhpEbasher Писатель

    Регистр.:
    5 июн 2012
    Сообщения:
    5
    Симпатии:
    1
    ставишь вот так
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>

    левый float: left;
    правый float: right;
    .middle {
    overflow: hidden;
    }
     
    t0wer нравится это.
  7. PhpEbasher

    PhpEbasher Писатель

    Регистр.:
    5 июн 2012
    Сообщения:
    5
    Симпатии:
    1
    ширину у флоатов не забудь тока и у контейнера тоже ширина должна быть. Порядок важен!
     
  8. t0wer

    t0wer BlackHerald

    Регистр.:
    24 июн 2008
    Сообщения:
    733
    Симпатии:
    423
    все норм, только центральный блок 600 пикс. как на главной, так и на форуме.
    вот что получается:
    главная list001.jpg
    форум list002.jpg
     
  9. PhpEbasher

    PhpEbasher Писатель

    Регистр.:
    5 июн 2012
    Сообщения:
    5
    Симпатии:
    1
    зашел на сайт, там все таблицами сверстано. Для таблиц нет такой проблемы
     
  10. t0wer

    t0wer BlackHerald

    Регистр.:
    24 июн 2008
    Сообщения:
    733
    Симпатии:
    423
    вопрос решен дивами) да, с таблицами нет такого гемороя) но кто ищет легких путей ;)
    еще раз всем спасибо, вопрос закрыт!
     
Статус темы:
Закрыта.