Автор Тема: Отображение текста справа от картинки  (Прочитано 788 раз)

29 Сентябрь 2022, 21:58:19
  • Пользователь
  • **
  • Сообщений: 75
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Здравствуйте друзья.
Если позволите небольшой вопрос - скорее по html (для престы).
Использую PrestaShop 1.7.0.5 .
Перепробовал тучу разных примеров из интернета, но проблема осталась.
Очень хотелось после картинки отображать текст.
Иногда сайт отображает правильно, иногда нет (картинка "убегает" то вниз, то вправо. Хотя после обновлени F5 , вновь отображается правильно)
Приведу примеры на картинке - и в тексте если можно.
Друзья буду очень вам благодарен если поможете исправить отображение .
Этот код я использую для того, чтобы отображать текст слева от картинки.
---
<table>
    <tr>
       
        <td>
                 

<p>
<img src="../shablon/spirulinasw.png"  width="60" align="middle"/>
<font   size=3 color=black><b>180 tablets.</b> </font>
</p>
               
 
        </td>
    </tr>
</table>

---
Если убрать
<table>
    <tr>
       
        <td>

тогда положение еще булоее усугубляется.
30 Сентябрь 2022, 11:59:40
Ответ #1
  • Ветеран
  • *****
  • Сообщений: 16670
  • Репутация: +14630/-5
  • Сообщество PrestaShop
    • Просмотр профиля
Первый вариант, с помощью float
https://html5book.ru/obtekanie-kartinki-tekstom/
Второй вариант, с использованием position:relative для блока, картинке задать position:absolute; top:Хpx; left:Хpx;
30 Сентябрь 2022, 15:07:21
Ответ #2
  • Пользователь
  • **
  • Сообщений: 75
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Огромное спасибо друг ! Так как это все на PrestaShop я как особо не сведующий могу добавить код только на Html.
Если не затруднит относительно второго варианта, очень вас  прошу покажите небольшой пример на html - буду вам очень признателен .
01 Октябрь 2022, 11:59:51
Ответ #3
  • Ветеран
  • *****
  • Сообщений: 16670
  • Репутация: +14630/-5
  • Сообщество PrestaShop
    • Просмотр профиля
Стили создайте в файле theme.css
Тема у вас на bootsrap? Тогда там уже есть эти стили. Нужно добавить классы в шаблон
<div class="container position-relative">
<img class="img-fluid position-absolute" .....>
<p>Текст</p>
</div>
01 Октябрь 2022, 15:32:43
Ответ #4
  • Пользователь
  • **
  • Сообщений: 75
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля