Адаптация размеров HTML баннера для мобильных устройств

[AVLakt]

Здравствуйте, есть 2 HTML баннера на странице https://xn--80ajkohcfihda1gwbp.xn--p1ai/. При просмотре сайта на мобильном баннеры деформируются и становятся нечитабельными. имеем следующие настройки width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">. баннер - это раскроенное изображение, созданное в фотошопе. подскажите, как сделать баннеры адаптивными?

 

верхний

 

<title>Меню_v2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- Save for Web Slices (Меню_v2.psd) -->
<table id="________01" width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
    <tbody><tr>
        <td colspan="3">
            <img src="ftp/images_70/Menu_v2_01.gif" width="1260" height="154" alt=""></td>
    </tr>
    <tr>
        <td>
            <a href="https://xn--80ajkohcfihda1gwbp.xn--p1ai/katalog/kofemashiny/">
                <img src="ftp/images_70/Menu_v2_02.gif" width="420" height="70" border="0" alt=""></a></td>
        <td>
            <a href="https://xn--80ajkohcfihda1gwbp.xn--p1ai/katalog/palatki/">
                <img src="ftp/images_70/Меню_v2_05.gif" width="420" height="70" border="0" alt=""></a></td>
        <td rowspan="6">
            <img src="ftp/images_70/Menu_v2_04.gif" width="420" height="434" alt=""></td>
    </tr>
    <tr>
        <td>
            <a href="https://xn--80ajkohcfihda1gwbp.xn--p1ai/katalog/tenti-i-shatri/">
                <img src="ftp/images_70/Меню_v2_07.gif" width="420" height="70" border="0" alt=""></a></td>
        <td>
            <a href="https://xn--80ajkohcfihda1gwbp.xn--p1ai/katalog/gamaki/">
                <img src="ftp/images_70/Меню_v2_08.gif" width="420" height="70" border="0" alt=""></a></td>
    </tr>
    <tr>
        <td>
            <a href="https://xn--80ajkohcfihda1gwbp.xn--p1ai/katalog/zonti/">
                <img src="ftp/images_70/Меню_v2_10.gif" width="420" height="70" border="0" alt=""></a></td>
        <td>
            <a href="https://xn--80ajkohcfihda1gwbp.xn--p1ai/katalog/spalnie-meshki/">
                <img src="ftp/images_70/Меню_v2_11.gif" width="420" height="70" border="0" alt=""></a></td>
    </tr>
    <tr>
        <td>
            <a href="https://xn--80ajkohcfihda1gwbp.xn--p1ai/katalog/germoupakovka/">
                <img src="ftp/images_70/Меню_v2_13.gif" width="420" height="70" border="0" alt=""></a></td>
        <td>
            <a href="https://xn--80ajkohcfihda1gwbp.xn--p1ai/katalog/obogrevateli-i-teploobmenniki/">
                <img src="ftp/images_70/Меню_v2_14.gif" width="420" height="70" border="0" alt=""></a></td>
    </tr>
    <tr>
        <td>
            <a href="https://xn--80ajkohcfihda1gwbp.xn--p1ai/katalog/gazovoe-oborudovanie/">
                <img src="ftp/images_70/Меню_v2_16.gif" width="420" height="69" border="0" alt=""></a></td>
        <td>
            <a href="https://xn--80ajkohcfihda1gwbp.xn--p1ai/katalog/sani/">
                <img src="ftp/images_70/Меню_v2_17.gif" width="420" height="69" border="0" alt=""></a></td>
    </tr>
    <tr>
        <td>
            <a href="https://xn--80ajkohcfihda1gwbp.xn--p1ai/katalog/mebel-skladnaja/">
                <img src="ftp/images_70/Меню_v2_19.gif" width="420" height="85" border="0" alt=""></a></td>
        <td>
            <a href="https://xn--80ajkohcfihda1gwbp.xn--p1ai/katalog/">
                <img src="ftp/images_70/Меню_v2_20.png" width="420" height="85" border="0" alt=""></a></td>
    </tr>
</tbody></table>
<!-- End Save for Web Slices -->

 

нижний

 

<title>Соцсети_</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- Save for Web Slices (Соцсети_.psd) -->
<table id="________01" width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
    <tbody><tr>
        <td colspan="5">
            <img src="ftp/images_2/Соцсети__01.gif" width="1117" height="60" alt=""></td>
    </tr>
    <tr>
        <td>
            <a href="https://vk.com/espressomachines">
                <img src="ftp/images_2/Соцсети__02.gif" width="223" height="279" border="0" alt=""></a></td>
        <td>
            <a href="https://www.instagram.com/coffee_vezde/">
                <img src="ftp/images_2/Соцсети__03.gif" width="223" height="279" border="0" alt=""></a></td>
        <td>
            <a href="http://t.me/espressomachines">
                <img src="ftp/images_2/Соцсети__04.gif" width="224" height="279" border="0" alt=""></a></td>
        <td>
            <a href="https://chat.whatsapp.com/Kh8T3j09kGBGgs9a3vsOWs">
                <img src="ftp/images_2/Соцсети__05.png" width="223" height="279" border="0" alt=""></a></td>
        <td>
            <a href="https://youtube.com/channel/UCo8pid3thx9jYcUqwvC1YjA">
                <img src="ftp/images_2/Соцсети__06.png" width="224" height="279" border="0" alt=""></a></td>
    </tr>
    <tr>
        <td colspan="5">
            <img src="ftp/images_2/Соцсети__07.gif" width="1117" height="1" alt=""></td>
    </tr>
</tbody></table>
<!-- End Save for Web Slices -->

Змінено 9 квітня 2021 користувачем AVLakt
добавлен код

[SiteMix]

15 минут назад, AVLakt сказал:

баннер - это раскроенное изображение, созданное в фотошопе. подскажите, как сделать баннеры адаптивными?

Под баннером подразумевается совокупность кнопок и картинка справа от кнопок?

Как минимум, скройте картинку на мобильных устройствах, либо переместите её в верх или вниз. Уже этого будет достаточно чтобы кнопки были читаемыми. А можно кнопуки в столбику выстроить на маленьких экранах.

[halfhope]

Чтобы сохранить пропорции укажите для изображений баннера CSS:

height: auto;

или добавьте к каждому класс img-responsive

[AVLakt]

9 часов назад, SiteMix сказал:

Под баннером подразумевается совокупность кнопок и картинка справа от кнопок?

Как минимум, скройте картинку на мобильных устройствах, либо переместите её в верх или вниз. Уже этого будет достаточно чтобы кнопки были читаемыми. А можно кнопуки в столбику выстроить на маленьких экранах.

Я добавил их  через встроенный  блок  html контент, его разве можно скрывать на мобильных? Как это сделать?

[AVLakt]

8 часов назад, halfhope сказал:

Чтобы сохранить пропорции укажите для изображений баннера CSS:

height: auto;

или добавьте к каждому класс img-responsive

Можно чуть подробнее где и что нужно прописать?

[halfhope]

5 минут назад, AVLakt сказал:

Можно чуть подробнее где и что нужно прописать?

 

К каждому изображению добавьте класс img-responsive:

<img src="ftp/images_70/Меню_v2_19.gif" class="img-responsive" width="420" height="85" border="0" alt="">

 

[AVLakt]

13 минут назад, halfhope сказал:

 

К каждому изображению добавьте класс img-responsive:

<img src="ftp/images_70/Меню_v2_19.gif" class="img-responsive" width="420" height="85" border="0" alt="">

 

Высоту при этом менять на auto, как написано выше?

[halfhope]

44 минуты назад, AVLakt сказал:

Высоту при этом менять на auto, как написано выше?

 

Нет. Еще можете скрыть изображение справа для мобильных устройств, чтобы кнопочки были большего размера. Для этого к <td rowspan="6"> добавьте класс hidden-xs

[kwakin]

Вашу затею надо было делать вот этим

СТЕНА КАТЕГОРИЙ

[halfhope]

6 минут назад, kwakin сказал:

Вашу затею надо было делать вот этим

СТЕНА КАТЕГОРИЙ

 

ТС в курсе вариантов решений. Но решил пойти своим путем. 

 

[AVLakt]

7 часов назад, kwakin сказал:

Вашу затею надо было делать вот этим

СТЕНА КАТЕГОРИЙ

можно подробнее? вроде понимаю о чем идет речь, но в этом варианте нельзя использовать все особенности фотошопа, как мне кажется

[kwakin]

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

можно подробнее? вроде понимаю о чем идет речь, но в этом варианте нельзя использовать все особенности фотошопа, как мне кажется

В поиске задайте Стена категорий opencart

[AVLakt]

10 часов назад, halfhope сказал:

 

Нет. Еще можете скрыть изображение справа для мобильных устройств, чтобы кнопочки были большего размера. Для этого к <td rowspan="6"> добавьте класс hidden-xs

угу, спасибо, помоголо

Змінено 10 квітня 2021 користувачем AVLakt
комментарий

[AVLakt]

11 часов назад, halfhope сказал:

 

Нет. Еще можете скрыть изображение справа для мобильных устройств, чтобы кнопочки были большего размера. Для этого к <td rowspan="6"> добавьте класс hidden-xs

а можете еще подсказать как нижний баннер разместить по центру страницы? почему-то не могу заголовок центрировать, если ставлю значения width="100%" height="100%". иконки растягиваются по странице, а заголовок остается выравненным по левому краю..

[KomissarJuve]

23 минуты назад, AVLakt сказал:

а можете еще подсказать как нижний баннер разместить по центру страницы? почему-то не могу заголовок центрировать, если ставлю значения width="100%" height="100%". иконки растягиваются по странице, а заголовок остается выравненным по левому краю..

квакин правильный совет дал

[AVLakt]

44 минуты назад, KomissarJuve сказал:

квакин правильный совет дал

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

Змінено 10 квітня 2021 користувачем AVLakt
...

[AVLakt]

В 10.04.2021 в 11:16, halfhope сказал:

 

Нет. Еще можете скрыть изображение справа для мобильных устройств, чтобы кнопочки были большего размера. Для этого к <td rowspan="6"> добавьте класс hidden-xs

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

[kwakin]

Вам уже 1000 раз сказали

Стена категорий

Витрина категорий

То что у вас это страшно

[AVLakt]

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

Вам уже 1000 раз сказали

Стена категорий

Витрина категорий

То что у вас это страшно

 

и что такого страшного в этом (конкретно во-первых.., во-вторых.. и т.д.)? я уже писал выше, что предложенный вариант меня НЕ УСТРОИЛ. и просьба не писать снова что есть только один путь и точка. я попросил ответить на КОНКРЕТНЫЙ вопрос по реализации, а не твердить, что нужно все разломать и переделать заново. благодарю за понимание.

Змінено 26 квітня 2021 користувачем AVLakt

[Tom]

Ерундой вы какой то занимаетесь, а не поиском решения.

Зачем там вообще картинки , если они выводят кнопки ? Зачем при наличии бутстрап табличная верстка?

 

1 . Открываете любую удобную документацию по бутстрапу, находите раздел Grid

https://getbootstrap.com/docs/4.0/layout/grid/

Копируете готовый код, для трёх колонок.

<div class="row">
  <div class="my_class">
    <div class="col-md-4">
      Здесь будут кнопки-ссылки
    </div>
    <div class="col-md-4">
      Здесь будут кнопки-ссылки
    </div>
    <div class="col-md-4">
      Здесь будет картинка
    </div>
  </div>
</div>

 

2 . Далее ищем документацию по кнопкам :
https://getbootstrap.com/docs/4.0/components/buttons/

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

 

<a class="btn btn-primary" href="ваша_ссылка" role="button">Название кнопки</a>

 

3 . Далее ищите там же , например список (ul>li) и находим немаркированный список  :

https://getbootstrap.com/docs/4.0/components/list-group/

 

   <ul class = "list-unstyled">          

      <li>Сюда ранее созданную кнопку</li>          

      <li>Сюда ранее созданную кнопку</li>          

      <li>Сюда ранее созданную кнопку</li>          

      <li>Сюда ранее созданную кнопку</li>

      <li>Сюда ранее созданную кнопку</li>  

      <li>Сюда ранее созданную кнопку</li>        

  </ul>

4. Всё. Останется немного добавить кастомных стилей css.

 

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

Переделать по моему описанию, это минут 30 работы.

[AVLakt]

22 часа назад, Tom сказал:

Ерундой вы какой то занимаетесь, а не поиском решения.

Зачем там вообще картинки , если они выводят кнопки ? Зачем при наличии бутстрап табличная верстка?

 

1 . Открываете любую удобную документацию по бутстрапу, находите раздел Grid

https://getbootstrap.com/docs/4.0/layout/grid/

Копируете готовый код, для трёх колонок.

<div class="row">
  <div class="my_class">
    <div class="col-md-4">
      Здесь будут кнопки-ссылки
    </div>
    <div class="col-md-4">
      Здесь будут кнопки-ссылки
    </div>
    <div class="col-md-4">
      Здесь будет картинка
    </div>
  </div>
</div>

 

2 . Далее ищем документацию по кнопкам :
https://getbootstrap.com/docs/4.0/components/buttons/

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

 

<a class="btn btn-primary" href="ваша_ссылка" role="button">Название кнопки</a>

 

3 . Далее ищите там же , например список (ul>li) и находим немаркированный список  :

https://getbootstrap.com/docs/4.0/components/list-group/

 

   <ul class = "list-unstyled">          

      <li>Сюда ранее созданную кнопку</li>          

      <li>Сюда ранее созданную кнопку</li>          

      <li>Сюда ранее созданную кнопку</li>          

      <li>Сюда ранее созданную кнопку</li>

      <li>Сюда ранее созданную кнопку</li>  

      <li>Сюда ранее созданную кнопку</li>        

  </ul>

4. Всё. Останется немного добавить кастомных стилей css.

 

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

Переделать по моему описанию, это минут 30 работы.

перестал ею заниматься. подскажите пож 1) как изменить цвет кнопки СМОТРЕТЬ ВСЕ? прописал в Свои стили и скрипты 

.orange-background {background-color:#FF904F;}
.white {color:#ffffff;}

и к кнопке 

<a class="btn btn-primary btn-block btn-lg orange-background white" href="https://эспрессомашины.рф/katalog/" role="button">СМОТРЕТЬ ВСЕ</a>

 

2) и еще подскажите пож как сделать разделение между столбцами с кнопками при просмотре на мобильном? получается, что два столбца "слепливаются" при вертикальной ориентации, когда средний столбец оказывается под первым

[Tom]

У вас всем кнопкам , задан цвет и фон в файле catalog/view/theme/revolution/stylesheet/stylesheet_min.css

Там же какой то ад понаверчен, с добавлением в стили css и скриптов и вёрстки с дивами.

Спойлер

<!-- Marquiz script start --><script src="//script.marquiz.ru/v1.js"></script><script>document.addEventListener("DOMContentLoaded", function() { Marquiz.init({   id:'5bc5835aa606740044ec346d',   autoOpen:false,   openOnExit:false  });});</script><!-- Marquiz script end --><div class="marquiz__container"> <a class="marquiz__button marquiz__button_blicked marquiz__button_rounded marquiz__button_shadow marquiz__button_fixed marquiz__button_fixed-left" href="#popup:marquiz_5bc5835aa606740044ec346d" data-fixed-side="left" data-alpha-color="null" data-color="#714023" data-text-color="#ffffff">Скидка за теÑÑ‚!</a></div>

Убирайте всю эту ересь.

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

https://getbootstrap.com/docs/4.0/components/buttons/

Как вариант, вместо btn-primary задайте btn-warning это подключит фон и цвет по умолчанию, а далее вы обыграете кнопку в стилях.

Классы кнопок :
btn-primary

btn-secondary

btn-success

btn-danger

btn-warning

btn-info

btn-light

btn-dark

 

Ну и вот это

В 26.04.2021 в 14:17, Tom сказал:

<div class="my_class">

Я же написал как пример. Вы должны немного проявить самостоятельности и не копипастить всё один в один.

Присвойте класс по нормальному, что то типа "<div class="category_list">, после чего обыграйте кнопку в css

.category_list .btn-warning{

      ваши css правила 

}

 

2. Не увидел проблем таких в мобильной версии.

[AVLakt]

47 минут назад, Tom сказал:

У вас всем кнопкам , задан цвет и фон в файле catalog/view/theme/revolution/stylesheet/stylesheet_min.css

Там же какой то ад понаверчен, с добавлением в стили css и скриптов и вёрстки с дивами.

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

<!-- Marquiz script start --><script src="//script.marquiz.ru/v1.js"></script><script>document.addEventListener("DOMContentLoaded", function() { Marquiz.init({   id:'5bc5835aa606740044ec346d',   autoOpen:false,   openOnExit:false  });});</script><!-- Marquiz script end --><div class="marquiz__container"> <a class="marquiz__button marquiz__button_blicked marquiz__button_rounded marquiz__button_shadow marquiz__button_fixed marquiz__button_fixed-left" href="#popup:marquiz_5bc5835aa606740044ec346d" data-fixed-side="left" data-alpha-color="null" data-color="#714023" data-text-color="#ffffff">Скидка за теÑÑ‚!</a></div>

Убирайте всю эту ересь.

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

https://getbootstrap.com/docs/4.0/components/buttons/

Как вариант, вместо btn-primary задайте btn-warning это подключит фон и цвет по умолчанию, а далее вы обыграете кнопку в стилях.

Классы кнопок :
btn-primary

btn-secondary

btn-success

btn-danger

btn-warning

btn-info

btn-light

btn-dark

 

Ну и вот это

Я же написал как пример. Вы должны немного проявить самостоятельности и не копипастить всё один в один.

Присвойте класс по нормальному, что то типа "<div class="category_list">, после чего обыграйте кнопку в css

.category_list .btn-warning{

      ваши css правила 

}

 

2. Не увидел проблем таких в мобильной версии.

Этот ад - это квиз когда-то на сайте стоял, сейчас выключен. по второму вопросу см вложение

[Tom]

2 часа назад, AVLakt сказал:

по второму вопросу см вложение

И что не так?

[AVLakt]

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

И что не так?

разве кнопки должны сливаться? я думаю, что они должны быть на одинаковом расстоянии при вертикальном просмотре на мобильном, разве нет? во втором списке они вообще сливаются в темное пятно и не понятно, что это кнопки

Змінено 27 квітня 2021 користувачем AVLakt