html горизонтально неупорядоченный список-переопределение prestashop

html горизонтально неупорядоченный список-переопределение prestashop

16.03.2019 04:15:18 Просмотров 13 Источник

Я пытаюсь сделать таблицу html или список ul, чтобы иметь отзывчивую галерею изображений с текстом (ссылками) под ними. Я делаю это на странице CMS из prestashop через редактирование страницы в исходном коде.

Я не мог разобраться с таблицами, потому что prestashop si переписывает правила и не может понять, кто из них это делает.

Вот ссылка на таблицу один: https://centrul-de-publicitate.ro/ro/content/12-cataloage Кажется, что он работает на рабочем столе, но не показывает хорошо на мобильном телефоне. Стол здесь неправильный.

Следующим шагом была попытка составить список из Уля и Ли. Я взял пример отсюда https://centrul-de-publicitate.ro/ro/68-tipar-digital-offsset где находятся список подкатегорий и будучи от темы они показывают хорошо.

Страница, которую я тестирую, находится здесь: https://centrul-de-publicitate.ro/ro/content/13-portofoliu

Я попытался использовать 1 div с классом="подкатегории" потом добавил в DIV с классом="ряд". Но никто не унаследовал prestashop css, чтобы сделать мой список показанным как родной. Мой список привязан к вертикали.

Кроме того, не лучше ли сделать ul вместо стола для этой галереи? Мне нужно 2 страницы с этим типом простых галерей с не более чем 50 картин я думаю. Это не фотогалерея. В каталоге он должен показывать каталоги со ссылками на картинки в формате pdf и текст со ссылкой на прайс-лист.

Использовать коды:

<div class="row">
<div id="subcategories">
  <ul class="clearfix">
    <li>
      <div class="subcategory-image">
        <a href="https://centrul-de-publicitate.ro/ro/59-imbracaminte" title="IMBRACAMINTE" class="img">
          <img class="replace-2x" src="https://centrul-de-publicitate.ro/img/cms/Accesorii_imbracaminte_subcategorie.jpg" alt="CATALOG 1">
        </a>
      </div>
    <h5>
      <a class="subcategory-name" href="https://centrul-de-publicitate.ro/ro/69-print" title="PRINT">PRINT</a>
    </h5>
      <div class="cat_desc"><p>IMBRACAMINTE</p></div>
    </li>
    <li>
      <div class="subcategory-image">
        <a href="https://centrul-de-publicitate.ro/ro/59-imbracaminte" title="IMBRACAMINTE" class="img">
          <img class="replace-2x" src="https://centrul-de-publicitate.ro/img/cms/Imbracaminte_vara_subcategorie.jpg" alt="CATALOG 1">
        </a>
      </div>
    <h5>
      <a class="subcategory-name" href="https://centrul-de-publicitate.ro/ro/69-print" title="PRINT">PRINT</a>
    </h5>
      <div class="cat_desc"><p>IMBRACAMINTE</p></div>
    </li>
      <li>
      <div class="subcategory-image">
        <a href="https://centrul-de-publicitate.ro/ro/59-imbracaminte" title="IMBRACAMINTE" class="img">
          <img class="replace-2x" src="https://centrul-de-publicitate.ro/img/cms/Imbracaminte_sport_subcategorie.jpg" alt="CATALOG 1">
        </a>
      </div>
    <h5>
      <a class="subcategory-name" href="https://centrul-de-publicitate.ro/ro/69-print" title="PRINT">PRINT</a>
    </h5>
      <div class="cat_desc"><p>IMBRACAMINTE</p></div>
    </li>
      <li>
      <div class="subcategory-image">
        <a href="https://centrul-de-publicitate.ro/ro/59-imbracaminte" title="IMBRACAMINTE" class="img">
          <img class="replace-2x" src="https://centrul-de-publicitate.ro/img/cms/Imbracaminte_iarna_subcategorie.jpg" alt="CATALOG 1">
        </a>
      </div>
    <h5>
      <a class="subcategory-name" href="https://centrul-de-publicitate.ro/ro/69-print" title="PRINT">PRINT</a>
    </h5>
      <div class="cat_desc"><p>IMBRACAMINTE</p></div>
    </li>




  </ul>
</div>
</div>

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

У вопроса есть решение - Посмотреть?

Ответы - html горизонтально неупорядоченный список-переопределение prestashop / html horizontally unordered list - override by prestashop

Является ответом!
Ifaruki

16.03.2019 06:56:27

попробуй может быть:

<style> ul { display: flex; } </style>

или еще лучше:

<style> .clearfix { display: flex; } </style>
https://stackoverflow.com/questions/55197233/html-horizontally-unordered-list-override-by-prestashop/55198669#comment97139320_55198669
Он работал для горизонтального выравнивания. Но есть еще вопросы. Я добавил следующий код для ul (в prestashop global.в CSS): .clearfix-БМС { дисплей: гибкий; маржи-левой:3ем; } .cat_desc-БМС { дисплей: нет; } 1. Между ними нет никакого пространства. Я попробовал с запасом-слева сверху. Это не сработало и с прокладкой... Движется все как одна группа. 2. На мобильном все еще плохо смотрится. Не реагирует... я предполагаю, что не возьму css из prestashop именно там, где мне это нужно...
https://stackoverflow.com/questions/55197233/html-horizontally-unordered-list-override-by-prestashop/55198669#comment97139849_55198669
Вы можете попробовать с display: grid и добавить второе свойство grid-template-columns: auto auto auto auto; теперь у вас будет 4 строки, чтобы сделать его отзывчивым добавьте некоторые медиа-запросы, например, только 3 строки grid-template-columns: auto auto auto затем для 2 строк используйте 2x auto для 1 строки 1 auto
https://stackoverflow.com/questions/55197233/html-horizontally-unordered-list-override-by-prestashop/55198669#comment97140821_55198669
Я попробовал, и это работает. Но я не могу понять, как разместить пространство между элементами. Они прилипли друг к другу.
https://stackoverflow.com/questions/55197233/html-horizontally-unordered-list-override-by-prestashop/55198669#comment97142151_55198669
Просто делать .clearfix li { margin: 10px;}
https://stackoverflow.com/questions/55197233/html-horizontally-unordered-list-override-by-prestashop/55198669#comment97142185_55198669
С помощью свойства "margin" вы можете добавить пространство вокруг объекта
https://stackoverflow.com/questions/55197233/html-horizontally-unordered-list-override-by-prestashop/55198669#comment97142578_55198669
хм, время от времени это кажется нормальным. Я полагаю, что это кэш prestashop с проблемами... Я получил в какой-то момент правильный вид на мобильном телефоне и на рабочем столе тоже. Я попробую завтра с чистым тайником. У меня есть css следующим образом:
https://stackoverflow.com/questions/55197233/html-horizontally-unordered-list-override-by-prestashop/55198669#comment97142591_55198669
".clearfix-bms-flex { display: flex; margin-left:3em;} .clearfix-БМС-решетки { дисплей: сетка; Сетка-шаблон-столбцы: Авто Авто Авто Авто; маржи-нижней: 20 пикселей; ширина: 95%; обивка-слева: -15px; обивка-право: -15px; } @медиа (Макс-ширина: 768px по) { .clearfix-bms-grid { grid-template-columns: auto;} } .clearfix-БМС-сетки литий{ обивка-слева: -15px; обивка-право: -15px; маржа: значение 10px; } .cat_desc-БМС { дисплей: нет; } `
https://stackoverflow.com/questions/55197233/html-horizontally-unordered-list-override-by-prestashop/55198669#comment97147182_55198669
Вы можете отключить кэш для разработки
https://stackoverflow.com/questions/55197233/html-horizontally-unordered-list-override-by-prestashop/55198669#comment97148068_55198669
вот краткое руководство по отключению кэша в google chrome... technipages.com/google-chrome-how-to-completely-disable-cache
https://stackoverflow.com/questions/55197233/html-horizontally-unordered-list-override-by-prestashop/55198669#comment97153392_55198669
Кажется, это работает. Я использую firefox для работы на веб-сайтах. А проблема с кэшем - из prestashop. Мне нужно включить / отключить интеллектуальный кэш для CSS от производительности для мгновенных модификаций css. Но это уже что-то от хостинга, от того, что я вижу. После 10-15 часов он работает нормально. Таким образом, этот последний ответ помог сделать список хорошо работать на настольных компьютерах и мобильных устройствах тоже. С новыми классами, которые я добавил, и вашими настройками css это работает сейчас. Я пойду с реальными фотографиями и ссылками и вернусь, если у меня будут другие вопросы. Большое спасибо за ваши решения.
https://stackoverflow.com/questions/55197233/html-horizontally-unordered-list-override-by-prestashop/55198669#comment97154407_55198669
Нет проблем, я здесь, чтобы помочь
https://stackoverflow.com/questions/55197233/html-horizontally-unordered-list-override-by-prestashop/55198669#comment97155237_55198669
Я еще не могу голосовать, поэтому вернусь, когда смогу это сделать. Мне нужно больше репутации. ;-)
https://stackoverflow.com/questions/55197233/html-horizontally-unordered-list-override-by-prestashop/55198669#comment97155611_55198669
У вас есть только 1 медиа-запрос, который я вижу, но вы можете добавить 3 из 4 строк в 3, 2 и 1 . Вы сжимаете свой экран и смотрите, насколько вы можете сжать его, пока ваш img почти не коснется границы устройства , затем вы делаете там свой первый медиа-запрос для grid-template-columns: auto auto auto; затем вы продолжаете сжимать свой сайт, пока ваш img почти не коснется границы экрана, затем добавляете туда другой медиа-запрос для grid-template-columns: auto auto; anf и так далее....
https://stackoverflow.com/questions/55197233/html-horizontally-unordered-list-override-by-prestashop/55198669#comment97159526_55198669
Да, я видел это, и я установил линейку, чтобы видеть размеры при изменении размера окна (я использовал инспектор для проверки smth) ;-). Я думаю, что сделаю для 2 или 3 столбцов, но пока не знаю, для каких резолюций... Наиболее важным является то, что я сделал это работать.
Закрыть X