Помощь в верстке

Тема в разделе "Верстка", создана пользователем modmix, 8 май 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. modmix

    modmix Постоялец

    Регистр.:
    19 мар 2009
    Сообщения:
    140
    Симпатии:
    20
    Никак гуглу не могу правильно сформулировать вопрос. Поэтому прошу помочь.
    Верстать только учусь, поэтому как то туговато доходит. Шаблон будет использоваться на движке Joomla. Собственно о помощи...
    Как правильно сверстать блок, что бы в нем отображалось содержимое по условию - включены все блоки (выведены модули joomla), предположим 4 блока, блоки все одной ширины, выключаем блок (снимаем с публикации модуль) - остаются 3 блока левый и правый остаются размером как и раньше, а средний блок растягивается на оставшуюся ширину, отключаем еще один блок (левый или правый) средний блок растягивается на оставшуюся ширину, а включенный блок остается с заданной ранее шириной или оба блока становятся одинаковой ширины, при этом во всех случаях высота всех блоков одинаковая, то есть независимо от содержимого высота задается по наибольшему и растягивает оформление.
    Можете помочь? Хотя бы понять как это работает. Или тыкните носом где прочитать (общие статьи по верстке не помогают, интересует именно описанный пример).
     
  2. vitmar

    vitmar Постоялец

    Регистр.:
    27 апр 2012
    Сообщения:
    84
    Симпатии:
    40
    Недавно делал похожее.
    Задача была сделать верстку из трех колонок (left, main, right) и потом в зависимости от того, есть ли содержимое в колонках left и right, изменять ширину основной колонки. В общем, смысл задачи совпадает с вашим.
    Начну с того, что для верстки я использовал CSS-фреймворк Twitter Bootstrap
    Использовал сетку именно из этого фреймворка. Вот ссылка непосредственно на описание сетки:
    http://twitter.github.com/bootstrap/scaffolding.html
    А вот сама разметка, которая у меня получилась:
    Код:
    <div class="container-fluid">
        <div class="row-fluid">
    
            <!-- Left column -->
            <!-- Если в позиции left есть модули, то выводим эту позицию -->
            <?php if ($this->countModules('left')) : ?>
            <div id="left-col" class="span3">
                <jdoc:include type="modules" name="left" style="header" />
            </div>
            <?php endif;?>
    
            <!-- Main column -->
            <!-- А вот тут делаем те же проверки на наличие модулей в позициях
            и выводим блок maincont-col необходимой ширины -->
            <?php if ($this->countModules('left') && $this->countModules('right')) : ?>
            <div id="maincont-col" class="span6">
            <?php elseif ($this->countModules('left') || $this->countModules('right')) : ?>
            <div id="maincont-col" class="span9">
            <?php else : ?>
            <div id="maincont-col" class="span12"><?php endif;?>
                <div class="component content">
                    <jdoc:include type="modules" name="pre_component" />
                    <jdoc:include type="component" />
                    <jdoc:include type="modules" name="post_component" />
                </div>
            </div>
    
            <!-- Right column -->
            <!-- Если в позиции right есть модули, то выводим эту позицию -->
            <?php if ($this->countModules('right')) : ?>
            <div id="right-col" class="span3">
                <jdoc:include type="modules" name="right" style="header" />
            </div>
            <?php endif;?>
    
        </div>
    </div>
    
    Старался писать подробно, но если остались вопросы, то задавайте.
     
  3. modmix

    modmix Постоялец

    Регистр.:
    19 мар 2009
    Сообщения:
    140
    Симпатии:
    20
    Я думал про фреймворки, но шаблон почти готов и перелопачивать все заново как то не есть гуд. А к готовому шаблону можно прикручивать фреймворк из за одного блока?
     
  4. vitmar

    vitmar Постоялец

    Регистр.:
    27 апр 2012
    Сообщения:
    84
    Симпатии:
    40
    Нет. Если только из-за одного блока, то прикручивать не стоит. Дело то совсем не в фреймворке. Я на него сослался для того, чтобы вы могли посмотреть на сайте как там сетка организована, и чтобы понятно было, как у меня блоки изменяют размер.
    А так, вы без проблем можете сделать так же как и у меня без фреймворка, только прописать стили блоков, которые у меня идут под классами: span3 - span12 (размеры этих блоков у меня в %, но можно и px делать).
     
  5. sergik74

    sergik74

    Регистр.:
    19 апр 2007
    Сообщения:
    295
    Симпатии:
    68
    Он тебе наглядно показывает то конструкция с условием php if включает-отключает див с модулями
    <?php if ($this->countModules('right')) : ?>
    <div id="right-col" class="span3">
    <jdoc:include type="modules" name="right" style="header" />
    </div>
    <?php endif;?>

    соответственно - заверни свои дивы в подобную обертку с условиями и получится то, то тебе надо.
     
  6. Ведун

    Ведун Постоялец

    Регистр.:
    21 авг 2008
    Сообщения:
    65
    Симпатии:
    33
    modmix, открой стандартный шаблон, который там идет в комплекте и посмотри реализацию. Во многом помогает разобраться...