Jump to content

Recommended Posts

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

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

4702e93a319a0330950229972f39011a-prev.jp

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

 

 

*Версия ocStore 2.3.0.2

*Шаблон default

Share this post


Link to post
Share on other sites

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

  • +1 1

Share this post


Link to post
Share on other sites
3 минуты назад, jaffagold сказал:

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

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

 

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

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

 

  • +1 1

Share this post


Link to post
Share on other sites
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. Хотя всё равно в скором времени домен будет поменян.

Share this post


Link to post
Share on other sites
10 минут назад, Lifeamove сказал:

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

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

  • +1 1

Share this post


Link to post
Share on other sites
4 минуты назад, mazein сказал:

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

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

Share this post


Link to post
Share on other sites

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

И убрать <br>

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

  • +1 1

Share this post


Link to post
Share on other sites

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

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

Убираю <br>

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

Так?)

Share this post


Link to post
Share on other sites
4 минуты назад, Lifeamove сказал:

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

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

  • +1 1

Share this post


Link to post
Share on other sites
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 продвижении? Не ухудшит его?

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

Share this post


Link to post
Share on other sites

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

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

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

 

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

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

Не думаю.

  • +1 1

Share this post


Link to post
Share on other sites

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

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

Респект!

 

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

 

Share this post


Link to post
Share on other sites

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

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

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

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

Edited by jaffagold
  • +1 1

Share this post


Link to post
Share on other sites
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 (доменное имя будет поменяно *не реклама)

 

Edited by Lifeamove

Share this post


Link to post
Share on other sites
Цитата

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

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

Edited by jaffagold
  • +1 1

Share this post


Link to post
Share on other sites
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. Столько времени ушло на эти картинки что нету слов, считал то что если с ними разберусь в дальнейшем будет проще работать над другими элементами.

Share this post


Link to post
Share on other sites

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

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

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

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

Edited by jaffagold
  • +1 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Было

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

class="benefits

Стало

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

class="benefits clearfix

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

  • +1 1

Share this post


Link to post
Share on other sites

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;

        }

 

Edited by Lifeamove

Share this post


Link to post
Share on other sites

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

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

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

  • +1 1

Share this post


Link to post
Share on other sites

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

У Вас так же?

Edited by Lifeamove

Share this post


Link to post
Share on other sites

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

 

  • +1 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.