Search the Community

Верстаю макет с Фигмы - https://www.figma.com/file/2rdy1qjBTl7D6BAC8S4qlf/Webovio?node-id=0%3A1. Наверстал CSS В результате отображается следующая картинка в режиме инструментов разработчика. А вне режима вообще отображает Подскажите как добиться отображения текста как на макете.

Здравствуйте, только начал изучать основы, поэтому прошу не судить строго, буду благодарен за ответ.Не понимаю как сместить картинку местоположения как на примере(пример выгрузил на поддомен)http://training.maggle.ru/Прикладываю код, если там что то не правильно указал подскажите, по семантике. https://jsfiddle.net/RomanFF/rbe4kz0j/6/

Можно ли с помощью css выровнять блоки одинакового по уровню ? вот картинка. Высота блока должна быть не фиксированной .Контент может быть в любом количестве . Блоки с контентом должны быть на одном уровне . Т.е независимо сколько символом в контенте , описание строго на одном уровнем с другим описание , цена на одном уровне с ценой. Каким способом можно реализовать данное решение ? спасибо за внимание.

zebra-tara.ru на главной странице есть блок с популярными товарами чтобы его организовать, мне пришлось делить список на две части. отдельно в своём контейнере выводится большой первый элемент и далее - остальные, тоже в flex контейнере можно добиться такого визуального представления как-то иначе (без разделения UL списка), когда первый элемент имеет большой размер? мне это потребуется, чтобы на малых разрешениях навесить на этот список owl carousel, а получается, что первый элемент оторван.. Полагаю, это можно как-то решить с колонками, а не строками, но мне этот фокус не удался

Доброго времени суток. Оцените верстку https://alex2033.github.io/Blueasy/index.html В этот раз решил поверстать без гридов, после продолжительной верстки сетками, их отсутствие принесло парочку неудобств

Здравствуйте. Есть такой пример на флексах https://jsfiddle.net/dtns7L2v/ При уменьшении размера окна когда контент не помещается в одну строку он переносится на вторую. Но между элементами не плохо было бы добавить отступ. К примеру, с помощью внутренних полей и отрицательного отступа в родителя, как это сделано в бутстрапе. Гриды нам предлагают отличное свойство grid-gap, которое может сделать подобное одной строкой кода. Проблема в том, что я не могу добиться подобного поведения элементов, из-за отсутствия опыта работы с этой новой технологией. Мои попытки: - элементы имеют ширину по контенту, но не переносятся https://jsfiddle.net/dtns7L2v/1/. - элементы переносятся, но ширину я выставил фиксированную, что не подходит https://jsfiddle.net/dtns7L2v/2/

При настройке Masonry возникает проблема: ширина блоков регулируется отлично (и в %, и в px), но, когда возникла необходимость сделать один из блоков в 2 раза выше остальных блоков - низкие блоки не занимают пустое место рядом с высоким блоком и получается то что на картинке ниже. Перепробовала, как мне кажется, все: в инициализации указывала ширину колонки в пикселях, в процентах, добавляла в код grid-sizer, убирала grid-sizer........... Методом тыка поняла что если увеличить у меня в css ширину блока .grid-item - то колонок становится две - и в таком случае Masonry красиво все располагает. Код здесь (постаралась оставить только суть).

Подскажите, как можно растянуть блоки 2, 3, 4 по высоте блока 1? space-between и align-items не срабатывает. Пример тут:

Буду очень благодарен, если вы мне подскажите, как можно решить проблему. Скидываю простейший пример вёрстки, демонстрирующей проблему, без лишнего мусора - https://github.com/R45H/bug-in-ff. Нужно, чтобы в firefox отображалось также, как и в хроме. С учётом адаптивности. Здесь используется флексбокс и паддинг снизу в % для сохранения пропорций картинок. Проблема заключается в том, что при указании flex-direction: column; лиса схлопывает картинки (а хром нет). Мне подойдёт любое решение, но поведение и вид должны быть такими же, как в примере в хроме: - пропорциональное уменьшение картинок; - блоки с синей обводкой растягиваются на всю оставшуюся высоту; - голубой и зелёный блоки подстраиваются по высоте друг под друга (неважно где сколько текста); - на планшетах всё должно разворачиваться по-бутстраповски (как сейчас в примере). Заранее спасибо за помощь.

помогите пожалуйста разметить страничку стандартными header + content + footer вот моя попытка . она плоха тем, что для header, footer используется такое правило: .icons_item:nth-child(6), .icons_item:nth-child(1){ width: 100%; } хотелось бы использовать чистый flexbox

Похоже плохо учил свойства. Неважно какие - просто свойства. Есть такой код: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>Главная</title> <style> .wrapper { } </style> </head> <body> <div class="wrapper"> <!-- Просто пустой див блок --> <header> CONTENT </header> <section> CONTENT </section> <footer> CONTENT </footer> </div> </body> </html> Только начал использовать флексбокс и в своих (двух) макетах вместо свойства height использую flex-basis. Так вот, при добавлении враппера, всё сьезжает и выглядит так будто flex-basis: auto; или же height: auto; Почему так происходит? Спасибо Скрин до враппера http://pastenow.ru/XEJE Скрин после враппера http://pastenow.ru/XEJA

Приветствую. Снова. Сайт — http://flexboxtryfirst.16mb.com/ Макет — https://yadi.sk/i/2xULK9O9tjq4R Сайт выглядит одинаково почти во всех браузерах, кроме любимого IE. Валидация HTML и CSS пройдена без ошибок. 769 - 1024 (max-width: 1024px) and (min-width: 769px) Мобильная версия сайта (max-width: 480px) and (min-width: 320px) Прошу! Указать на ошибки в использовании Flexbox. (Правильно ли я вообще использовал flexbox?) Указать на различия между версткой и макетом. Высказать свое субъективное мнение по поводу верстки в общем. Что стоит изменить или как делать не нужно. Да и вообще указать на любые ошибки. Жду любую критику) Спасибо! Спасибо тебе за то, что нашел время, чтобы заглянуть сюда и посмотреть работу. Таких людей нужно ценить!)

Нужно с помощью flexbox сделать такое Как это сделать? Пока что получается вот так

Собственно, проблемы с кроссбраузерностью flexbox Использую полифилл flexie.js - но не помогает В IE 9 это выглядит так: Может не так пользуюсь? https://jsfiddle.net/jysd1us0/1/

http://jsfiddle.net/Launder/1tahrusy/ <div class="feedback"> <p> Вы можете воспользоваться данной формой, для того, чтоб отправить нам сообщение. Мы будем рады почитать содержательный отзыв и надеемся на плодотворное сотрудничество! </p> <form action="#" method="post"> <p> <label for="Name">Имя:</label> <input type="name" name="autor" id="Name"> </p> <p> <label for="Mail">Email:</label> <input type="email" name="autormail" id="Mail"> </p> <p> <label for="type">Вид:</label> <select name="sort" form="mail" id="type"> <option value="general">общие вопросы</option> <option value="tech">технические вопросы</option> </select> </p> <p><b>Введите Ваше сообщение:</b></p> <p> <textarea class="announcement" name="comment"> </textarea> </p> <p><input type="submit" value="Отправить"></p> </form> </div>label { margin-right: 5px; width: 50px; text-align: right; float: left; line-height: 28px; }#Name, #Mail, #type { width: 250px; box-shadow: inset 0 1px 5px rgba(0,0,0,0.2); color: #6d6d37; padding: 1px; padding-left: 10px; }Как сделать выравнивание label? Иными словами, надписи перед тремя верхними формами, сдвинуть чуть-чуть вверх?

Господа, есть элементарный сайт визитка, насколько это возможно, на пк все вроде неплохо, без глюков, сделан по принципу mobile first, но на планшете, если нажимать на пункты меню, буквально долисекунды я вижу, как верстка съезжает, это очень напрягает, делал я его флексбоксами, может кто подскажет, что и где и сделал неправильно? Сайт пока находится по адресу anvyd.ru

Подумалось тут в развитие старой темы. По сути, используя инлайн-блоки со «скукоженными» пробелами между ними, мы ведь пытаемся эмулировать «новые» флексбоксы (в т.ч. в многострочном режиме — flex-flow: row wrap) с flex: none. И у нас есть надежное средство «скукожить» пробелы везде, кроме вебкита (отриц. word-spacing с запасом), лекарство для старых вебкитов (display: table для контейнера) и... собственно флексбоксы в новых вебкитах (Хром-Канарейка и т.п.) . А также @supports, чтобы все остальные могли перейти со старых костылей на правильный флексбокс, как только смогут сделать это наверняка. Тем самым мы избавляемся от подгонки «магических» значений для двух похожих, но сильно неодинаковых по действию свойств (word-spacing и letter-spacing) и, по идее, получаем решение, с которым история как в ссылке выше уже точно не приключится. Старые костыли будут использоваться только в старых браузерах, где баги/фичи, на которых они основываются, заведомо работают. А новые браузеры будут плавно переходить на стандартное решение, не требующее костылей. Чем не прогрессивное улучшение? Правда, в новых вебкитах (и будущих браузерах) и всём остальном задача решается разными технологиями — но фактическое поведение очень похоже. Причем старая технология, можно сказать, проверена временем, а новая зато специально «заточена» именно для этой задачи. Прошу посмотреть пример (я взял за основу те же YUI Grids, откуда расползлись эти загадочные -.43em) и покритиковать идею и реализацию