Основной курс по Joomla
0 Пользователей и 1 Гость просматривают эту тему.
  • 8 Ответов
  • 1344 Просмотров
*

genkey

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

genkey

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

genkey

  • Захожу иногда
  • **
  • 19
  • 0
Допер до нового способа. Может будет полезно кому нибудь. Ведь шаблонов с фиксированными левой и правой колонками и резиновой центральной в 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, 17:49:42 от genkey »
*

vipiusss

  • Профи
  • ********
  • 5529
  • 318
  • Круглая ава-зло!
А зачем вы дивы в таблицу пихаете?
Делали уже дивами просто+css.
И там уже @media для устройств по надобности.
Странный подход.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

genkey

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

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

Код
@media screen and (max-width: 650px) {
. kolonka {
display: inline;
}
}
*

vipiusss

  • Профи
  • ********
  • 5529
  • 318
  • Круглая ава-зло!
Без таблиц есть определенные недостатки.
Их нету, если грамотно сделать для дивов CSS.
Жираф большой-ему видней.Не имею право вас переубеждать.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

genkey

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

vipiusss

  • Профи
  • ********
  • 5529
  • 318
  • Круглая ава-зло!
метод тыка помогает конечно, но я почитав ваш выше пост, заметил что вы путаете мух с котлетами:@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 читается в не очереди с классом.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями