- 0
-
Similar Content
-
By vladdvin
Верстаю макет с Фигмы - https://www.figma.com/file/2rdy1qjBTl7D6BAC8S4qlf/Webovio?node-id=0%3A1. Наверстал
CSS
В результате отображается следующая картинка
в режиме инструментов разработчика. А вне режима вообще отображает
Подскажите как добиться отображения текста как на макете.
-
By РоманФ
Здравствуйте, только начал изучать основы, поэтому прошу не судить строго, буду благодарен за ответ.
Не понимаю как сместить картинку местоположения как на примере(пример выгрузил на поддомен)
http://training.maggle.ru/
Прикладываю код, если там что то не правильно указал подскажите, по семантике.
https://jsfiddle.net/RomanFF/rbe4kz0j/6/
-
By Yurii.Vovchuk
Привет. Друзья, подскажите пожалуйста, как сверстать вот такую сетку на флексах, чтобы блоки нижнего ряда прилипали к блокам верхнего (типа мозаичная верстка).
Применил align-items:flex-start, думал что сработает, но нет...
-
By four17
Можно ли с помощью css выровнять блоки одинакового по уровню ?
вот картинка.
Высота блока должна быть не фиксированной .Контент может быть в любом количестве . Блоки с контентом должны быть на одном уровне . Т.е независимо сколько символом в контенте , описание строго на одном уровнем с другим описание , цена на одном уровне с ценой.
Каким способом можно реализовать данное решение ? спасибо за внимание.
-
By sasha_anto
Доброго времени суток. Возникла такая проблема, нужно сверстать страницу согласно макету, используя только flex и grid
Сразу появилась идея разбить страницу на три divа, первый это блок с породами кота, второй это блок с фотками и третий блок с рейтингом.
<body> <header>Бабуленькины котятки</header> <div class="global"> <div class="menu"> <a class="submenu" href="#" id="abis">Абиссинская</a> <a class="submenu" href="#" rel="brit"">Британская</a> <a class="submenu" href="#" rel="rus">Русская голубая</a> <a class="submenu" href="#" rel="siam">Сиамская</a> </div> <div class="cats"> <img src="http://murkote.com/wp-content/uploads/2014/03/abissinskaya-koshka-foto.jpg" alt="" class="abis"> <img src="http://murkote.com/wp-content/uploads/2015/06/australian-mist-5.jpg" alt="" class="cat"> <img src="http://murkote.com/wp-content/uploads/2015/05/American-Bobtail-Cat.jpg" alt="" class="abis"> <img src="http://murkote.com/wp-content/uploads/2015/06/american-curl-7.jpg" alt="" class="cat"> <img src="http://murkote.com/wp-content/uploads/2015/06/Anatolijskya-koshka-2.jpg" alt="" class="abis"> <img src="http://murkote.com/wp-content/uploads/2015/06/arabian-mau-1.jpg" alt="" class="cat"> <img src="http://murkote.com/wp-content/uploads/2014/03/leopardovaya-bengalskaya-koshka.jpg" alt="" class="cat"> <img src="http://murkote.com/wp-content/uploads/2015/06/Brazilian-Shorthair-cat-2.jpg" alt="" class="cat"> </div> <div class="rating"></div> </div> <footer>Подвал</footer> <style> a { color: #000 !important; text-decoration: none; } body { background-color: gainsboro; display: flex; flex-direction: column; } header { text-align: center; font-size: 40px; font-style: bold; } img { width: 250px; height: 200px; } .global { display: -webkit-flex; display: flex; justify-content: space-around; } footer { color: wheat; background: black; } div.menu { display: flex; width: 250px; flex-wrap: wrap; background: gray; align-content: flex-start; } .submenu { display:flex; justify-content: center; align-items: center; width: 100%; height: 50px; font-size: 25px; border-bottom: white 1px solid; } .cats { display: flex; flex-wrap: wrap; width: 800px; height: 900px; justify-content: space-around; } .cats img:nth-child(2){ width: 500px; } .cats img:nth-child(6) { width: 500px; } .cats img:nth-child(8) { width: 750px; } .rating { width: 250px; background: olive; } </style> Но возникла проблема, надо сделать так, чтобы при выборе категории, кошки данной породы меняли прозрачность. Так как у меня фото и породы в разных блоках, я не понимаю как это сделать. Был вариант не добавлять категории в отдельный блок, но тогда как разметить страницу? Прошу помощи, или хотя бы небольшой подсказки
-
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок 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
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-
Question
d0ublezer0
zebra-tara.ru
на главной странице есть блок с популярными товарами
чтобы его организовать, мне пришлось делить список на две части. отдельно в своём контейнере выводится большой первый элемент и далее - остальные, тоже в flex контейнере
можно добиться такого визуального представления как-то иначе (без разделения UL списка), когда первый элемент имеет большой размер?
мне это потребуется, чтобы на малых разрешениях навесить на этот список owl carousel, а получается, что первый элемент оторван..
Полагаю, это можно как-то решить с колонками, а не строками, но мне этот фокус не удался
Link to comment
Share on other sites
10 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.