1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

[Помогите] OpenCart пытаюсь натянуть дизайн из PSD макета

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Сергей Сергеевич, 24 июл 2017.

  1. Сергей Сергеевич

    Сергей Сергеевич

    Регистрация:
    24 июл 2017
    Сообщения:
    5
    Симпатии:
    0
    Проблема в том, что верхнее меню из-за длинных названий категории начинает дублить картинку кнопки вправо, как с этим бороться? Скрин прилагаю. [​IMG]
     
  2. Perat

    Perat

    Регистрация:
    27 окт 2015
    Сообщения:
    115
    Симпатии:
    26
    доброго, используйте
    Код:
        background-repeat: no-repeat;
     
  3. Сергей Сергеевич

    Сергей Сергеевич

    Регистрация:
    24 июл 2017
    Сообщения:
    5
    Симпатии:
    0
    странно я так и думал, но не сработало
    > a {
    color: #fff;
    display: block;
    font-size: 24px;
    height: 45px;
    margin-bottom: 0;
    padding-left: 25px;
    padding-top: 20px;
    position: relative;
    z-index: 6;
    background-repeat: no-repeat;
    --- Добавлено, 24 июл 2017 ---
    Может быть дело в том что задаётся конкретный размер бг и его не хватает? Может сделать кнопку через репит паттерном? Только как узнать сколько делать репитов на каждую кнопку они же будут разного количества штук.
     
  4. spy

    spy

    Регистрация:
    15 янв 2013
    Сообщения:
    468
    Симпатии:
    137
    1) background-repeat: нужно писать на элемент где картинка, а не на ссылку(а)
    2) так как элементы меню разной длины то для каждого пункта своя длина кнопки(бэкграунда) должна быть
     
  5. Сергей Сергеевич

    Сергей Сергеевич

    Регистрация:
    24 июл 2017
    Сообщения:
    5
    Симпатии:
    0
    ага, т.е. я сейчас сделаю 5-6 кнопок шириной подгоняя под текст корректно, ну попробую, спасибо!
     
  6. Perat

    Perat

    Регистрация:
    27 окт 2015
    Сообщения:
    115
    Симпатии:
    26
  7. Сергей Сергеевич

    Сергей Сергеевич

    Регистрация:
    24 июл 2017
    Сообщения:
    5
    Симпатии:
    0
    Нереальное спасибо! Супер вот такой тонкости
    background: repeating-linear-gradient( 135deg,
    #ea3d40, #ea3d40 .1em,
    я не знал в принципе!
    --- Добавлено, 27 июл 2017 ---
    Вот что у меня получилось, я добавил эту структуру не на а, а на li
    [​IMG]
    Но теперь мне стало интересно, как оставить такой эффект на одном элементе списка, а остальные были бы простыми ссылками, до того момента пока туда не перейдёшь.
    Вычитал про псевдо класс hover который работает при наведении, а есть ли псевдо класс так сказать на нажатый элемент списка?
    [​IMG]
    Как например вот здесь
    [​IMG]
     
  8. Perat

    Perat

    Регистрация:
    27 окт 2015
    Сообщения:
    115
    Симпатии:
    26
    Рад что подошло
    Псевдокласс :active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
     
  9. Сергей Сергеевич

    Сергей Сергеевич

    Регистрация:
    24 июл 2017
    Сообщения:
    5
    Симпатии:
    0
    При нажатии да стиль меняется, но потом пропадает снова, ему что-то может мешать? Эффект как будто бы я не остался в выбранной категории, верхнее меню игнорирует позицию, хотя в категории я нахожусь.
    --- Добавлено, 28 июл 2017 ---
    active делает свою работу только когда кнопка нажата, как только я отжимаю мышь стиль пропадает
    --- Добавлено, 28 июл 2017 ---
    вот сам сайт, может кто поможет глядя так сказать по месту: http://toys-land.com.ua/index.php?route=common/home
     
  10. Perat

    Perat

    Регистрация:
    27 окт 2015
    Сообщения:
    115
    Симпатии:
    26
    Значит искать решение через, js или пхп. Есть еще псевдокласс :visited применяется к ссылкам, уже посещённым пользователем, и задаёт для них стилевое оформление,
    но к посещенным ссылкам могут применяться только следующие свойства:


    ps Сделайте на каждой странице странице добавление класса к необходимому элементу меню
    Например
    На странице Ноутбуки
    Код:
    <ul class="sf-menu sf-js-enabled sf-shadow">
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=20" class="sf-with-ul">Настольные ПК</a>
    
    <ul style="display: none; visibility: hidden;">
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=26">PC</a>
    </li>
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=27">Mac</a>
    </li>
    
    </ul>
    
    </li>
        <li class="topactive sf-with-ul">Ноутбуки
    
    <ul style="display: none; visibility: hidden;">
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=46">Macs</a>
    </li>
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=45">Windows</a>
    </li>
    
    </ul>
    
    </li>
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=25" class="sf-with-ul">Компоненты</a>
    
    <ul style="display: none; visibility: hidden;">
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=32">Вем-камеры</a>
    </li>
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=28" class="parent sf-with-ul">Мониторы</a>
    <ul>
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=35">Тест 1</a>
    </li>
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=36">Тест 2</a>
    </li>
    
    </ul>
    
    </li>
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=29">Мыши и трекболы</a>
    </li>
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=30">Принтеры</a>
    </li>
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=31">Сканеры</a>
    </li>
    
    </ul>
    
    </li>
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=57">Планшеты</a>
    
    </li>
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=24">Телефоны &amp; КПК</a>
    
    </li>
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=33">Камеры</a>
    
    </li>
        <li class="">
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=34" class="sf-with-ul">MP3 Плееры</a>
    
    <ul style="display: none; visibility: hidden;">
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=43">Тест 11</a>
    </li>
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=44">Тест 12</a>
    </li>
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=47">Тест 15</a>
    </li>
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=48">Тест 16</a>
    </li>
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=49">Тест 17</a>
    </li>
    
    </ul>
    <ul style="display: none; visibility: hidden;">
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=50">Тест 18</a>
    </li>
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=51">Тест 19</a>
    </li>
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=52" class="parent sf-with-ul">Тест 20</a>
    <ul>
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=58">Тест 25</a>
    </li>
    
    </ul>
    
    </li>
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=53">Тест 21</a>
    </li>
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=54">Тест 22</a>
    </li>
    
    </ul>
    <ul style="display: none; visibility: hidden;">
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=55">Тест 23</a>
    </li>
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=56">Тест 24</a>
    </li>
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=38">Тест 4</a>
    </li>
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=37">Тест 5</a>
    </li>
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=39">Тест 6</a>
    </li>
    
    </ul>
    <ul style="display: none; visibility: hidden;">
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=40">Тест 7</a>
    </li>
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=41">Тест 8</a>
    </li>
    
        <li>
    <a href="http://toys-land.com.ua/index.php?route=product/category&amp;path=42">Тест 9</a>
    </li>
    
    </ul>
    
    </li>
    
    </ul>
    
    
    
    <style>.topactive  {  padding: 1px 2px 0px 4px;
        display: inline-block;
        font-size: 24px;
        margin: 5px;
        background: repeating-linear-gradient( 135deg,
     #ea3d40, #ea3d40 .1em,
     transparent .3em, transparent .3em);
        background-color: #f44e50;
        color: #fed038;
        line-height: 1.1em;
        border: 2px dashed #fff;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-box-shadow: 0 0 0 4px #f44e50, 2px 1px 4px 4px rgba(10,10,0,.5);
        -webkit-box-shadow: 0 0 0 4px #f44e50, 2px 1px 4px 4px rgba(10,10,0,.5);
        box-shadow: 0 0 0 4px #f44e50;
     position: relative;
        font-family: EpsilonCTT;
        z-index: 1000;}
    </style>
     
    Последнее редактирование: 28 июл 2017