Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

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


Recommended Posts

Здравствуйте, есть 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 -->

Edited by AVLakt
добавлен код
Link to post
Share on other sites

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

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

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

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

Link to post
Share on other sites

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

height: auto;

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

Link to post
Share on other sites

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

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

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

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

Link to post
Share on other sites

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

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

height: auto;

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

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

Link to post
Share on other sites

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

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

 

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

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

 

  • +1 1
Link to post
Share on other sites

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

 

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

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

 

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

Link to post
Share on other sites

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

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

 

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

  • +1 1
Link to post
Share on other sites

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

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

Link to post
Share on other sites

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

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

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

 

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

 

Link to post
Share on other sites

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

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

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

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

Link to post
Share on other sites

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

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

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

Link to post
Share on other sites

Posted (edited)
10 часов назад, halfhope сказал:

 

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

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

Edited by AVLakt
комментарий
Link to post
Share on other sites

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

 

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

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

Link to post
Share on other sites

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

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

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

Link to post
Share on other sites

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

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

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

Edited by AVLakt
...
Link to post
Share on other sites

  • 3 weeks later...
В 10.04.2021 в 11:16, halfhope сказал:

 

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

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

Link to post
Share on other sites

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

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

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

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

Link to post
Share on other sites

Posted (edited)
1 час назад, kwakin сказал:

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

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

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

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

 

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

Edited by AVLakt
Link to post
Share on other sites

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

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

 

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 работы.

Link to post
Share on other sites
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) и еще подскажите пож как сделать разделение между столбцами с кнопками при просмотре на мобильном? получается, что два столбца "слепливаются" при вертикальной ориентации, когда средний столбец оказывается под первым

Link to post
Share on other sites

У вас всем кнопкам , задан цвет и фон в файле 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. Не увидел проблем таких в мобильной версии.

Link to post
Share on other sites
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. Не увидел проблем таких в мобильной версии.

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

Безымянный.png

Link to post
Share on other sites

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

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

И что не так?

Link to post
Share on other sites
Posted (edited)
1 час назад, Tom сказал:

И что не так?

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

Edited by AVLakt
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

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.