aqua.77

Нет, с чего вы взяли? я применяю li который находится в ul.q77 :not(.q77 li)

Да кстати можно просто этим ">" символом всё решить) Добавить его, чтобы селектор применялся непосредственно к дочернему li и не задевал остальные. Тогда и ненужно писать исключения типа :not(...). Да, я в толк не могу взять как они различаются... Можно ели есть возможность ссылку на источник с разъяснениями этих понятий?

Хорошо, там просто код длинный, а проблема только из-за одной строчки вот https://jsfiddle.net/sr5znzrw/ На 94 строке к элементу списка li применяется правое выравнивание, но из-за этого при наведении вложенный элемент списка тоже получает это значение 172 строка. Как я говорил код длинный и неудобный, удачи Эмм... близко но нет.)

Нет

Как применить к этому селектору .q1 li:first-child .q2 li:hover Ещё один псевдоэлемент :not(.q77 li)? Если писать .q1 li:first-child .q2 li:hover:not(.q77 li) То этот селектор вообще перестаёт работать

Высота главного блока не меняется же, она задана фиксированной height:200px; Ну или измени у нижнего блока позицию на самый низ другим способом .end { width:100%; position:absolute; bottom:0; background-color:yellow; } А для главного блока допишите .main { position:relative; width:100%; height:200px; border:1px solid red; } Теперь нижний блок будет постоянно внизу при любых обстоятельствах.

Вот песочница https://jsfiddle.net/o82kLqdn/1/ Там есть боди с размером 600рх, в нём контейнер 521рх в котором три блока по 164рх с отступами по 10рх. Я всё это сделал резиновым, т.е. делил внутренние блоки на внешние получал размер. Теперь при получении нужных размеров всё работает и размер остался таким каким должен быть. Но когда я сужáю размер окна последний блок вылетает... из-за чего такое поведение ведь всё держалось на месте.

Если нужно чтобы footer был прикреплен к низу экрана достаточно просто задать для него position:fixed; bottom:0;

По каким источникам изучал, книги авторы?

Блок должен менять цвет при его наведении, но даже если навести на дочерний блок который находится за границами контейнера основной контейнер все равно красится. Получается любой вложенный элемент является частью родителя? <div> <p></p> </div> div{ width:500px; height:500px; border:1px black solid; } p{ width:600px; height:300px; background:red; } div:hover{ background:black; }

Есть этот сайт на русском?

Есть контейнер DIV с двумя блоками Р которые позиционированы относительно левой стенки контейнера, я захотел переместить первый блок относительно правой стенки, но не получается. Почему так происходит? <div> <p class="q1"></p> <p></p> </div> div{ width:500px; height:500px; border:1px black solid; position:relative; } p{ position:absolute; left:0; top:0; width:50px; height:50px; border:1px black solid; } div p:first-child { right:110px; }

Ваш пример был ясен, но я хотел чтобы подменю плавно выползало и не влияло на нижестоящий контент, ещё и резиновое. В общем вот что я напридумал https://jsfiddle.net/2ohktw18/2/

Спасибо, буду разбираться

Можете в песочнице продемонстрировать? просто я запутался

И правда... Я нашел выход обернуть UL и сделать его абсолютно-позицианированным в элементе NAV... q1{ position:absolute; width:100%; top:0;left:0; } nav{ position:relative; margin:50px 0 0 20px; } Но что-то идёт не так. https://jsfiddle.net/zhzhjxo8/

Та так удобнее https://jsfiddle.net/nduyuhbr/. Я первый раз попробовал сделать резиново-выпадающее меню, и есть ощущение что что-то сделал не корректно

Сделал выпадающее меню. Всё работает, меня только один вопрос интересует: всё ли корректно, может ли данный код считаться хорошим? <ul class="q1"> <li class="q2"> <a href="#">123</a><ul class="q3"><li><a href="#">111</a></li><li><a href="#">222</a></li><li><a href="#">333</a></li></ul> </li> <li class="q2"><a href="#">123</a><ul class="q3"><li><a href="#">111</a></li><li><a href="#">222</a></li><li><a href="#">333</a></li></ul></li> </ul> * { box-sizing: border-box; margin:0; padding:0; } .q1{ margin-left:40px; margin-top:50px; border:1px black solid; text-align:center; } .q2{ display:inline-block; position:relative; vertical-align:top; z-index:1000; overflow:hidden; height:42px; transition:all 1s; width:17%; } .q2 a{ display:inline-block; text-decoration:none; padding:12px 0px; width:100%; text-align:center; background:black; } .q3{ position:absolute; top:-90px; right:0; width:100%; transition:all 1s; z-index:-1; } .q3 li{ display:block; } .q3 a{ display:inline-block; padding:12px 0px; width:100%; text-align:center; background:red; margin-bottom:3px; } .q2:hover .q3{ top:45px; } .q2:hover{ height:177px; } .q3 li:last-child a{ margin-bottom:0; }

Вот крайне простой список. Если поставить какое либо значение display например block то маркер сразу исчезает. Почему так происходит? <ul> <li>132</li> </ul> li{ display:block; }

Есть элемент 1170px в контейнере 1349px, чтобы получить элемент резиновым я 1170 делю на 1349 получаю 86.73%. Странность в том что когда я этот элемент центрирую через margin:auto то элемент становится на 1 пиксел меньше, а когда центрирую с добавлением левым поля на 90px то он снова становится в нормальном размере. Из-за чего токое поведение? ведь в обоих случаях элемент в центре. <div class="contentWrapper"> </div> * { box-sizing: border-box; margin:0; padding:0; } body{ width:1349px; } .contentWrapper { width: 86.73%; margin:auto; border:1px black solid; height:500px; }

Да ты прав, но если убрать фиксированный размер у бади и поставить max-width:1366px; вместо width:1366px; опять всё рушится

Есть контейнер с шириной 1366px, в нём блок с шириной 1170px. Чтобы сделать этот блок резиновым я делю 1170 на 1366 и получаю 86.65%. Но когда ставлю эту 86.65% ширину блоку, элементы в нём не помещаются... почему ведь ширина осталась той же самой? *{ margin:0; padding:0; box-sizing:border-box; } body{ width:1366px; } .q1{ width:370px; height:400px; background:black; float:left; margin-right:30px; } .q2{ background:red; width:85.65%; overflow:hidden; } .q1:last-of-type{ margin-right:0; } <body> <div class="q2"> <div class="q1"></div><div class="q1"></div><div class="q1"></div> </div> </body>

В принципе всё работает как я хотел и это главное, но возможно эту же задачу можно выполнить более разумно или корректнее? Может ли данный код считаться пригодным? Задача была сделать резиновые кнопки с анимацией. <ul> <li><a href="#">Кнопка<span></span></a></li> <li><a href="#">Кнопка<span></span></a></li> <li><a href="#">Кнопка<span></span></a></li> </ul> @keyframes men{ from{ background: linear-gradient(120deg, #CFA883 10%, white 20%, white 20%, #CFA883 30%); opacity:0; } to { background-position:300px; opacity:1; } } ul{ border:1px black solid; } li{ display:inline; } li a{ display:inline-block; text-decoration:none; background:red; padding:13px 10px; text-align:center; width:10%; position:relative; z-index:100; overflow:hidden; vertical-align:top; transition: all .5s; } span{ position:absolute; top:0; left:0; height:100%; width:300px; z-index:-1; } a:hover span{ animation: men .5s; } a:hover{ background:#CFA883; color:white; }

<div><p>123</p></div> *{ margin:0; padding:0; } p{ display:inline-block; background:red; overflow:hidden; vertical-align:top; } div{ border:1px black solid; } У inline-block базовая линия проходит через последнюю строку внутри него, после задания инлайн-блоку overflow:hidden; базовая линия стала отсчитываться от нижней границы самого блока из-за этого высота строки контейнера увеличилась. Теперь не могу понять когда при задании инлайн-блоку vertical-align:top; базовая линия начинает проходить снова через последнюю строку внутри него?

Ну да, в моём примере 1 строка, соответственно 1 лайн-бокс. Так происходит потому-что высота лайн-бокса расширилась до размеров второго блока, хотя высота строки у первого блока больше.... Или вы хотите сказать что высота строк суммируется, и если у второго блока высота строки 10рх, а строк 4 (соответственно и лайн-боксов) то в сумме получается лайн-бокс растянулся до 40рх?