Launder

Ну дык не проставляйте. Указывайте только размер line-height, и лучше, наверное, в пикселях. А зачем Вы дивы запихнули в ссылки?...

Хорошо бы чётко понимать как именно должно выглядеть в принципе. А дальше попробовать решить задачу так, чтоб ничего нигде не съезжало. То что Вы выложили на Фидл у меня вообще никакое меню не отображается. Вот так, и при наведении или клике ничего не меняется. Даже меню сбоку кривое. По этой вашей ссылке выглядит всё по-другому. А Вы говорите что везде всё хорошо, плохо, только в ИЕ и Сафари. Выложите на фидл то, что хорошо и можно посмотреть как решить это по-другому. Или Вы хотите чтоб просто предложили решение по Вашей ссылке, безотносительно Вашего кода?

Может через vm, vh задавать размеры все?

По всей видимости, как-то так: #cf4a:hover { animation-play-state: paused; } Выше в теме приведён код. Вам, конечно, нужно фон ставить не через стили, а через ссылки - img нужно обернуть в ссылки. И, в анимации, кроме свойства opacity нужно ещё добавить свойство z-index. В результате, у нас в нужные моменты времени, ссылка-картинка не только отображена, но и находиться наверху z-плоскости, и не вижу причин, почему по ней нельзя кликнуть Как-то так.

Вот так можно. Если нужно чтоб b был дочерним элементу a, то логика, вероятно будет такой: в первый момент анимации top: 100% (относительно родительского), при этом box-sizing можно присвоить border-box, дабы не думать о границах, а height плавно увеличивать с 0 до нужного размера. В конце у блока b значение overflow с hidden можно поменять на auto, если предполагается что в блоке b много контента. Также, по идее, всё это можно сделать через transition. Логика примерно таже, синтаксис немного отличается. Через транзишн плюс в том, что переход будет плавным и в обратную сторону, впрочем, возможно, так можно сделать и через анимацию, но что-то я, навскидку, не соображу как.

@DivMan, лично мне, более-менее понять, как работает эта раскладка помогла вот эта статья и этот нехитрый тренажёр.

Мне кажется, задача интересна тем, что решить её можно довольно-таки различными способами... И хотя идеи, в общем-то похожи: можно отработать некоторое количество вариантов, и лучше увидеть возможности CSS: 1. В обёртке псевдоэлемент, элементы выровнены за счёт абсолютного позиционирования, относительно их родительских элементов. 2. Псевдоэлемент самого хедера, обтекает его справа, за счёт отрицательного марджина остался на той же строчке. 3. Аналогичен предыдущему варианту, только выполнен через абсолютное позиционирование. И в том, и в другом случае лишняя часть фона обрезается свойством overflow: hidden. Если бы на фоне было какое-то содержимое, обрезалось бы и оно, но в пределах выполняемой задачи это не заметно. В большинстве других вариантов ширина просчитывается. 4. Довольно интересный вариант с инлайн-блоком справа и марджином слева. 5. А если сделать блоки плавающими, то марджин и не нужен. 6. Почему бы не сделать это на флексбоксах? решение похоже на предыдущее. 7. Ну и наконец, если мы работаем с фоном, то почему бы нам не сделать всё это через фон? кстати если в коде немного поменять значения свойств: background-image: linear-gradient(#d91d52 %, #d91d52 66px, transparent 66px); background-position: 100% 30px; то всё также работает. Обращаю внимание на 100% в свойстве background-position. Значение 0 - картинка прижата к левому краю, 100% - к правому, остальные координаты между этими двумя положениями. Такая координатная сетка удобна, но отличается от привычной, где 100% это размер блока по координате. Ну вот, надеюсь приведённые варианты, покажутся кому-то интересными.

По видимому, нужно как-то сопоставить фон с размером строки: http://css-live.ru/articles/razvlecheniya-s-line-height.html

Что-то я запамятовал, конечно же, это можно решить через rem.

Понимаю, что может не кошерно, но если блоки поменять местами, то, в первом приближении, задача намного упростится.

@Dias а тень на глаз подбирали или есть в этом какая-то идея?

Решение красивое, а зачем в нём div class=overlay, а также class="close" у тега <a>?

Вот, кстати, пользуясь аналогией с шариками. Кто сказал что конкретный шарик относится, к арфе или трубе? Допустим у нас есть синус (или не синус) громкостью 30дБ, может 20дБ из них задаётся арфой, а остальное - трубой. Вы скажите - но ведь звук у них отличается, а значит и спектр отличается. Но ведь шарик показывает не ВЕСЬ спектр, а только маленькую часть спектра(в определённый момент), и она, как раз может совпадать или быть близкой, а раз она близка, а в процессе записи может слиться воедино. И как их различить? Да и вообще, как образуется звуковая картина, полагаю, отдельная, большая тема.

Кхм, интересный поворот. Я исходил из того, что ТС просто не видит текст (собственно в песочнице его и не видно), поскольку блок relative у него пустой, а абсолютный блок сам по себе ничего не растягивает. Но если смотреть на блок relative как на нечто, что с одной стороны лежать в закрытом контейнере, но при этом позиционироваться не относительно этого контейнера, а относительно... странички?, то такая постановка задачи мне представляется несколько странной. Ведь смысл правил width: 500px и overflow: hidden в том и состоит, что всё, что не влезает в пределы 500 пикселей прокручивать. Если же ТС не хочет видеть полосы прокрутки, то зачем он эти правила назначал? В общем, если Вы что-то понимаете, чего я не понимаю, поясните, пожалуйста, а так вообще, хотелось бы какой-то более детальной иллюстрации, чтоб понимать что имелось в виду под "не обрезался", и каким образом планируется "позиционировать". Мой последний пример с relative вместо absolute понятно что работает несколько по-другому, но в некоторых случаях, это может оказаться не существенным (в приведённом примере, похоже, это как раз не существенно), но так ли это в случае, в котором его планирует его использовать автор - неизвестно. Более того, если исходить из первоначальной информации (как я её понял), то, как я сразу и сказал, работает всё и без позиционирования.

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

Как это?

Отличный пример с обрезанием крайних элементов Пару моментов: для самого блока Ul задание обтекания, в рамках примера, не нужно, и для того, чтоб свойство color работало, нужно задать его непосредственно для ссылок.

@kagan25, вот немного модифицировал пример из интернета. Если Вы понимаете JS, возможно, по готовому решению, Вам будет легче понять. А вот на чистом CSS.

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

Картинка вставляется в строчный элемент, вот и появляется зазор. Задайте вертикальное выравнивание.

Можно так сделать...

Ну или min-height можно. Или вот так.

Ну, на всякий случай, Вы в курсе, что итак работает? А вообще через padding-top можно.

Исходя из той страницы, которую Вы привели, там есть скрипт, который, похоже, как раз за это и отвечает: <script> var h_hght = 150; // высота шапки var h_mrg = ; // отступ когда шапка уже не видна $(function(){ var elem = $('#top_nav'); var top = $(this).scrollTop(); if(top &gt; h_hght){ elem.css('top', h_mrg); } $(window).scroll(function(){ top = $(this).scrollTop(); if (top+h_mrg &lt; h_hght) { elem.css('top', (h_hght-top)); } else { elem.css('top', h_mrg); } }); }); </script> Интересно, такое, в принципе, можно ли сделать средствами CSS...

Лучше выложите в песочницу: codepen.io или jsfiddle.net.