Новости Joomla

NorrCompetition 3.0 — новые возможности компонента конкурсов и голосований для Joomla 6

Релиз NorrCompetition 3.0 — крупное обновление расширения для проведения конкурсов и голосований в Joomla.

Вышли релизы безопасности Joomla 6.1.1 и Joomla 5.4.6

Релиз безопасности Joomla 6.1.1 и Joomla 5.4.6

Проект Joomla! рад сообщить о выходе Joomla 6.1.1 и Joomla 5.4.6. Это релизы безопасности и исправления ошибок для серий 5.x и 6.x.

👩‍💻 JoomShopping: Самый полный курс по созданию интернет-магазина на CMS Joomla.

👩‍💻 JoomShopping: Самый полный курс по созданию интернет-магазина на CMS Joomla.

В открытый доступ выложен видео-курс Дмитрия Гончарова по созданию интернет-магазина на связке Joomla + JoomShopping. Видеоуроки содержат пошаговые инструкции от регистрации хостинга до особенностей вёрстки, настройки способов оплаты и доставки.

В видео фигурирует JoomShopping 4 и Joomla 3, однако JoomShopping довольно консервативный компонент и многие способы и подходы в нём не менялись годами, поэтому данные видео могут быть по прежнему полезны.

Смотреть видео-курс

@joomlafeed

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

Roinmana

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

Arlekina

  • Захожу иногда
  • 52
  • 2 / 0
Re: Высота боковых блоков по размеру контента
« Ответ #1 : 01.03.2013, 21:44:42 »
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
Re: Высота боковых блоков по размеру контента
« Ответ #2 : 04.03.2013, 23:51:57 »
Цитата: Arlekina от 01.03.2013, 21:44:42
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
Re: Высота боковых блоков по размеру контента
« Ответ #3 : 05.03.2013, 08:12:13 »
Не очень удобное решение вам подсказали, лучше это делать с помощью 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
Re: Высота боковых блоков по размеру контента
« Ответ #4 : 05.03.2013, 10:02:49 »
Задача имеет множество решений и без JS. Как минимум три популярных. ТС, выложите принтскрин макета, чтоб было понятней, какое рациональней в вашем случае.
Записан
*

art-apple

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

Arlekina

  • Захожу иногда
  • 52
  • 2 / 0
Re: Высота боковых блоков по размеру контента
« Ответ #6 : 05.03.2013, 18:58:47 »
Цитата: art-apple от 05.03.2013, 08:12:13
Не очень удобное решение вам подсказали, лучше это делать с помощью jquery:
ну тут уже у каждого свои любимые приемы ;) и зависит от ситуации

Цитата: Roinmana от 04.03.2013, 23:51:57
Это работает, но боковыми столбами перекрывается 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>
Re: Высота боковых блоков по размеру контента
« Ответ #7 : 05.03.2013, 19:08:21 »
Скачайте шаблончик - я там в CSS комментариев написал - прочитайте.
Записан
Ишак меня нюхал ...
Если помог - плюсуйте в карму.
*

Roinmana

  • Захожу иногда
  • 108
  • 2 / 0
Re: Высота боковых блоков по размеру контента
« Ответ #8 : 05.03.2013, 20:49:57 »
-------------------------------------!      
!                    TOP                           !
!-------------------------------------!
!            !                          !            !
!            !                          !            !
!            !                          !            !
! Left      !    Content           ! Right     !
!            !                          !            !
!            !                          !            !
!            !                          !            !
!-------------------------------------!
!                  Foother                        !
!-------------------------------------!

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

art-apple

  • Захожу иногда
  • 386
  • 61 / 2
Re: Высота боковых блоков по размеру контента
« Ответ #9 : 05.03.2013, 21:19:42 »
Если без использования 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
Re: Высота боковых блоков по размеру контента
« Ответ #10 : 05.03.2013, 21:52:51 »
Итак, собрав из того, что здесь советовали умные люди, сделал следующее, может кому пригодится:
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;
}
Подходит для фиксированного шаблона и работает во всех браузерах.
Записан
*

SmiP

  • Захожу иногда
  • 265
  • 35 / 0
Re: Высота боковых блоков по размеру контента
« Ответ #11 : 05.03.2013, 22:00:39 »
Записан
*

Roinmana

  • Захожу иногда
  • 108
  • 2 / 0
Re: Высота боковых блоков по размеру контента
« Ответ #12 : 19.04.2013, 21:12:59 »
Цитата: art-apple от 05.03.2013, 21:19:42
Если без использования 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 »
Записан
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

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

Автор Forgiving

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

Автор zilonitiz

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

Автор dmtn

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

Автор BrutalMan

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

Автор JaneFaint

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