1 Тема від budun

  • budun
  • Користувач
  • Поза форумом
  • Дата реєстрації: 17.09.2015
  • Повідомлень: 1
    • Репутація: 0

Тема: Допоможіть подкорректувати меню

Це меню для анкорів.
Потрібно перед кнопкою СТАНДАРТ прибрати вертикальний бордер.
Або-ж реалізувати бордери між кнопками по іншому.

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>

CSS

.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 {
border-right: solid 1 px #cccccc;
padding: 6px 10px 6px 10px;
font-weight: bold;
background: #ddd;
color: #ffffff;
border-radius:20px;
}

Ось варіант онлайн редактора

http://codepen.io/pen/

http://cssdeck.com/labs

2 Відповідь від P.Y. Востаннє редагувалося P.Y. (17.09.2015 22:35:07)

  • P.Y.
  • P.Y.
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 19.02.2013
  • Повідомлень: 7 347
    • Репутація: 4813

Re: Допоможіть подкорректувати меню

[code=css].anchors li:first-child>a:before
    {
    content:"";
    padding-right:0;
    }
[/code]

3 Відповідь від P.Y.

  • P.Y.
  • P.Y.
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 19.02.2013
  • Повідомлень: 7 347
    • Репутація: 4813

Re: Допоможіть подкорректувати меню

Взагалі-то, бордери краще розмістити за межами області, що підсвічується при наведенні. Для цього достатньо замінити дескриптори:
.anchors > li > a:before на .anchors > li:before
.anchors li:first-child>a:before на .anchors li:first-child:before
Ну й падинги підправити, щоб сепаратори йшли симетрично між посиланнями.

Подякували: Сергій781

4 Відповідь від Key

  • Key
  • Key
  • Користувач
  • Поза форумом
  • Звідки: Lviv
  • Дата реєстрації: 27.12.2013
  • Повідомлень: 125
    • Репутація: 85

Re: Допоможіть подкорректувати меню

.anchors {
  background:#FFECB2;
  border-radius:20px;
  display:inline-block;
  list-style: none;
  width: 100%;
  display: table;
  table-layout:fixed;
  box-sizing: border-box;
}
.anchors li{
  display: table-cell;
  border-right:1px solid #333;
  text-align: center;
}
.anchors li:last-of-type{
  border:none;
}
.anchors li a{
    display: inline-block;
    padding: 10px 50px;
}
.anchors li a:hover{
  background: #000;
  border-radius:20px;
}

спробуй
я не став розбиратися в твоєму "code" так я вставляти по шматочку не э доцільним, вчіться писати руками тільки тоді буде ТОЛК =)