73 / 65 / 25
Регистрация: 13.02.2013
Сообщений: 428
Записей в блоге: 1
1

Макет в 3 колонки дивами. Резина центральной колонки

30.03.2014, 19:30. Показов 2241. Ответов 4
Метки нет (Все метки)

Подскажите. Нужен стандартный, в принципе, трёхколоночный макет для Jooml'ы. Посередине - основной текст, справа и слева - модули (всякие менюшки, формы входа и т.д.). Задача состоит в том, чтобы:
  1. Когда были включены все три колонки - крайние имели ширину по 20%.
  2. При отключении одной или обеих колонок, центральная занимала весь объём страницы.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div>
 
<div class="left"> 
Левая колонка
</div>
<div class="center">
Центр. Основной текст
</div>
 
<div class="right">
Правая колонка.
</div>
<div style="clear: both;"></div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.left, .right {
max-width: 20%;
float: left;
}
 
.left {
margin: 5px 35px 5px 5px ;
}
 
.right {
margin: 5px 5px 5px 35px;
}
 
.center {
float: left;
width: ????;
}
Опытным путём установил, что всё упирается в width центрального div'а. Если указывать 100% - то не работает float. Если указать меньший размер, то остаётся пустое пространство при выключении правой или левой колонки. Если auto, то оно воспринимается как 100% и обтекание опять-таки не работает. Получается сверху колонка шириной 20%, потом 100% центральная и под ней ещё одна 20%-я.

Есть мысль попробовать таблицей сделать, но div'ами хотелось бы...

Добавлено через 17 минут
Удалось добиться этой задачи с помощью тегов таблицы. Но, может кто подскажет с дивами? Я роюсь в display...
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
30.03.2014, 19:30
Ответы с готовыми решениями:

Колонки в категории
Заранее прошу прощение за дилентанство. Не могу решить простую задачу. Надо в пункте меню...

Материал в 2 колонки
Народ не могу понять как разбить материал на 2 колонки. А точнее мне нужно отобразить один материал...

Список категорий раздела в 2 колонки
Как сделать так, чтобы категории раздела отображались в 2 колонки, а не в 1?

Блог категории не переставляеться в 2 или 3 колонки
Доброго времени суток. Мною был взят шаблон удачно установлен и используется. Проблема в том то...

4
327 / 217 / 97
Регистрация: 04.11.2012
Сообщений: 638
30.03.2014, 19:50 2
MusStudent, если я вас правильно понял, то можно например вот так:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="wrapper">
        <div id="left" hidden> 
            Левая колонка
        </div>
        <div id="center">
            Центр. Основной текст
        </div>
         
        <div id="right" hidden>
            Правая колонка.
        </div>
        <div style="clear: both;"></div>
    </div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#wrapper {
    width: 960px; /*для примера*/
    background: #ccc; /*для примера*/
}
 
#left,
#right {
    width: 20%;
    float: left;
    background: #098; /*для примера*/
}
 
#center {
    float: left;
    width: 60%;
}
Javascript
1
2
3
4
5
6
7
8
9
var left = document.getElementById("left")
var center = document.getElementById("center")
var right = document.getElementById("right")
 
if (left.hidden && right.hidden) {
    center.style.width = "100%"
}  else if(left.hidden || right.hidden) {
    center.style.width = "80%"
}
0
73 / 65 / 25
Регистрация: 13.02.2013
Сообщений: 428
Записей в блоге: 1
30.03.2014, 19:54  [ТС] 3
В джумле немного по-другому. Если в позиции включён модуль, то пишется код. Если модуль в админке выключен, то не отображается и весь код (аналогично hidden).

PHP
1
2
3
4
5
<?php if ($this->countModules('left')): ?>
            <div class="leftcolumn">
                <jdoc:include type="modules" name="left" style="xhtml"/>
            </div>
    <?php endif; ?>
+ я хотел бы обойтись без яваскрипта. Ибо (вдруг такое случается в XXI веке) вдруг он у кого-то отключен.

В таблице всё работает.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table>
<tr>
<?php if ($this->countModules('left')): ?>
            <td class="leftcolumn">
                <jdoc:include type="modules" name="left" style="xhtml"/>
            </td>
    <?php endif; ?>
 
<td>
<p>Основной текст</p>
</td>
 
 
<?php if ($this->countModules('left')): ?>
            <td class="rightcolumn">
                <jdoc:include type="modules" name="right" style="xhtml"/>
            </td>
    <?php endif; ?>
При наличии включённого модуля в позиции отображается <td> </td> и всё прекрасно равняется. Если модуль выключен слева или справа, то генерируется html-код двух-<td>'шной таблицы. Центральный <td> заполняет всё пространство.

Но, вёрстка таблицами кажется устарела. Сам уже верстаю дивами давно. Но тут не удаётся пока найти работающее решение.
0
29 / 29 / 9
Регистрация: 03.03.2014
Сообщений: 58
31.03.2014, 01:46 4
Реализация без JS: Клац
HTML5
1
2
3
4
5
<main>
    <section class="left">Left</section>
    <section class="right">Right</section>
    <section class="center">Center</section>
</main>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.left,
.right {
    width: 20%;
    background: #ccc;
}
.left {
    float: left;
}
.right {
    float: right;
}
.center {
    width: 100%;
    background: #f0f0f0;
}
.left + .center {
    width: 80%;
    margin: 0 0 0 20%;
}
.right + .center {
    width: 80%;
    margin: 0 20% 0 0;
}
.left + .right + .center {
    width: 60%;
    margin: 0 20%;
}
Суть:
Определяем ширину центральной колонки исходя из наличия соседних селекторов.
Один минус: .center всегда внизу - роли не играет.
 Комментарий модератора 
Код должен присутствовать в тексте сообщения. Песочницы — это лишь бонус для демонстрации.
0
Администратор
11990 / 5321 / 266
Регистрация: 05.04.2011
Сообщений: 14,087
Записей в блоге: 2
31.03.2014, 17:25 5
MusStudent, присвоение класса для центрального блока на уровне шаблона
PHP
1
2
3
4
5
6
7
8
<section class="<?php 
 if($this->countModules('left') && $this->countModules('right')) echo 'min';
 if($this->countModules('left') xor $this->countModules('right')) echo 'middle';
 if(!$this->countModules('left') && !$this->countModules('right')) echo 'max';
 ?>">
 <jdoc:include type="message" />
 <jdoc:include type="component" />
</section>
Ну и, соответственно, в css прописываете ширину для каждого класса
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
section.min, section.max, section.middle {
float:left;
}
section.min {
width: 56%;
padding:2%;
}
section.middle {
width: 76%;
padding:30px 2%;
}
section.max {
width: 98%;
padding:2%;
}
Если у Вас не HTML5 - вместо section пропишите div
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
31.03.2014, 17:25

Как выложить статью в Джумле 2,5 в 2 колонки?
Никак не получается выложить статью в Джумле 2,5 в 2 колонки. Выставила нужные параметры в...

Вывод в админке доп. колонки com_k2 ?
Привет всем, помогите мне пжл. решить следующую задачку. Есть Joomla 1.6, в ней установлен...

Как в joomla 3 разделить подпункты меню на две колонки?
Нужно из варианта 1 (см рис. 1) сделать вариант 2 (см. рис. 2). Спасибо.

Вывод материала joomla в 2 колонки через CSS файл шаблона
Доброго времени суток! Необходимо вывести новости сайта в две колонки, установлен не стандартный...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru