AlexZaw

Вы серьезно полагаете, что здесь собрались ясновидящие, которые гадают по фотографии?

Если нельзя использовать js (кстати почему?) то может можно пхп? А в нем уже получать размеры изображения и формировать svg контейнер ?

Так фиксированно или может меняться? IMHO, при заданных условиях это невозможно.

Проверьте свою формулу со шрифтами Gruppo и Catamaran. Скорее всего она не подойдет

Фотошоп не учитывает метрики шрифта, поэтому никак. Ну либо загонять шрифт в программу где можно посмотреть метрики, и учитывать их в расчетах, но проще воспользоваться плагином для пиксель перфект верстки ?

У вас с сайтом что то не так, на нем только LiveInternet counter присутствует

Решил поиграться с тегом details и вот что получилось: See the Pen KxaPyX by Alexandr (@AlexZaw) on CodePen. Для поддержки EDGE и IE9-11 пришлось дублировать код, так как они не поддерживают тег details, так что, при использовании чекбоксов код получится короче, но тем не менее вдруг кому пригодится способ стилизации details. (если нужно зафиксировать меню - меняем позиционирование у details и .mmenu ) <details> <summary tabindex='1'> <span class="top"></span> <span class="center"></span> <span class="bottom"></span> </summary> <ul class="mmenu"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> <li><a href="#">item 4</a></li> <li><a href="#">item 5</a></li> </ul> </details> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt itaque eum minima exercitationem enim incidunt, eveniet ipsa officia quasi aut eaque quas vel vero atque a perspiciatis tempora! In, eligendi. details { /*position: fixed;*/ position: relative; } ::-webkit-details-marker { display: none; } ::-moz-list-bullet { list-style-type: none; } summary { position: relative; width: 30px; height: 20px; outline: none; } summary span { position: absolute; left: 0; width: 100%; height: 3px; background: #000; border-radius: 3px; transition: all .5s; } .top { top: 0; } .center { top: 50%; transform: translateY(-50%); } .bottom { bottom: 0; } .mmenu { /*position: relative;*/ position: absolute; padding: 0; list-style: none; overflow: hidden; background: #ccc; border-radius: 10px; box-shadow: 0 0 5px #000, inset 0 0 5px #fff } .mmenu a { text-decoration: none; font-size: 18px; color: midnightblue; position: relative; overflow: hidden; } .mmenu a:before { content: ''; display: block; position: absolute; height: 10px; width: 3px; transform: rotate(45deg); background: #fff; right: 100%; top: 6px; opacity: 0; } .mmenu a:hover:before { animation: move .2s linear; animation-fill-mode: forwards } details[open] .top { top: 50%; transform: translateY(-50%) rotate(45deg); box-shadow: 0 0 5px #000, inset 0 0 5px #fff } details[open] .bottom { top: 50%; transform: translateY(-50%) rotate(-45deg); box-shadow: 0 0 5px #000, inset 0 0 5px #fff } details[open] .center { opacity: 0; } details[open] .mmenu { animation: showMenu .5s linear; animation-fill-mode: forwards; } @keyframes showMenu { 0% { padding: 0; opacity: 0; } 100% { opacity: 1; padding: 20px 40px; } } @keyframes move { 0% { right: 100%; opacity: 0; } 50% { right: 50%; opacity: 1; } 100% { right: 0; opacity: 0; } } /*EDGE support*/ @supports (-ms-ime-align:auto) { details, summary { display: block; } summary~.mmenu { opacity: 0; } summary:focus~.mmenu { animation: showMenu .5s linear; animation-fill-mode: forwards; } summary:focus .top { top: 50%; transform: translateY(-50%) rotate(45deg); box-shadow: 0 0 5px #000, inset 0 0 5px #fff } summary:focus .bottom.bottom { top: 50%; transform: translateY(-50%) rotate(-45deg); box-shadow: 0 0 5px #000, inset 0 0 5px #fff } summary:focus .center { opacity: 0; } .mmenu a:hover:before { animation: move .2s linear; animation-fill-mode: forwards } } /*IE9-11 support*/ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { details, summary { display: block; } summary~.mmenu { visibility: hidden; } summary:focus~.mmenu { animation: showMenu .5s linear; animation-fill-mode: forwards; visibility: visible; } summary:focus .top { top: 50%; transform: translateY(-50%) rotate(45deg); box-shadow: 0 0 5px #000, inset 0 0 5px #fff } summary:focus .bottom.bottom { top: 50%; transform: translateY(-50%) rotate(-45deg); box-shadow: 0 0 5px #000, inset 0 0 5px #fff } summary:focus .center { opacity: 0; } }

Как то так: <div class="wrap"> <input id='email' type="text" required> <label for="email">E-mail</label> </div> .wrap{ position: relative; } input{ height: 50px; } label{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: #ccc; transition: top .5s; } #email:focus + label{ top: 5px; font-size: 10px; } #email:valid + label{ top: 5px; font-size: 10px; }

Проверяйте пути. Если не сможете найти ошибку, скиньте или код html и скажите где у вас лежат картинки, либо лучше архив со страничкой и картинками, так будет проще

Первый баг - выбираем тренировки, нажимаем редактировать, меняем любое время (начала или окончания тренировки) так что бы они приходились на разные сутки (например время начала 23:30, время окончания 00:30) - получаем отрицательную длительность тренировки. При добавлении тренировки с такими же условиями - тот же результат

Оно и в хроме нормально работает, почистите кеш, может в нем дело. Да и еще, стили .hover, .accordeon:active { background-color: #e4e4e4; } лишние. Тем более что класса accordeon у вас ни в хтмл ни в js нет.

Если нужно могу набросать скрипт для динамической шапки

Пардон, не сразу понял что имелось ввиду под "выпадением снизу экрана" и не обратил внимание на то что не все пункты меню помещаются на экране. Тогда с помощью js получать высоту шапки и задавать высоту для списка

Может я чего то не понял, но приведенный код работает точно так как на изображении

Если бы вы попробовали сделать то что я предложил выше - вы бы не писали этого сообщения.

Как бы это объяснить... hover,checked и т.п. это состояния элемента в зависимости от состояния - применяются стили. value это атрибут элемента в дом дереве, а оно само не перестраивается. Если бы вы при изменении его значения удаляли старый элемент и вставляли на его место новый с новым значением - стили бы применились. Это легко решается при помощи js.

Так меню и будет начинаться от нижней точки, так как у него задано top:100%; Вот только вам и контент нужно отодвигать от верха страницы, что бы он не закрывался фиксированной шапкой, но к меню это отношения не имеет

для ul задайте max-height: 100vh; overflow: auto;

Стили увас загрузились один раз, применились к параметру по умолчанию, дальше никаких операций с ними не происходит. Вот если бы вы в зависимости от значения value изменяли стили или добавляли/удаляли классы с помощью js, то все бы работало. Стилизовать инпут с помощью css конечно можно, но возникнет трудность со стилизацией стрелок. Удалить их конечно можно, но вот сделать вместо стандартных свои, да так что бы они работали можно только добавив js

В чем сложность прописать стили самому? При копировании вы наверняка или что-то прихватите лишнее, или, наоборот, что-то упустите и будете недоумевать почему не работает.

Ищите table.zebra в style.css

Верно, про это я не подумал ? В свое оправдание могу сказать только то, что при таком способе мороки, на мой взгляд, будет больше ?

Во-первых, для ul не стоит задавать display:block; так как он и так блочный. Во-вторых, если вы задали обтекание, то задавать еще и display:block; бессмысленно, так как поведение блока не изменится. body{ background-image: url(../images/bg.png); margin: 0; } h1{ font-family: Monotype Corsiva; font-size: 36px; text-align: center; margin-top: 80px; } .conteiner{ width: 1180px; margin: 0 auto; } nav{ text-align: center; background-color: #8d503d; height: 58px; width: 1180px; } .menu{ padding: 0; margin: 0 auto; width: 1062px; } .menu li{ display: inline-block; margin-right: 65px; } .menu li:last-child{ margin-right: 0; } .menu li a{ color: #fff; text-decoration: none; }

Да пожалуйста, только я Александр ?