Sign in to follow this  
xayleks

Верстка CSS меню

Recommended Posts

Доброго всем вечера!

Возникла проблема при верстке меню средствами html и CSS без использования фоновых картинок.

В приведенном ниже изображении первая ссылка находится в обычном состоянии, а вторая в состоянии hover.

В принципе сам вопрос в том как сделать полоски идущие по верхней и нижней границе меню, как я понял свойством border так не обрисовать ибо полосы идут чуть ниже границы.

Прошу помощи!

d4b9a6a62023.png

Share this post


Link to post
Share on other sites

Еще зависит от того, какой левый и правый край у всего меню. Но вообще, если забыть про них, то можно на li повешать фон и при наведении на li менять цвет фона, а ссылку сделать блочной, прописать ей бордеры и тоже изменять цвет, при наведении на ссылку. Нижние части «фиолетового» фона не будут ссылками, но там пару пикселей, не заметно даже.

Share this post


Link to post
Share on other sites

Можно эти линии сделать через псевдоэлементы элемента ul.

ul:before применить к верхней линии, а ul:after к нижней.

Share this post


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
Sign in to follow this  

  • Member Statistics

    46,434
    Total Members
    3,128
    Most Online
    Sterben
    Newest Member
    Sterben
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Если свойства нет в спецификации, то откуда его возьмет браузер? Даже если в каком то одном из браузеров введут это свойство то смысла его использовать все-равно не будет, так как в остальных оно работать не будет 🙂   Тогда бардак творился, DHTML, разные объектные модели и все дела. У netscape действительно была такая фича. Хотя не факт что она работала. Вот тут https://www.uv.es/jordi/v3/html/dynhtml/dynamic.pdf можно увидеть что float:center; присутствует в коде, но следом написано что элементы можно выровнять с помощью float слева или справа, или с помощью js по центру. Также в книге указаны допустимые значения для float - left, right, none. Так что это скорее всего была запланированная возможность, которая не получила реализации.
    • Если бы с html и css, все браузеры строго соответствовали спецификациям) Да статье около десятка лет, а то и более. Вот я тоже склоняюсь к тому, что это ошибка. но эта лекция была написана даже с учётом ещё живого на тот момент netscape navigator. Может быть он позволял интерпретировать такую конструкцию. В описании автор указывает, что так блок становится обтекаемым с двух сторон.
    • Может с clear путаете? Или в статье спутали. Наверно, древняя?
      http://htmlbook.ru/css/clear
  • Popular Contributors