Новости Joomla

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

Golubevod

  • Осваиваюсь на форуме
  • 37
  • 0 / 0
Добрый день,
Делаю свой шаблон. Есть div "icons", в нём 4 блока div (icon1, icon2, icon3, icon4) по 25%. По идее всё вместе 100% - должно влезать. Но последний блок сползает вниз - не вмещается, видно что между блоками небольшое расстояние. Если в div icons прописать font-size: 0; - то всё отображается правильно. В чем причина, может неправильно сверстано? Можно ли использовать такое решение? (боюсь что оно плохо для seo) Спасибо!

Код
<div class="icons">
<div id="icon1">
<jdoc:include type="modules" name="icon1" style="xhtml" />
</div>
<div id="icon2">
<jdoc:include type="modules" name="icon2" style="xhtml" />
</div>
<div id="icon3">
<jdoc:include type="modules" name="icon3" style="xhtml" />
</div>
<div id="icon4">
<jdoc:include type="modules" name="icon4" style="xhtml" />
</div>
</div>

Код
.icons {
position: relative;
background: #daebf9;
width: 100%;
max-width: 1920px;
margin-left: auto;
margin-right: auto;
padding-top: 25px;
padding-bottom: 25px;
font-size: 0;
}

#icon1 {
display: inline-block;
width: 21%;
line-height: 1.5;
color: #222;
padding: 2%;
vertical-align: top;
font-size: 13px;
}

#icon2 {
display: inline-block;
width: 21%;
line-height: 1.5;
color: #222;
padding: 2%;
vertical-align: top;
font-size: 13px;
}

#icon3 {
display: inline-block;
width: 21%;
line-height: 1.5;
color: #222;
padding: 2%;
vertical-align: top;
font-size: 13px;
}

#icon4 {
display: inline-block;
width: 21%;
line-height: 1.5;
color: #222;
padding: 2%;
vertical-align: top;
font-size: 13px;
}
« Последнее редактирование: 06.03.2016, 16:45:47 от Golubevod »
*

AlekVolsk

  • Гуру
  • 6915
  • 415 / 4
Re: Убрать расстояние между блоками
« Ответ #1 : 06.03.2016, 19:27:40 »
Это из-за padding'а внутри каждого блока, он увеличивает размеры.
Чтобы этого не происходило, применяйте box-sizing:border-box;
И зачем вы дублируете одни и те же свойства для каждого блока? Не проще ли записать так:
Код: css
.icons {
position: relative;
background: #daebf9;
width: 100%;
max-width: 1920px;
margin-left: auto;
margin-right: auto;
padding-top: 25px;
padding-bottom: 25px;
font-size: 0;
}

.icons > [id*="icon"] {
box-sizing:border-box;
display: inline-block;
width: 21%;
line-height: 1.5;
color: #222;
padding: 2%;
vertical-align: top;
font-size: 13px;
}
*

Golubevod

  • Осваиваюсь на форуме
  • 37
  • 0 / 0
Re: Убрать расстояние между блоками
« Ответ #2 : 06.03.2016, 20:05:08 »
Спасибо за помощь!
1) Делаю как вы написали, всё равно при 25% последний блок улетает вниз. Приходиться ставить или 24.5% или font-size: 0;
2).icons > [id*="icon"] Как этот прием называется, где можно прочитать подробней про это? Правильно я понимаю, что всем div содержащим icon задасться один стиль? и их не нужно через запятую перечислять?
Спасибо благородный человек!

*

AlekVolsk

  • Гуру
  • 6915
  • 415 / 4
Re: Убрать расстояние между блоками
« Ответ #3 : 06.03.2016, 20:55:04 »
вместо id для стилей лучше использовать класс, id - для использования в скриптах, для стилей - классы:
Код: html4strict
<div class="icons">
<div id="icon1" class="icon">
<jdoc:include type="modules" name="icon1" style="xhtml" />
</div>
<div id="icon2" class="icon">
<jdoc:include type="modules" name="icon2" style="xhtml" />
</div>
<div id="icon3" class="icon">
<jdoc:include type="modules" name="icon3" style="xhtml" />
</div>
<div id="icon4" class="icon">
<jdoc:include type="modules" name="icon4" style="xhtml" />
</div>
</div>

тогда в стилях можно записать так
Код: css
.icons > .icon {

1) Делаю как вы написали, всё равно при 25% последний блок улетает вниз. Приходиться ставить или 24.5% или font-size: 0;
сложно сказать, не видя сайта

2).icons > [id*="icon"] Как этот прием называется, где можно прочитать подробней про это? Правильно я понимаю, что всем div содержащим icon задасться один стиль? и их не нужно через запятую перечислять?
http://htmlbook.ru/css/selector/tag => в правом сайдбаре второй блок "Селекторы"

*

Golubevod

  • Осваиваюсь на форуме
  • 37
  • 0 / 0
Re: Убрать расстояние между блоками
« Ответ #4 : 06.03.2016, 21:17:15 »
Спасибо.
Вот скрин. Я выделил мышкой все иконки и между ними видно "пустоту". Вот что это за воздух откуда он береться...


Если сделать display: table для icons то работает. "Пустота" пропадает.
« Последнее редактирование: 06.03.2016, 21:40:26 от Golubevod »
*

Golubevod

  • Осваиваюсь на форуме
  • 37
  • 0 / 0
Re: Убрать расстояние между блоками
« Ответ #5 : 07.03.2016, 23:25:15 »
В общем разобрался в чем проблема. Может кому пригодиться.
Дело в том что элементы inline-block создают между собой отступы равные пробелу.
Решить проблему можно рядом способов. Я просто удалил все отступы между блоками:
Код
<div class="icons"><div id="icon1" class="icon"><jdoc:include type="modules" name="icon1" style="xhtml" /></div><div id="icon2" class="icon"><jdoc:include type="modules" name="icon2" style="xhtml" /></div><div id="icon3" class="icon"><jdoc:include type="modules" name="icon3" style="xhtml" /></div><div id="icon4" class="icon"><jdoc:include type="modules" name="icon4" style="xhtml" /></div>

Также пробелы можно просто закомментировать.
« Последнее редактирование: 08.03.2016, 10:54:52 от Golubevod »
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Где настраивается и как убрать Sidebar в Helix Ultimate?

Автор varella

Ответов: 5
Просмотров: 757
Последний ответ 20.09.2022, 23:12:13
от varella
Убрать надпись в футере

Автор kunsaid

Ответов: 6
Просмотров: 593
Последний ответ 22.12.2021, 18:06:35
от kunsaid
Не могу понять где могу убрать Google карту со страницы

Автор itbc

Ответов: 2
Просмотров: 499
Последний ответ 18.11.2021, 13:12:34
от itbc
Как убрать из URL знак решётка, меню Bootstrap?

Автор leo78

Ответов: 1
Просмотров: 517
Последний ответ 14.05.2021, 11:43:07
от leo78
Убрать вывод модулей на страницах не выведенных в меню

Автор SynergyIT

Ответов: 5
Просмотров: 748
Последний ответ 13.04.2021, 10:31:15
от fbr