Перейти к содержанию

Рекомендуемые сообщения

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

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

4702e93a319a0330950229972f39011a-prev.jp

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

 

 

*Версия ocStore 2.3.0.2

*Шаблон default

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
3 минуты назад, jaffagold сказал:

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

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

 

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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>

 

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

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

 

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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. Хотя всё равно в скором времени домен будет поменян.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
10 минут назад, Lifeamove сказал:

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

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
4 минуты назад, mazein сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

И убрать <br>

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Убираю <br>

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

Так?)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
4 минуты назад, Lifeamove сказал:

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

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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 продвижении? Не ухудшит его?

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

 

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

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

Не думаю.

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Респект!

 

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

Изменено пользователем jaffagold
  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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 (доменное имя будет поменяно *не реклама)

 

Изменено пользователем Lifeamove

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Цитата

Получается зря мутил воду и делал 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;
}
}

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

Изменено пользователем jaffagold
  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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. Столько времени ушло на эти картинки что нету слов, считал то что если с ними разберусь в дальнейшем будет проще работать над другими элементами.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

Изменено пользователем jaffagold
  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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> ?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Было

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

class="benefits

Стало

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

class="benefits clearfix

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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;

        }

 

Изменено пользователем Lifeamove

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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 точек

У Вас так же?

Изменено пользователем Lifeamove

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.