Форум русской поддержки Joomla!® CMS
08.12.2016, 20:05:44 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Как сделать резиновой центральную чать сайта?

 (Прочитано 997 раз)
0 Пользователей и 1 Гость смотрят эту тему.
genkey
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« : 30.01.2013, 15:13:14 »

Люди подскажите, пожалуйста! Есть такая ситуация: Справа и слева в колонках имеются модули с фиксированным размером. Как сделать так что бы центральная часть (там где основной материал) занимала в независимости от того какой монитор все пространство между этими колонками?
Записан
al-teen
Support Team
*****

Репутация: +221/-10
Offline Offline

Пол: Мужской
Сообщений: 2460



« Ответ #1 : 30.01.2013, 15:17:34 »

http://htmlbook.ru/samlayout/tipovye-makety/rezinovyi-trekhkolonochnyi-maket
Записан
genkey
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #2 : 01.02.2013, 10:46:11 »

Спасибо! Изучил, сделал и вроде все работает:)
Записан
genkey
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #3 : 26.05.2016, 16:45:09 »

Допер до нового способа. Может будет полезно кому нибудь. Ведь шаблонов с фиксированными левой и правой колонками и резиновой центральной в Joomla нет (ну я не встречал).
В общем надо редактировать файл index.php шаблона. А именно вставить левую, среднюю и правую колонки в таблицу с тремя колонками (левую, среднюю, и правую соответственно). Ширина всей таблицы 100%. ширина левой и правой колонок таблицы в пикселях. Средняя колонка получается растягивается на все остальное свободное место. Плюс добавляем разные стили для колонки (valign, border и т.п.).

Типа этого:

Было:
Код:
    <div id="leftcol">
        <jdoc:include type="modules" name="left" style="xhtml" />
    </div>
     <div id="centercol">
        <jdoc:include type="component" />
     <jdoc:include type="message" style="xhtml" />
      </div>
      <div id="rightcol">
        <jdoc:include type="modules" name="right" style="xhtml" />
     </div>


Стало:
Код:
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 240px;" valign="top">
    <div id="leftcol">
        <jdoc:include type="modules" name="left" style="xhtml" />
    </div>
</td>
<td valign="top">
     <div id="centercol">
        <jdoc:include type="component" />
     <jdoc:include type="message" style="xhtml" />
      </div>
</td>
<td style="width: 220px;" valign="top">
     <div id="rightcol">
        <jdoc:include type="modules" name="right" style="xhtml" />
     </div>
</td>
</tr>
</tbody>
</table>
« Последнее редактирование: 26.05.2016, 16:49:42 от genkey » Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #4 : 26.05.2016, 16:58:51 »

А зачем вы дивы в таблицу пихаете?
Делали уже дивами просто+css.
И там уже @media для устройств по надобности.
Странный подход.
Записан
genkey
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #5 : 27.05.2016, 12:48:26 »

Без таблиц есть определенные недостатки. У меня так сделано сейчас. Средняя колонка с отступами слева и справа, а левая и правая колонки с шириной равной этим отступам и с position:absolute. Все дело в этом "absolute". Из-за него высота боковых колонок не связана с высотой средней колонки. Если средняя колонка по высоте меньше боковых, то нижняя колонка (футер) наезжает на боковые колонки. Что бы этого не было нужно задавать минимальную высоту средней колонки (min-height). А определенную минимальную высоту задать сложно, т.к. боковые колонки на разных страницах имеют разную высоту.
Кроме этого средняя колонка автоматически на всю свою ширину не растягивается. Только вместе с текстом. А если текста мало или он занимает не полную строку, то средняя колонка до правой колонки не доходит и между ними получается расстояние.

С таблицами таких вопросов нет. При этом с «@media» тоже можно работать. Можно сделать так, что бы при небольшой ширине экрана колонки таблицы становились вертикально. Для этого трем колонкам таблицы <td> задаем класс, например "kolonka". И в CSS придаем этому классу  свойство display:inline.

Код:
@media screen and (max-width: 650px) {
. kolonka {
display: inline;
}
}
Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #6 : 27.05.2016, 12:53:37 »

Без таблиц есть определенные недостатки.
Их нету, если грамотно сделать для дивов CSS.
Жираф большой-ему видней.Не имею право вас переубеждать.
Записан
genkey
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #7 : 27.05.2016, 13:30:19 »

Понятно, что как то можно сделать нормально только с помощью <div>. Только как это сделать я нигде толком в интернете я не вскричал. Сам в этом мало понимаю. Все делаю "методом тыка". Заметил, что файл вывода материала default.php во многом устроен на таблицах. Решил перенести эту идею на шаблон.
Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #8 : 28.05.2016, 11:45:37 »

метод тыка помогает конечно, но я почитав ваш выше пост, заметил что вы путаете мух с котлетами:@media&css&div&css к div.
И при чём тут абсолют(позиционирование)? указывайте дивы в %, в медиа указывайте % для мобильных устройств.текст в em, в позиционировании строго настрого не пользуйтесь fixed.

у вас было:
Показать текстовый блок

сделайте:
    <div id="leftcol" class="новый класс">
        <jdoc:include type="modules" name="left" style="xhtml" />
    </div>
     <div id="centercol" class="новый класс">
        <jdoc:include type="component" />
     <jdoc:include type="message" style="xhtml" />
      </div>
      <div id="rightcol" class="новый класс">
        <jdoc:include type="modules" name="right" style="xhtml" />
     </div>

а в классе, смотря что у вас в id в CSS, двигайте ваши блоки, указывая что и кому и куда.
Если захотите общий блок перемещать, то окружите новым дивом, только тогда id указывайте вместо класса, так как у вас id внутри есть, а id читается в не очереди с классом.
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet