0 Пользователей и 1 Гость просматривают эту тему.
  • 7 Ответов
  • 3469 Просмотров
*

mohax

  • Давно я тут
  • 901
  • 66 / 3
Пишу свой шаблон. Возникла трудность с выравниванием высоты двух колонок.
Код такой:
Код
<div class="maindiv">
        <!-- Левая колонка -->
<div class="leftcol">
<?php if($this->countModules('left')) : ?> <jdoc:include type="modules" name="left" style="rounded" /><?php endif; ?>
</div>

<!-- КОнтент и правая колонка -->
<div class="mainright">
<!-- Область контента -->
<div class="content">
<jdoc:include type="component" />
</div>
<!-- Правая колонка -->
<div class="rightcol">
<?php if($this->countModules('right')) : ?> <jdoc:include type="modules" name="right" style="rounded" /><?php endif; ?>
</div>
</div>
</div>

В дивах leftcol и mainright выводятся бордюры с помощью фоновой картинки
Участок CSS:
Код
div.maindiv{
/*float: left;*/
width: 1000px;
padding: 0px;
margin: auto;
/*height: 100%;*/
/*border: 1px solid #03abc1;*/
/*background: none repeat scroll 0 0 #CCFFFF;*/
}

div.leftcol{
width: 200px;
float: left;
text-align: left;
margin: 0px 0px 0px 3px;
padding: 3px 0px 0px 10px;
background: url(../images/mw_l.png) left top repeat-y transparent;
/*border: 1px solid #ff0018;*/
}

div.mainright{
width: 773px;
float: left;
margin: 0px 0px 0px 0px;
padding: 3px 10px 0px 0px;
background: url(../images/mw_r.png) right top repeat-y transparent;
}

div.content{
float: left;
margin: 0px 20px 0px;
width: 530px;
}

div.rightcol{
width: 200px;
float: left;
text-align: left;
margin: 0px;
padding: 0;
}

Ну и проблема в том, что бордеры различны по высоте. Как эти две колонки сделать одинаковыми по высоте?
*

Efanych

  • Глобальный модератор
  • 4683
  • 641 / 0
  • Меняю свою жизнь на 360°!
Можна сделать с помощью отступов.
Назначаеш обоим дивам margin-bottom:-1000px и padding-bottom:1000px. А общему диву добавляеш свойство overflow:hidden;
Недостаток в том, что нижнего бордера видно не будет.
« Последнее редактирование: 14.03.2011, 11:06:59 от Efanych »
Создание сайтов, шаблонов, помощь в решении проблем.
*

mohax

  • Давно я тут
  • 901
  • 66 / 3
Можна сделать с помощью отступов.
Назначаеш обоим дивам margin-bottom:-1000px и padding-bottom:1000px. А общему диву добавляеш свойство overflow:hidden;
Недостаток в том, что нижнего бордера видно не будет.

Там после этой конструкции еще футер есть.. но он без рамок. попробую. а еще варианты есть какие-нибудь?
*

mohax

  • Давно я тут
  • 901
  • 66 / 3
Спасибо! То что надо)) +
« Последнее редактирование: 15.03.2011, 18:29:47 от mohax »
*

drobinkin

  • Захожу иногда
  • 90
  • 4 / 0
  • Старый пират
а еще варианты есть какие-нибудь?

jQuery "jHeights" Plugin :)
Бостон — чемпион!
*

mohax

  • Давно я тут
  • 901
  • 66 / 3
jQuery "jHeights" Plugin :)
Чем целый плагин для этого ставить jQuery тянуть, проще просто на JS написать. Я воспользовался советом выше.
*

drobinkin

  • Захожу иногда
  • 90
  • 4 / 0
  • Старый пират
Чем целый плагин для этого ставить jQuery тянуть

"Обосраца и не жить" © Егор Летов
Вы для кого сайт делаете? Для диалапщиков? Если "потенциальный" клиент не может вытянуть из сети лишние пару-тройку Кб — мож ну ево, такого клиента? ;)
Или для гиков, которые нах отключают все у себя - картинки, скрипты  и т.п.?
« Последнее редактирование: 04.04.2011, 23:03:19 от drobinkin »
Бостон — чемпион!
*

mohax

  • Давно я тут
  • 901
  • 66 / 3
"Обосраца и не жить" © Егор Летов
Это конечно ваше дело =)

Если по теме, то для того чтобы через offsetHeight узнать высоту  колонок,  сравнить их и для нужной выставить высоту путем
Цитировать
document.getElementById("main").style.height = Height + "px";
jQuery тащить совсем не обязательно (код взят на одном из форумов).

Во-вторых, по-моему странно для верстки "каркаса" сайта использовать JS.
А так, если есть желание, то можно и плагин поставить конечно.

Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Повторение стиля боковой колонки для каждого модуля отдельно

Автор ArtTheft

Ответов: 0
Просмотров: 2292
Последний ответ 21.09.2012, 20:04:56
от ArtTheft
Как сделать меню в две колонки?

Автор Виталик

Ответов: 2
Просмотров: 3712
Последний ответ 27.09.2011, 15:05:36
от vek21
Сделал шаблон с чистым CSS - не работает разбивка на колонки при выводе блогом

Автор Cerhio

Ответов: 7
Просмотров: 2479
Последний ответ 12.10.2009, 14:45:28
от Cerhio