Search the Community
Showing results for tags 'after'.
-
добрый день, прописываю следующий код .navbar-nav > li:last-child:after Вопрос можно ли так прописывать ? Хочу задать стили для последнего элемента A > after сайт http://mymoda.com.ua/- верхнее меню, у Мужчины - нет вертикальной черты и последнего элемента Дети тоже нет вертикальной черты - как эти элементам задать через псевдо-селектор стили? приложил скрин http://prntscr.com/ac7y60 Спасибо.
-
Здравствуйте, В ближайшее время я наверное вас замучаю. Мой первый вопрос будет касаться размещения border в псевдоэлементах. Хочу заверстать вот это меню Здесь у кнопок двойная граница (серая и черная). Моей основной проблемой сейчас является разделение кнопок. Пытался сделать с помощью box-shadow, border etc, ничего не получилось. Т.к. разделение кнопок получается суммой двух border, что неправильно. Теперь решил раздвинуть кнопки между собой margin'ом и вставить туда с помощью псевдоэлемента border. Не могу понять почему он становиться ПОД кнопкой. Подскажите, пожалуйста. И вообще, моя стратегия решения верна или есть какая-то альтернатива? Код - http://jsfiddle.net/Lyo0fhk3/
-
Здравствуйте, В ближайшее время я наверное вас замучаю. Мой первый вопрос будет касаться размещения border в псевдоэлементах. Хочу заверстать вот это меню Здесь у кнопок двойная граница (серая и черная). Моей основной проблемой сейчас является разделение кнопок. Пытался сделать с помощью box-shadow, border etc, ничего не получилось. Т.к. разделение кнопок получается суммой двух border, что неправильно. Теперь решил раздвинуть кнопки между собой margin'ом и вставить туда с помощью псевдоэлемента border. Не могу понять почему он становиться ПОД кнопкой. Подскажите, пожалуйста. И вообще, моя стратегия решения верна или есть какая-то альтернатива? Код - http://jsfiddle.net/Lyo0fhk3/
-
Для меню с помощью :before и :after добавил уголки, на webkit все отлично, а в IE и FF не пашет. <div class="menu"> <ul class="nav"> <li class="first"><a href="#"><img class="icon" src="images/user.png"> Компания</a></li> <li ><a href="#"><img class="icon" src="images/cal.png"> События</a></li> <li ><a href="#"><img class="icon" src="images/oill.png"> География добычи</a> <ul class="subs"> <li><a href="#">Информация о компании</a></li> <li><a href="#">Фотогалерея объектов</a></li> <li><a href="#">История</a></li> <li><a href="#">СМИ о нас</a></li> <li><a href="#">Наше руководство</a></li> </ul> </li> <li ><a href="#"><img class="icon" src="images/plant.png"> Экология</a></li> <li ><a href="#"><img class="icon" src="images/list.png"> Тендер</a></li> <li ><a href="#"><img class="icon" src="images/home.png">Контакты</a></li> </ul></div>.menu { margin-top: 130px; border: 0px solid #f00; height: 60px;}.nav,.nav ul { list-style:none; margin:0; padding:0;}.nav ul { height:0; left:0; overflow:hidden; position:absolute;}.nav li { float:left; position:relative;}.nav li a { background-image: url(../images/bat.png); color:#000; display:block; font-size:16px; line-height:50px; padding:5px 20px; text-decoration:none; font-size: 24px;}.nav li.first a { background-image: url(../images/bat_first.png); color:#000; display:block; font-size:16px; line-height:50px; padding:5px 20px; text-decoration:none; font-size: 24px;}.menu:before { content: url(../images/bat_l.png) no-repeat; float: left; display: block;}.menu:after { content: url(../images/bat_r.png) no-repeat;}.nav li:hover > a { background-image: url(../images/bat_h.png); color:#fff;}.nav li:hover ul.subs { height:auto; width:217px;}.nav ul li { width:100%;}.nav ul li a { background-image: url(../images/bat_min.png); font-size: 15px;}.nav li:hover ul li a { line-height:20px;}.nav ul li a:hover { background-image: url(../images/bat_min_h.png); color: #fff;}