AlexZaw

Ответьте себе на пару вопросов. Происходит ли загрузка изображения пользователю в этом случае? Что такое nofollow и для чего он предназначен?

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

Плагин обновлен до версии 2.0 (для браузеров Chrome, Opera, FireFox, EDGE, для Safari будет позже), в котором добавлена вторая кнопка. Для желающих оставлена версия 1.1 с одной кнопкой. Скачать можно по старому адресу: https://github.com/AlexZaw/SelectCode Версия для FireFox так же доступна в магазине расширений по адресу: https://addons.mozilla.org/ru/firefox/addon/selectcode-for-htmlforum-io/

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

А существует поддельный? ?

Win10, Opera 56 звук есть, control работает. Возможно дело в версии браузера и Opera 36 просто не поддерживает mp3 формат. Попробуйте протестировать с файлами в wav или ogg/vorbis формате http://htmlbook.ru/html/audio.

Это мне напоминает анекдот. Сломалась у мужика машина, ну он капот открыл, ковыряется там. Мимо проходит маленький мальчик и говорит: - Дяденька, а я знаю что у вас сломалось! Мужик его спрашивает: - Что? Мальчик: - Машина! Вот и у вас так-же - проблема в меню. Нужно "под капот" лезть и смотреть.

В приведенном коде никаких отступов нет, меню прижато к левому краю.

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

Эммм... А зачем вам схлопывающиеся маржины? От этого что-то зависит? И да, у inline-block маржины тоже не схлопываются. А вообще, используйте что удобнее

<div class="wrapper"> <div class="children"></div> <div class="block"> <div class="parent"></div> <div class="parent"></div> </div> </div> .wrapper{ position: relative; } .block { width: 200px; height: 200px; overflow-y: auto; border: 1px solid #000; } .parent { position: relative; background-color: red; width: 100%; height: 100px; margin-bottom: 30px; } .children { position: absolute; top: 15px; left: 100px; width: 200px; height: 50px; background-color: yellow; z-index: 2; } Либо сделать блок .children последним ребенком .wrapper и тогда можно без z-index обойтись

Можно вот так сделать: https://codepen.io/AlexZaw/pen/vVapYd Либо, если известна высоты верхних и нижних частей, можно с помощью calc задавать максимальную высоту для sidebar__navigation. Если высоты неизвестны то можно высчитывать их с помощью js. С помощью гридов тоже, скорее всего, можно сделать так как вы хотите

Ну почему же никак? Можно и на чистом css это сделать, правда придется 30 кнопок делать, но такой функционал вполне себе реализуем. Пример на три позиции: живой пример: See the Pen ReBjPo by Alexandr (@AlexZaw) on CodePen. код <div id="wrap"> <input id='i1' type="checkbox"> <label for="i1" class='l1'></label> <input id='i2' type="checkbox"> <label for="i2" class='l2'></label> <input id='i3' type="checkbox"> <label for="i3" class='l3'></label> <input id='i4' type="checkbox"> <label for="i4" class='l4'></label> </div> <button id='reset'>reset</button> #wrap { position: relative; } button { margin-top: 50px; } input { display: none; } input:checked + label + input + label { display: block; } label { width: 100px; border: 1px solid #000; display: inline-block; height: 20px; position: absolute; top: 0; left: 0; } label:not(:nth-of-type(1)) { display: none; } label:after { position: absolute; height: 100%; top: 0; left: 0; display: block; content: ""; } .l2:after { width: 33%; background: #f00; } .l3:after { width: 66%; background: #ff0; } .l4:after { width: 100%; background: #0f0; } reset.onclick=function() { var inputs = wrap.querySelectorAll('input'); for (var i = 0; i < inputs.length; i++){ inputs[i].checked = false; } } Возможно даже счетчик сюда можно прикрутить, чтобы для каждой позиции ширину не задавать. JS в примере используется только для кнопки сброса

Сделайте .sidebar{ max-height: 100vh; overflow-y: auto; } и для .sidebar__wrapper вообще уберите высоту. Тогда, если пунктов меню будет мало, сайдбар будет по высоте контента, а если много будет растянут по высоте экрана и появится скролл

Блин, точно, в блоках же есть инлайновый контент! Четвертый блок остается на месте, а выталкивается его контент, так как он то "знает" про обтекание.Спасибо! Вот что значит давно не работать с float - все забывается.

Почему третий блок накладывается на 4 понятно. Почему растягивается контейнер тоже понятно. Непонятно почему четвертый блок растягивается по высоте на весь контейнер(включая блоки 1 и 2), когда, по логике, он должен быть по высоте контента и вообще вести себя так как будто рядом никого нет.

Да это понятно, просто указал на такое поведение. Причем если с шириной все понятно, то откуда берется высота не совсем ясно

Действительно, про то что можно отменить обтекание с одной стороны, я как то не подумал. ps.только наблюдается один забавный эффект, если убрать фон у блоков 1-3, и назначить фон для блока 4, то у всех блоков будет фон четвертого блока, так как он растягивается на весь контейнер, так что решение хоть и неплохое, но с глюками

Странно, а какого решения вы ждете с учетом того что js использовать нельзя? Тем более что другого варианта все равно нет - либо две колонки ( если порядок на мобильном не важен), либо гриды. И будет вам счастье, - и блоки будут от высоты не зависеть, и перестроить их в одну колонку на мобильном можно...А то что вы время на анимацию тратили и все остальное, так это ваше дело... Или вы хотите что-бы за вас все сделали? Тогда, извините, вам в другой раздел...

Разбейте на две колонки на широком экране, и всех делов.

У вас указан путь относительно корня сайта. Если вы просто открываете страничку у себя на компьютере, без использования веб сервера, то такая ссылка работать не будет

Вы маленько путаете что такое домен, но нет, не нужно. Вы ведь устанавливаете локальный веб сервер, он у вас даже при отключенном интернете будет работать. Инструкции по установке можно легко нагуглить

Установить локальный веб сервер, например XAMPP

Ошибочка вышла, оказывается где-то не убрал стили, поэтому все работало, так как повторить такой фокус не удалось ? А я всю голову сломал почему оно работало ?

<div class="wrapper"> <div class="header">header</div> <div class="content">content</div> <div class="footer">footer</div> </div> *{ margin: 0; } html,body{ height: 100%; } body{ background: url('http://placekitten.com/50') top repeat-x, url('http://placekitten.com/50') repeat-x bottom; } .wrapper{ position: relative; min-height: 100%; } .footer{ position: absolute; bottom: 0; }