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

[modmix]

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

 

[vitmar]

Недавно делал похожее.
Задача была сделать верстку из трех колонок (left, main, right) и потом в зависимости от того, есть ли содержимое в колонках left и right, изменять ширину основной колонки. В общем, смысл задачи совпадает с вашим.
Начну с того, что для верстки я использовал CSS-фреймворк Twitter Bootstrap

Twitter Bootstrap - это набор инструментов от Twitter (относится к классу инструментов: CSS-фреймворк), созданный для облегчения разработки Web приложений и сайтов. Он включает CSS и 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>

Старался писать подробно, но если остались вопросы, то задавайте.

 

[modmix]

Я думал про фреймворки, но шаблон почти готов и перелопачивать все заново как то не есть гуд. А к готовому шаблону можно прикручивать фреймворк из за одного блока?

 

[vitmar]

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

 

[sergik74]

Я думал про фреймворки, но шаблон почти готов и перелопачивать все заново как то не есть гуд. А к готовому шаблону можно прикручивать фреймворк из за одного блока?

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

 

[Ведун]

modmix, открой стандартный шаблон, который там идет в комплекте и посмотри реализацию. Во многом помогает разобраться...