Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

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


 Поделиться

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

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

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


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

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

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

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

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


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

height: auto;

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

  • +1 1
Ссылка на комментарий
Поделиться на других сайтах

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

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

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

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

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


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

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


height: auto;

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

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

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


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

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

 

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

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

 

  • +1 1
Ссылка на комментарий
Поделиться на других сайтах

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

 

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


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

 

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

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


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

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

 

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

  • +1 1
Ссылка на комментарий
Поделиться на других сайтах

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

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

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

 

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

 

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

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

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

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

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

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


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

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

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

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


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

 

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

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

Изменено пользователем AVLakt
комментарий
Ссылка на комментарий
Поделиться на других сайтах


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

 

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

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

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


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

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

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

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


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

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

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

Изменено пользователем AVLakt
...
Ссылка на комментарий
Поделиться на других сайтах


  • 3 недели спустя...
В 10.04.2021 в 11:16, halfhope сказал:

 

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

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

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


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

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

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

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

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

 

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

Изменено пользователем AVLakt
Ссылка на комментарий
Поделиться на других сайтах


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

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

 

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

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

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

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


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

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

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

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


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

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

И что не так?

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

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

И что не так?

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

Изменено пользователем AVLakt
Ссылка на комментарий
Поделиться на других сайтах


Создайте аккаунт или войдите в него для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...

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

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