Центровка элементов

[Lifeamove]

Приветствую!

Требуется переместить картинки в центр сайта, и сделать это качественно, что бы на разных мониторах (разной диагонали) эти элементы-картинки выравнивались строго по центру.

Вот ссылка на "тему" как я создавал данные картинки https://opencartforum.com/topic/73095-css-stili-uproschenie/

 

 

*Версия ocStore 2.3.0.2

*Шаблон default

[jaffagold]

Вы их хотите разместить сразу под Главным (горизонтальным) меню?

[Lifeamove]

3 минуты назад, jaffagold сказал:

Вы их хотите разместить сразу под Главным (горизонтальным) меню?

ув. jaffagold, да сразу под главным меню, они так под ним и находятся... только нужно их грамотно оцентровать...

 

Есть вариант через .benefits ul >  margin: 0px 0px 0px 169px; изменяя последнее значение "169px" и подогнать под центр... но не факт то что на всех мониторах будет одинаково ровно по центру...

 

Ещё есть задумка текста из под картинок вытащить и разместить их справа от каждой картинки... ни как не могу добиться нужного результата...

[mazein]

Bootstrap class col-lg-4, + text-align: center

Даже лучше так:

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 text-center"> картинка1 </div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 text-center"> картинка2 </div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 text-center"> картинка3 </div>

 

[jaffagold]

Самое прикольное, сделать так: Сделать слайд из одного файла  в котором будут находиться все картинки. И он будет стоять как картинка во всю ширину под Главным меню. И масштабироваться по ширине. Хотя, это была шутка.

Насчет предыдущего комментария., Мне кажется, что товарищу 3 картинки в 2 ряда на малых не слишком подойдет.

Поэтому, может, сделать так:

col-lg-4 col-md-4 col-sm-4 col-xs-12 ?

И закинуть под закрывающий </div> в header.tpl

 

[Lifeamove]

20 минут назад, mazein сказал:

Bootstrap class col-lg-4, + text-align: center

Даже лучше так:

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 text-center"> картинка1 </div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 text-center"> картинка2 </div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 text-center"> картинка3 </div>

 

ув. mazein, то есть в /catalog/view/theme/default/template/common/home.tpl  сами <li> окружаю div-ами... шикарно всё получилось... только текст остаётся под картинками... взгляните ссылку вам в личные сообщение скинуть, дабы не рекламироваться P.S. Хотя всё равно в скором времени домен будет поменян.

[mazein]

10 минут назад, Lifeamove сказал:

только текст остаётся под картинками

а где он должен быть?

[Lifeamove]

4 минуты назад, mazein сказал:

а где он должен быть?

mazein, справа от картинки

[mazein]

Текст нужно обернуть каким-нибудь стилем, например <span class="ben-text"> здесь текст </span>

И убрать <br>

После этого надо изменить стили.

[Lifeamove]

Как я понял в home.tpl оберну текст 

<span class="ben-text"> здесь текст </span>

Убираю <br>

Потом при помощи css в stylesheet.css делаю стили .ben-text {и пошёл....}

Так?)

[mazein]

4 минуты назад, Lifeamove сказал:

{и пошёл....}

Ну как-то так, да.

[Lifeamove]

22 минуты назад, mazein сказал:

Ну как-то так, да.

mazein, не догоняю и какой ему параметр через css задать что бы он располагался справа от картинки...? 

text-align:... не получается

position:... не получается

 

P.S. Вопрос на будущее: вот такое нагромождение:

<span class="ben-text">***</span>

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 text-center"> картинка1 </div>

Будет ли как нибудь сказываться на seo продвижении? Не ухудшит его?

Просто думаю мало-ли робот посмотрит на код и посчитает то что его какой то второклассник писал, и не будет индексировать)))

[mazein]

Lifeamove, небольшая подсказка:

.ben-img {
    height: 120px;
    display: block;
    margin: 10px auto;
    float: left;
}

<li> можно вообще убрать, не понятно зачем оно.

 

3 минуты назад, Lifeamove сказал:

Не ухудшит его?

Не думаю.

[Lifeamove]

mazein, добавил к .ben-img { float: left;}

Чикарно всё встало как нужно.

Респект!

 

Убрал <li> все картинки съехали в левую сторону, текст остался на месте... можете взглянуть если интересно.

 

[jaffagold]

Вам и ul стоит убрать.
Можно в рамочку взять, как баннеры иногда делают. Но тогда надо вложить еще один div в каждую ячейку сетки и ему задать border, background ....

Текст желательно писать приближенный к реальному, тогда будет понятно, как на строки разобьется.

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 - это совершенно стандартный кусок кода.

Просмотрите как смотрится ваша группа картинок, сжимая окно браузера, разные бывают экраны у людей. Планшеты, мобильные.

Змінено 28 лютого 2017 користувачем jaffagold

[Lifeamove]

1 час назад, jaffagold сказал:

Вам и ul стоит убрать.
Можно в рамочку взять, как баннеры иногда делают. Но тогда надо вложить еще один div в каждую ячейку сетки и ему задать border, background ....

Текст желательно писать приближенный к реальному, тогда будет понятно, как на строки разобьется.

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 - это совершенно стандартный кусок кода.

Просмотрите как смотрится ваша группа картинок, сжимая окно браузера, разные бывают экраны у людей. Планшеты, мобильные.

 

jaffagold, ага шикарно: удаляю все <li> + удаляю <ul>... и код css к этим ul + li тоже тогда не нужен?)

На код можете взглянуть https://opencartforum.com/topic/73095-css-stili-uproschenie/ там в самом низу...

Меня походу глючит? Я удалил li и ul что с ними, что без них - одно и тоже!?

Получается зря мутил воду и делал css...

*   *   *

После удаления <li> и <ul> картинки все три сместились левее, и опять стоят не по центру... 

Я в stylesheet.css в селекторе .benefits {

Поменял
            width: 100%;
            margin: 5px 0px;

На

           margin: 1px 55px;

Действительно картинки сместились правее и вроде как встали в центр... но при изменении размера окна браузера они не всегда по центру остаются...

+При определённом размере окна (браузера) текст залезает под другой блок (под другую картинку)

P.S. Можете посмотреть swatch24.com (доменное имя будет поменяно *не реклама)

 

Змінено 28 лютого 2017 користувачем Lifeamove

[jaffagold]

Цитата

Получается зря мутил воду и делал css..

Да, я хотел вам сразу сказать, но ваша работа была уже сделана, когда я ваши простыни увидел.

Смотрите, у нас весь ряд разбит на три равных прямоугольных блока

В них картинки будут по центру только , если надписи снизу.

А если надпись справа, то картинка слева. Увы.

У вас при сильном сужении экрана пропадают картинки.

Добавьте кроме имеющегося класса еще и clearfix

class="benefits clearfix" 

И можете еще помучаться. Для малых экранов подсмотрите как это делается на примере:

Скрытый текст

@media (max-width: 767px) {
.product-list .product-thumb .caption {
    min-height: 0;
    margin-left: 0;
    padding: 0 10px;
}
.product-grid .product-thumb .caption {
    min-height: 0;
}
}

Можете подвинуть ваши картинки 

Змінено 28 лютого 2017 користувачем jaffagold

[Lifeamove]

12 часов назад, jaffagold сказал:

Добавьте кроме имеющегося класса еще и clearfix

class="benefits clearfix" 

И можете еще помучаться. Для малых экранов подсмотрите как это делается на примере:

  Скрыть контент

@media (max-width: 767px) {
.product-list .product-thumb .caption {
    min-height: 0;
    margin-left: 0;
    padding: 0 10px;
}
.product-grid .product-thumb .caption {
    min-height: 0;
}
}

Можете подвинуть ваши картинки 

 

jaffagold, не стал добавлять clearfix, на некоторых "умных" сайтах пишут то что: с помощью "overflow в hidden или auto" можно добиться тех же результатов что и с clearfix...

А я в общем сделал по другому: изображение уменьшил до 100px, сделал отрыв benefits от верха на -15px, текст уменьшил на 2 параметра и сместил его вверх (уровнял) вроде что то получилось... при изменении размера окна, текст не залезает на другие картинки... вроде нормально.

По возможности взгляните и оцените... может стоит так и оставить на первое время... потом после смены шаблона уже доделывать до идеала.

P.S. Столько времени ушло на эти картинки что нету слов, считал то что если с ними разберусь в дальнейшем будет проще работать над другими элементами.

[jaffagold]

В Chrome Нажмите F12? а потомм в левом нижнем углу на иконку мобильного телефона. Пропали ваши картинки?

А с clearfix они там были.

Класс clearfix у вас на сайте использован неоднократно.

Он как раз помогает бороться с негативными эффектами, которые обычно cвязаны с использованием float

Змінено 1 березня 2017 користувачем jaffagold

[Lifeamove]

jaffagold, получается нужно весь <div class="benefits"></div> обернуть  <a class="benefits clearfix"> </a>?

Что бы получилось вот так:

<a class="benefits clearfix">

<div class="benefits">...</div>

<a>

Или обернуть каждый бокс вида <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 text-center">?

 

Или просто подписать в <div class="benefits"></div> что бы получилось:

<div class="benefits" "clearfix"></div> ?

[jaffagold]

Было

Скрытый текст

class="benefits" 

Стало

Скрытый текст

class="benefits clearfix" 

Больше ничего. Классы добавляются через пробел в общие кавычки

[Lifeamove]

jaffagold, получается тогда и в css нужно менять с .benefits на .benefits clearfix так?

 

Редакция / дополнение:

Вставил как Вы и сказали clearfix, в stylesheet.css нечего не менял. Вроде всё получилось.

P.S. Прошу прощения за тупость, ошибся с добавлением класса (в общие кавычки)... начинаю познавать css...

 

Редакция / дополнение:

Подскажите правильно ли я подчистил css (свою филькину грамоту):

Общите добавление stylesheet.css:

Скрытый текст

.benefits {
            width: 100%;
            margin: -15px 15px 15px;
        }
        .benefits ul {
            list-style: none;
            overflow: hidden;
            margin: 0px; padding: 0px;
        }
        .benefits ul li {
            float: left;
            margin-left: 33px; 
        }
        .benefits ul li.first{
        margin-left: 33px; 
        }

        .benefits ul li.last{
            margin-right: 0px; 
        }

        
        .benefits ul li a {
            text-decoration: none;
            text-transform: uppercase;
            text-align: center;
            font-family: Roboto, Arial, Helvetica, sans-serif;
            font-size: 16px;
            font-weight: normal; 
            line-height: 24px;
            display: block;
            width: 220px;
            color: #000;
            background-repeat: no-repeat;
            background-position: top center;
        }
        .ben-img {
            height: 100px;
            display: block;
            margin: 10px auto;
                        float: left;
        }
        #ben-one .ben-img {
            background-image: url('../image/home/1.png');
            background-position: 0 0;
            width: 100px;
        }
        a#ben-one:hover {
            text-decoration: underline!important;
        }
        
        #ben-two .ben-img {
            background-image: url('../image/home/2.png');
            background-position: 0px 0;
            width: 100px;
        }
        
        #ben-three .ben-img {
            background-image: url('../image/home/3.png');
            background-position: 0px 0;
            width: 100px;
        }
        
        a#ben-three:hover {
            text-decoration: underline!important;
        }
        
        a#ben-two {cursor: default!important;}
.ben-text {
    font-family: tahoma;
    text-align: center;
    margin-top: 40px;
    font-size: 14px;
    font-weight: normal;
    line-height: 24px;
    display: block;
    width: 300px;
    color: #000;
}

 

Удалять буду следующие селекторы (те которые зачёркнутые удаляю) stylesheet.css:

Скрытый текст

.benefits {
            width: 100%;
            margin: -15px 15px 15px;
        }
        .benefits ul {
            list-style: none;
            overflow: hidden;
            margin: 0px; padding: 0px;
        }
        .benefits ul li {
            float: left;
            margin-left: 33px; 
        }
        .benefits ul li.first{
        margin-left: 33px; 
        }

        .benefits ul li.last{
            margin-right: 0px; 
        }

        
        .benefits ul li a {
            text-decoration: none;
            text-transform: uppercase;
            text-align: center;
            font-family: Roboto, Arial, Helvetica, sans-serif;
            font-size: 16px;
            font-weight: normal; 
            line-height: 24px;
            display: block;
            width: 220px;
            color: #000;
            background-repeat: no-repeat;
            background-position: top center;
        }
        .ben-img {
            height: 100px;
            display: block;
            margin: 10px auto;
                        float: left;
        }
        #ben-one .ben-img {
            background-image: url('../image/home/1.png');
            background-position: 0 0;
            width: 100px;
        }
        a#ben-one:hover {
            text-decoration: underline!important;
        }
        
        #ben-two .ben-img {
            background-image: url('../image/home/2.png');
            background-position: 0px 0;
            width: 100px;
        }
        
        #ben-three .ben-img {
            background-image: url('../image/home/3.png');
            background-position: 0px 0;
            width: 100px;
        }
        
        a#ben-three:hover {
            text-decoration: underline!important;
        }
        
        a#ben-two {cursor: default!important;}
.ben-text {
    font-family: tahoma;
    text-align: center;
    margin-top: 40px;
    font-size: 14px;
    font-weight: normal;
    line-height: 24px;
    display: block;
    width: 300px;
    color: #000;
}

 

Получается удаляю из stylesheet.css: селекторы:

1. benefits ul
2. benefits ul li
3. benefits ul li.first
4. benefits ul li.last

 

Похоже у меня эти тоже не работают!? То есть их тоже можно удалить?

 

Скрытый текст

       a#ben-one:hover {
            text-decoration: underline!important;
        }

 

        a#ben-three:hover {
            text-decoration: underline!important;
        }
        
        a#ben-two {cursor: default!important;

        }

 

Змінено 1 березня 2017 користувачем Lifeamove

[jaffagold]

Я бы все убрал.

А потом, что съехало прописал по-новой.

Этот путь мне кажется проще. Тем более вы уже знаете что и как двигается.

[Lifeamove]

jaffagold, а в коде html у меня всё ровно получается да?

Скрытый текст

<div class="benefits clearfix">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 text-center">
      <a rel="nofollow" href="/delivery/" id="ben-one" title="Узнать подробности">
        <span class="ben-img"></span>
         <span class="ben-text">
            Доставка бесплатная <br> Быстрая и удобная
          </span>
        </a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 text-center">
      <a id="ben-two">
        <span class="ben-img"></span>
         <span class="ben-text">
           Оперативное <br> Качественное обслуживание
          </span>
        </a>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 text-center">
      <a id="ben-three">
        <span class="ben-img"></span>
         <span class="ben-text">
           Товар оригинальный <br> Всегда в наличии
          </span>
        </a>
</div>
  </div>

 

 

Посмотрите пожалуйста что произошло! f12 на мобильное устройство... 

ссылка на изображение, размер: 18.9 кбайт, 275 x 397 точек

У Вас так же?

Змінено 1 березня 2017 користувачем Lifeamove

[jaffagold]

Да нормально. В третьем блоке просто не готова ссылка? Ставьте href="#"