AlexZaw

Горизонтальные направляющие даны для того чтобы показать как выравниваются соседние элементы по вертикали, либо для подсчета отступов, вертикальных размеров, если не понятно то уточнять у дизайнера, если это скачанный макет, то либо смотрите чем горизонтальные направляющие могут вам помочь, либо не обращайте внимания так и есть, там два блока по 50% ширины тут опять же - либо к дизайнеру, либо решать самому. зы: а что вы тут на 4 колонки разбивать собрались?

Либо верстать как есть , либо решать вопрос с дизайнером/заказчиком, а вообще все зависит от макета, может туда вообще не впихнуть сетку. Опять же все зависит от макета, если есть сетка то с ней удобнее, так как все размеры уже посчитаны и расставлены, да и адаптив делать приятнее , если же нет - см.выше

Стилизуется не сам, label а спан находящийся внутри него. Текст пишем как обычно внутри тега label, после чего с помощью паддингов отодвигаем текст куда нужно. Либо прописываем текст метки с помощью псевдо элементов after или before, затем с помощью position опять же двигаем в нужное место

Можно добавить описание внутри label и потом двигать паддингами, можно через псевдо элементы и двигать позиционированием.

Вторым элементом делать градиент поверх не получится, так как градиент будет наложен поверх границ основного блока. В принципе для данной задачи сделал выпуклую крышку вторым блоком и залил оба блока градиентом. Получилось нормально, переломов никаких не видать, все масштабируется. Попутно, в целях саморазвития так сказать, возник вопрос, как сделать такой элемент если вместо заливки цветом и градиента на фоне будет фотография или любое другое не повторяющееся изображение.

Да наверное абсолютно все редакторы/IDE умеют делать реформат кода. Возможно вы просто не нашли эту функцию в остальных

Ну если поизвращаться можно и на svg нарисовать, вот только это совсем не проще мне кажется, да и как быть если содержимого станет больше, каждый раз перерисовывать? Или как то все это дело масштабируется? С svg мало знаком просто. На фоне этого элемента рисунок к сожалению. Но идея интересная, попробую поэкспериментировать

Тут есть тени, градиент, закругленные углы, и выпуклая верхняя часть. С тенями, градиентом, и нижней частью проблем нет, но вот как реализовать верхнюю часть - ума не приложу. border-radius c параметрами через "/" не дает резкого закругления по краям, псевдоэлементами придется подгонять диагональный градиент, что при адаптации создаст кучу гемороя. Картинкой сделать нельзя так как содержимое может меняться. Есть какое-то менее болезненное решение чем через псевдоэлементы?

А что вы хотите сделать то? Из вопроса не очень понятно. То что меню пропадает при разворачивании чтоли? Так это надо просто убрать display:none после изменения размера.

без js только так смог придумать: <form action=""> <input type="tel" pattern="[0-9]{3}-[0-9]{3}" placeholder="example 123-456"> <button>submit</button> </form> input[type="tel"]:invalid{border:2px solid red} песочница: https://jsfiddle.net/AlexZaw/4gpyds1s/

<div class="wrapper"> <img src="http://placehold.it/200x50"> </div> или <p class="wrapper"> <img src="http://placehold.it/200x50"> </p> .wrapper{text-align: center;} это базовые варианты

можно вот так <div class="wrap"> <div class="bl1">1</div> <div class="bl3">3</div> </div> <div class="bl2">2</div> .bl1, .bl3{width: 300px;height: 100px;background-color: #f00;} .bl2{width: 100px;height: 200px;background-color: #ff0;} .wrap{float:left;} .bl2{display:inline-block}

я ж и говорю в рамках бреда можно еще вариант с дивами и флексами попробовать

в рамках бреда: https://jsfiddle.net/AlexZaw/tkLxL6jk/

<input id="check" type="checkbox"><label for="check">Label </label> <br> <input type="text"> input:checked~label{color: red} input:hover{border:2px solid green} input:focus{border:2px solid red}

Совсем запутался. Должно работать так как в примере, но только без скроллбара, или еще как-то?

тогда вот: /* хром, сафари */ .element::-webkit-scrollbar { width: 0; } /* ie 10+ */ .element { -ms-overflow-style: none; } /* фф (свойство больше не работает, других способов тоже нет)*/ .element { overflow: -moz-scrollbars-none; } только вроде некорректно работает в мобильных браузерах. либо с помощью JS, вот статейка: https://habrahabr.ru/company/2gis/blog/169359/

<div class="carousel"> <div class="carousel-page-wrapper" style="transform: translateX(0);"> absolute element here displays not as expected (scrollbar in container appears) <div class="absolute-element"></div> </div> </div> .carousel { position: relative; padding: 1em; border: solid 1px blue; overflow: hidden; height: 30px; } .carousel-page-wrapper{ overflow:auto; width: 100%; height: 100%; padding: 0 35px 0 0; } .absolute-element { position: absolute; width: 200px; height: 200px; border: solid 3px darkred; background-color: red; } Песочница

уберите у .menu ul li display: inline-block;

тогда через input: <label for="menu">Menu</label> <input id="menu" type="checkbox"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> #menu, ul{display:none} ul{list-style:none;} #menu:checked + ul{display:block}

jquery тут не виноват, если его подключить все равно работать не будет, ошибки в наименовании классов, может и еще в чем, не смотрел, но сначала нужно классы правильно расставить

Так уберите лишние пункты, в чем проблема то? Принцип и с подменю можно понять Изначально пункты меню скрыты, при наведении на кнопку меню прописываются стили на показ содержимого меню Если грубо то вот так: <ul>Menu<li></li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> ul{list-style:none} li{display:none} ul:hover li{display:block}

Извиняюсь, menu_state_open, добавлется ведь при помощи js. Могу посоветовать только внимательнее копировать стили css и структуру html , присмотритесь, какие классы у вас указаны в стилях, и какие в html.

это не стили для класса menu_state_open, это стили для классов .menu__icon и .menu__links, которые в хтмл располагаются внутри дива с классом menu_state_open, который лежит внутри дива с классом .menu

<ul class="nav"> <li class="main-menu"> <a href="">Main Menu</a> <a href="">Products</a> <a href="">Store</a> <a href="">Forum</a> </li> <li class="settings"> <a href="">Settings</a> <a href="">Account</a> <a href="">Notifications</a> <a href="">Display</a> </li> <li class="link"> <a href="">Link</a> <a href="">Embed</a> <a href="">Short link</a> <a href="">Full link</a> </li> <li class="search"> <a href="">Search</a> <a href="">Item 2</a> <a href="">Item 3</a> <a href="">Item 4</a> </li> </ul> body{ background: url(http://subtlepatterns.com/patterns/subtlenet2.png); font: 1em tahoma, arial;text-transform: uppercase; } .nav{ list-style: none;padding: 0;margin: 30px;width: 50px; opacity: 0.5;transition: opacity .3s ease-in-out; } .nav:hover{opacity: 1} .nav li{ height: 50px;width: 50px;overflow: hidden; transition: width .2s ease-in-out,height .2s ease-in-out .2s } .nav li:hover{ width: 200px; height: 174px; } .nav li a{ display: block;width:200px;height: 40px; line-height: 40px; background: #bbb;margin:1px;color: #fff;padding-left: 15px; cursor: pointer;text-decoration: none; transition: all .2s ease-in-out; } .nav li a:hover{ background: #2fc5ff } .nav li a:first-child{ font-size: 1.1em;height: 50px;line-height: 50px; position: relative;text-indent: 36px } .nav li a:first-child:before{ content: '';position: absolute;display: block; height: 32px;width: 32px;top:9px;left: 9px } .main-menu a:first-child:before{ background: url(home.png) center no-repeat; } .settings a:first-child:before{ background: url(settings.png) center no-repeat; } .link a:first-child:before{ background: url(link.png) center no-repeat; } .search a:first-child:before{ background: url(search.png) center no-repeat; }