Search the Community
Showing results for tags 'before'.
Found 8 results
-
Здравствуйте. Появилась проблема при верстке по сетке Bootstrap. <div class="col-xs-12 col-md-6>текст1</div> <div class="col-xs-12 col-md-6>текст2</div> текст2 находится не справа от текст1, а снизу Такая же проблема с before. текст в списеке снизу before, а не справа Помогите разобраться <body> <div class="container-fluid"> <div class="meny"> <div class="row"> <a name="top"></a> <div class="col-xs-12"> <nav> <ul class="list-menu"> <li><a href="#top">Главная</a></li> <li><a href="#skills">Навыки</a></li> <li><a href="#portfolio">Портфолио</a></li> <li><a href="#contacts">Контакты</a></li> </ul> </nav> </div> </div> </div> <div class="meny-arrow"></div> <div class="contents"> <article> <div class="row height-vh"> <div class="col-xs-12 col-md-6 center top-text"> <div class="name"> текст1 </div> </div> <div class="col-xs-12 col-md-6 top-text"> <div class="about"> <p>текст2 </p> </div> </div> </div> </article> <div class="row skills height-vh"> <a name="skills"></a> <h2>Практические навыки</h2> <div class="col-xs-12 col-md-6 list-skills"> <ul> <li><h4>HTML</h4></li> <li><h4>CSS</h4></li> <li><h4>HTML</h4></li> <li><h4>HTML</h4></li> </ul> </div> <div class="col-xs-12 col-md-6"> </div> </div> </div> </body> * { padding: 0; margin: 0; } body { font-family: 'PT Sans', sans-serif; } nav { background: #006589; padding: 15px; box-shadow: 0 0 10px rgba(0,0,0,1); height: 100vh; } .list-menu{ list-style: none; } .list-menu li a{ color: #fff; display: block; padding: 5px 15px 0 0; font-size: 24px; text-decoration: none; } /*.list-menu li a:hover{ background: #4db6f4; }*/ .height-vh { height: 100vh; } .indent { padding: 20px; } .center { text-align: center; } .top-text { margin: 40px; } .name { } .about { font-size: 18px; } .skills { background: #f0f0f0; } .list-skills ul { list-style: none; } .list-skills li:before { content: url(../images/inputs.png); display: inline-block; } .fleft { float: left; } .fright { float: right; }
-
добрый день, прописываю следующий код .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;}
-
Доброго времени суток. Подскажите, как решить задачу в IE. Вот ссылка: http://codepen.io/anon/pen/uzHfb - footer с треугольником на CSS3 через псевдотег :before. В Firefox и Chrome под Win7 - всё ок, треугольник по центру, а в IE11 (в младших тоже наверное) - треугольник смещен влево. Та же история (смещен влево) и в Chrome на Android. Заранее благодарю за помощь.
-
a[href*="russian.html"]:before {background: url(bullet2.png) no-repeat; border:1px solid black;} если убрать из кода псевдоэлемент :before то картинка появится, но мне не хочется добавлять 0 6px padding-left: 15px. чтобы она стала слева перед ссылкой. Почему маленькая картинка перед ссылкой не отображается?
