Новости Joomla

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

Roinmana

  • Захожу иногда
  • 108
  • 2 / 0
Имеется трехколоночный блочный шаблон (left, content, right), где у content высота постоянно меняется в зависимости от "высоты" наполнения(контента). Что можно сделать, посредством CSS, чтобы боковые блоки left и right сами "подстраивались" под content по высоте и всегда были равным ему?
*

Arlekina

  • Захожу иногда
  • 52
  • 2 / 0
CSS
Код
.cols {
overflow: hidden;
width: 100%;
}
.cols .col  {
margin-bottom: -10000px;
padding-bottom: 10000px;
display:block;
float:left;
width:32%;
}
HTML
Код
<div class="cols">
<div class="col">Контент</div>
<div class="col">Контент</div>
<div class="col">Контент</div>
</div>
*

Roinmana

  • Захожу иногда
  • 108
  • 2 / 0
CSS
Код
.cols {
overflow: hidden;
width: 100%;
}
.cols .col  {
margin-bottom: -10000px;
padding-bottom: 10000px;
display:block;
float:left;
width:32%;
}
HTML
Код
<div class="cols">
<div class="col">Контент</div>
<div class="col">Контент</div>
<div class="col">Контент</div>
</div>

 Это работает, но боковыми столбами перекрывается foother, который там внизу width: 100%; должен быть, как его правильно сюда вписать, что бы не перекрывался?
« Последнее редактирование: 04.03.2013, 23:57:50 от Roinmana »
*

art-apple

  • Захожу иногда
  • 386
  • 61 / 2
Не очень удобное решение вам подсказали, лучше это делать с помощью jquery:
Подключаем jquery если ранее не подключали:
Код
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
потом небольшой скрипт используем:
Код
<script type="text/javascript">
var nc = jQuery.noConflict();

function equalHeight(group) {
     var tallest = 0;
     group.each(function() {
          thisHeight = nc(this).height();
           if(thisHeight > tallest) {
                  tallest = thisHeight;
           }
     });
     group.height(tallest);
}   
   
nc(window).load(function() {
    equalHeight(nc(".equal"));
});
nc(window).resize(function(){     
    equalHeight(nc(".equal"));
});
</script>
тем блокам, у которых должна быть одинаковая высота дописываем класс - equal
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Задача имеет множество решений и без JS. Как минимум три популярных. ТС, выложите принтскрин макета, чтоб было понятней, какое рациональней в вашем случае.
*

art-apple

  • Захожу иногда
  • 386
  • 61 / 2
Задача имеет множество решений и без JS. Как минимум три популярных. ТС, выложите принтскрин макета, чтоб было понятней, какое рациональней в вашем случае.
Вообще согласен, нужно смотреть макет. Я привел универсальный способ который работает всегда и в любом браузере(если js конечно не отключен) и не требует дополнительной разметки.
« Последнее редактирование: 05.03.2013, 10:34:56 от art-apple »
*

Arlekina

  • Захожу иногда
  • 52
  • 2 / 0
Не очень удобное решение вам подсказали, лучше это делать с помощью jquery:
ну тут уже у каждого свои любимые приемы ;) и зависит от ситуации

Это работает, но боковыми столбами перекрывается foother, который там внизу width: 100%; должен быть, как его правильно сюда вписать, что бы не перекрывался?
действительно, лучше выложить расположение блоков, а то не понятно.
если после колонок что-то ломается и едет, то исправляем так:
Код
<div class="cols">
<div class="col">Контент</div>
<div class="col">Контент</div>
<div class="col">Контент</div>
        <div style="clear: both;"></div>
</div>
*

Pazys

  • Завсегдатай
  • 1738
  • 241 / 4
  • <a>А где я ошибся-то?</b>
Скачайте шаблончик - я там в CSS комментариев написал - прочитайте.
Ишак меня нюхал ...
Если помог - плюсуйте в карму.
*

Roinmana

  • Захожу иногда
  • 108
  • 2 / 0
-------------------------------------!      
!                    TOP                           !
!-------------------------------------!
!            !                          !            !
!            !                          !            !
!            !                          !            !
! Left      !    Content           ! Right     !
!            !                          !            !
!            !                          !            !
!            !                          !            !
!-------------------------------------!
!                  Foother                        !
!-------------------------------------!

Вот расположение блоков. Пожалуйста, подскажите наиболее рациональный способ, желательно на CSS?
Скачайте шаблончик - я там в CSS комментариев написал - прочитайте.
Работает, но не  в Opera, которым много кто у нас пользуется.
for Arlekina
Код
<div style="clear: both;"></div>
ничего не меняет...
for art-apple
Если не найду решения на CSS, то буду делать так, спасибо.
*

art-apple

  • Захожу иногда
  • 386
  • 61 / 2
Если без использования js, то самый действенный способ такой, с доп разметкой:
HTML разметка:
Код
<div class="wrapper">
  <div class="right-wrap">
    <div class="content-wrap”>
      <div class="left-wrap">
        <div  class="left">Содержимое</div>
        <div class="content">Содержимое</div>
        <div  class="right">Содержимое</div>
      </div>
    </div>
  </div>
</div>
CSS
Код
.wrapper  {
  width: 900px;
  margin-left: auto;
  margin-right:auto;
}
.right-wrap {
  width: 100%;
  float:left;
  background-color: green;
  overflow:hidden;
  position:relative;
}
.content-wrap  {
  float:left;
  background-color:blue;
  width: 100%;
  position:relative;
  right: 300px;    
}
.left-wrap {
  width: 100%;
  position:relative;
  right: 400px;
  float:left;
  background-color: #f00;
}

.left {
  float:left;
  width: 200px;
  overflow:hidden;
  position:relative;
  left: 700px;
}

.content  {
  float:left;
  width: 400px;
  overflow:hidden;
  position:relative;
  left: 700px;
}

.right  {
  float:left;
  overflow:hidden;
  width: 300px;
  background-color:#333;
  position:relative;
  left: 700px;
}
*

Roinmana

  • Захожу иногда
  • 108
  • 2 / 0
Итак, собрав из того, что здесь советовали умные люди, сделал следующее, может кому пригодится:
HTML:
Код
 <div class="wrapper">
      <div id="left"></div>
      <div id="content”></div>
      <div id="right"></div>
 </div>
 <div  class="foother"></div>
CSS:
Код
.wrapper  {
           overflow: hidden;
height: auto;
width: 980px;
           margin-top: 0;
margin-right: auto;
margin-left: auto;
}
#left, #content, #right{
margin-bottom: -10000px;
padding-bottom: 10000px;
float:left;
            width: 32%;
}
#content{
            min-height:900px;
}
#foother {
clear: both;
           width: 980px;
height: 90px;
margin:0 auto;
}
Подходит для фиксированного шаблона и работает во всех браузерах.
*

Roinmana

  • Захожу иногда
  • 108
  • 2 / 0
Если без использования js, то самый действенный способ такой, с доп разметкой:
HTML разметка:
Код
<div class="wrapper">
  <div class="right-wrap">
    <div class="content-wrap”>
      <div class="left-wrap">
        <div  class="left">Содержимое</div>
        <div class="content">Содержимое</div>
        <div  class="right">Содержимое</div>
      </div>
    </div>
  </div>
</div>
CSS
Код
.wrapper  {
  width: 900px;
  margin-left: auto;
  margin-right:auto;
}
.right-wrap {
  width: 100%;
  float:left;
  background-color: green;
  overflow:hidden;
  position:relative;
}
.content-wrap  {
  float:left;
  background-color:blue;
  width: 100%;
  position:relative;
  right: 300px;    
}
.left-wrap {
  width: 100%;
  position:relative;
  right: 400px;
  float:left;
  background-color: #f00;
}

.left {
  float:left;
  width: 200px;
  overflow:hidden;
  position:relative;
  left: 700px;
}

.content  {
  float:left;
  width: 400px;
  overflow:hidden;
  position:relative;
  left: 700px;
}

.right  {
  float:left;
  overflow:hidden;
  width: 300px;
  background-color:#333;
  position:relative;
  left: 700px;
}

Сделал по этому способу, действительно хорошо работает. Но столкнулся с проблемой, что перестало работать выпадающее горизонтальное меню, которое в TOP-е есть и выпадает вниз. Оно выпадает но при попытке опустить указатель мыши на пункт выпавшего списка сразу ищезает т.к. получается, что этот выпадающий список находится под .right-wrap Помогите!
« Последнее редактирование: 19.04.2013, 22:19:34 от Roinmana »
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Перенос блоков

Автор Forgiving

Ответов: 0
Просмотров: 941
Последний ответ 15.03.2020, 10:22:43
от Forgiving
Замена контента при наведении курсора

Автор zilonitiz

Ответов: 2
Просмотров: 2013
Последний ответ 05.08.2018, 12:00:00
от zilonitiz
Высота блока с иконками

Автор dmtn

Ответов: 10
Просмотров: 1665
Последний ответ 03.02.2018, 19:54:11
от dmtn
Выравнивание блоков по высоте

Автор BrutalMan

Ответов: 6
Просмотров: 1760
Последний ответ 08.08.2016, 06:30:15
от neogeek
Сетка блоков типа Grid или Inline, не могу разобраться [Решено]

Автор JaneFaint

Ответов: 7
Просмотров: 1848
Последний ответ 28.07.2016, 16:36:40
от JaneFaint