Report
-
Similar Content
-
By garmoni
Здравствуйте. Появилась проблема при верстке по сетке 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; }
-
By Delagardi
Здравствуйте,
В ближайшее время я наверное вас замучаю. Мой первый вопрос будет касаться размещения border в псевдоэлементах.
Хочу заверстать вот это меню
Здесь у кнопок двойная граница (серая и черная). Моей основной проблемой сейчас является разделение кнопок. Пытался сделать с помощью box-shadow, border etc, ничего не получилось. Т.к. разделение кнопок получается суммой двух border, что неправильно.
Теперь решил раздвинуть кнопки между собой margin'ом и вставить туда с помощью псевдоэлемента border.
Не могу понять почему он становиться ПОД кнопкой. Подскажите, пожалуйста. И вообще, моя стратегия решения верна или есть какая-то альтернатива?
Код - http://jsfiddle.net/Lyo0fhk3/
-
By Delagardi
Здравствуйте,
В ближайшее время я наверное вас замучаю. Мой первый вопрос будет касаться размещения border в псевдоэлементах.
Хочу заверстать вот это меню
Здесь у кнопок двойная граница (серая и черная). Моей основной проблемой сейчас является разделение кнопок. Пытался сделать с помощью box-shadow, border etc, ничего не получилось. Т.к. разделение кнопок получается суммой двух border, что неправильно.
Теперь решил раздвинуть кнопки между собой margin'ом и вставить туда с помощью псевдоэлемента border.
Не могу понять почему он становиться ПОД кнопкой. Подскажите, пожалуйста. И вообще, моя стратегия решения верна или есть какая-то альтернатива?
Код - http://jsfiddle.net/Lyo0fhk3/
-
By Guard
Привет.
Есть горизонтальное меню.
Как после каждого пункта меню вывести точки, как тут:
Если кому нужна картинка точек.
-
By DarkTranquillity
Доброго времени суток.
Подскажите, как решить задачу в IE.
Вот ссылка: http://codepen.io/anon/pen/uzHfb - footer с треугольником на CSS3 через псевдотег :before.
В Firefox и Chrome под Win7 - всё ок, треугольник по центру, а в IE11 (в младших тоже наверное) - треугольник смещен влево.
Та же история (смещен влево) и в Chrome на Android.
Заранее благодарю за помощь.
-
-
Обсуждения
-
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ -
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ Портфолио https://www.behance.net/d4d4186e
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо.
-