|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
17.09.2015, 20:20 | #1 |
Пользователь
Регистрация: 30.03.2013
Сообщений: 19
|
Стилизация меню
Помогите подкорректировать меню.
Это меню для анкоров. Нужно перед кнопкой СТАНДАРТ убрать вертикальный бордер. Или-же реализовать бордеры между кнопками по другому. HTML Код HTML:
<ul class="anchors"> <li><a class="anchor1" href="#breed_standard" rel="nofollow">Стандарт</a></li> <li><a class="anchor2" href="#photos" rel="nofollow">Фотографии</a></li> <li><a class="anchor3" href="#video" rel="nofollow">Видео</a></li> <li><a class="anchor4" href="#advert" rel="nofollow">Объявления</a></li> <li><a class="anchor4" href="#comment" rel="nofollow">Комментарии</a></li> </ul> Код HTML:
.anchors { background:#FFECB2; border-radius:20px; display:inline-block!important; list-style: none; /* убираем маркеры списка */ margin:0 0 20px; min-height:36px; padding: 4px 11px 4px 11px; } .anchors a { letter-spacing:2px; content: ""; border-radius:20px; position:relative; font-weight:700; line-height:36px; border-radius:5px; color:#445056; cursor:pointer; font-size:13px; line-height:36px; margin:0 -4px 0 0; padding:0 10px; text-decoration:none; text-transform:uppercase; font-stretch:normal; font-style:normal; font-variant:normal; transition:all 0.2s linear; } .anchors li a { font-family:'PT Sans', sans-serif; text-decoration: none; background: #FFECB2; font-weight: bold; color: #ffaa00; padding: 6px 10px 6px 10px; } .anchors > li > a:before { content: '|'; color: #626262 !important; padding-right: 19px; } .anchors li {display: inline;} .anchors li a:hover { padding: 6px 10px 6px 10px; font-weight: bold; background: #ddd; color: #ffffff; border-radius:20px; } Последний раз редактировалось Budun; 18.09.2015 в 09:17. |
17.09.2015, 22:33 | #2 |
Старожил
Регистрация: 12.11.2010
Сообщений: 8,570
|
Если уж на то пошло...
добавьте стиль: Код HTML:
.anchors > li:first-child > a:before {content: none;} Код:
|
17.09.2015, 23:00 | #3 |
Пользователь
Регистрация: 30.03.2013
Сообщений: 19
|
Спасибо! Получается, первая кнопка идеально.
Но теперь другая проблема, при наведении фон hover, захватывает вертикальный бордер в последующих кнопках! онлайн редактор http://codepen.io/pen/ http://cssdeck.com/labs |
17.09.2015, 23:51 | #4 | |
Старожил
Регистрация: 12.11.2010
Сообщений: 8,570
|
Цитата:
1. Уберите !important 2. уберите строку: border-right: solid 1px #cccccc; 3. Добавьте стиль: Код:
А вообще, я бы посоветовал полностью пересмотреть создание такого меню - Для тега <a> у вас зачем-то установлено свойство content, а также относительное позионирование... Последний раз редактировалось Вадим Мошев; 17.09.2015 в 23:55. |
|
18.09.2015, 18:01 | #5 |
Пользователь
Регистрация: 30.03.2013
Сообщений: 19
|
Если вас не затруднит, может приведете правильный пример с before
А то если честно я в этом полный ноль. |
19.09.2015, 21:56 | #6 |
Старожил
Регистрация: 12.11.2010
Сообщений: 8,570
|
Вот, посмотрите один из вариантов реализации на этом сайте:
http://stroy.it-invest.pro/ Но это не я делал. Правда, здесь не используются before/after, а сделано через border. Может, вам так больше понравится. |
20.09.2015, 00:42 | #7 | |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Цитата:
Чтобы нубики смотрели, куда расти, как мыслить, какие возможности есть. Вот хороший пример. PS. Первый пример плох: у всех элементов, особенно родных и анимирующихс одновременно, должна быть одна перспектива. Сейчас это нравится, потому что новенький ход, а когда пипл свыкнется, им это начнет ломать мозг так же, как мне сейчас.
Alar, верни репу!
Последний раз редактировалось Naive; 20.09.2015 в 00:46. |
|
20.09.2015, 10:48 | #8 | |
Пользователь
Регистрация: 30.03.2013
Сообщений: 19
|
Цитата:
Пример очень классный. Но у меня это не работает. Так как ранее я писал что меню для анкорныых ссылок и вставляется в публикации. |
|
Опции темы | Поиск в этой теме |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Стилизация блока Drupal 7 | kuba1981 | WordPress и другие CMS | 0 | 11.11.2014 09:10 |
Стилизация кнопки Submit | Gift020 | HTML и CSS | 0 | 20.03.2013 14:44 |
Стилизация radiobutton'ов. JQuery | ZvEr_HaCkEr | JavaScript, Ajax | 6 | 12.12.2011 13:23 |
Стилизация Select'а | Radko | HTML и CSS | 0 | 20.01.2011 10:53 |
Стилизация компонентов | Лубышев | Общие вопросы Delphi | 14 | 05.11.2007 21:48 |