AlexZaw

var formComment = document.querySelector('.write-comment'); formComment.innerHTML = '<b>' + userName + ',' + '</b>' + '&nbsp;'; formComment.appendChild(userNameHtml); Можно так: <p id='aaa' style=" padding: 10px; background: white; width: 50%;" contenteditable="true" class="write-comment"></p> <button id="btn">Click me</button> var userName = "Vasya Pupkin"; btn.onclick = function () { var formComment = document.querySelector(".write-comment"); formComment.innerHTML = "<b>" + userName + "</b>" + ", "; formComment.focus(); var sel = window.getSelection(); var range = document.createRange(); range.setStart(formComment, formComment.childNodes.length); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); };

console.log('лик по табу');

На днях была точно такая же тема:

Попробуйте адаптировать ваш код для мобильных устройств с разным расширением. С учетом того что количество текста напротив "строк" с картинками может быть разным (количество строк тоже, кстати, может меняться). Желательно еще что бы, промежуточные от основных разрешения, тоже выглядели бы прилично и не рассыпались как попало. Если получиться сделать это с легкостью - все нормально. Если же возникнут трудности, то так делать не стоит :) Я конечно придираюсь, и задаю сложные задачи для начинающего, но, в будущем, все это вам придется учитывать.

Примерно так можно: <div class="wrap"> <ul> <li> <div class="empty"></div> <img src="http://placekitten.com/200"> <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia repudiandae earum vero fuga maxime deleniti tempora debitis nulla ullam asperiores, eaque dolorum ex facilis soluta, neque suscipit. Dolor, dolores maxime.</div> </li> <li> <div class="empty"></div> <img src="http://placekitten.com/200"> <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia repudiandae earum vero fuga maxime deleniti tempora debitis nulla ullam asperiores, eaque dolorum ex facilis soluta, neque suscipit. Dolor, dolores maxime.</div> </li> <li> <div class="empty"></div> <img src="http://placekitten.com/200"> <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia repudiandae earum vero fuga maxime deleniti tempora debitis nulla ullam asperiores, eaque dolorum ex facilis soluta, neque suscipit. Dolor, dolores maxime.</div> </li> </ul> </div> .wrap { border: 1px solid #000; max-width: 800px; margin: 0 auto; } ul { display: flex; flex-direction: column; list-style: none; padding: 0; } li { display: flex; align-items: center; } li * { width: 33.33%; } li:nth-child(odd) { direction: rtl; text-align: right; } img { border-radius: 50%; vertical-align: middle; }

Сделайте плюсик отдельным блоком или с помощью псевдоэлемента и залейте фон градиентом

Зачем? Используйте обычный div, и внутри него уже расположите кнопку

Если вы сделаете активным другой пункт меню, то будет тоже самое, так что это не Home виноват :) Это пустое место, как и "большой паддинг" образуется из-за дефолтных отступов между инлайновыми элементами. Задайте для .main-menu размер шрифта ноль, а для .main-menu li установите нужный размер шрифта. Сразу же пропадут лишние отступы

Вы бы хоть указали в каком редакторе вы пытаетесь установить emmet. Вот тогда, тот кто пользуется таким-же редактором, вам может подсказать где эта консоль. А вообще, может быть, что это просто проблемы с доступом к серверу где находится плагин и все заработает через какое то время :)

document.getElementById("cell1").innerHTML=document.getElementById("cell1").innerHTML+"A";

А вот так не проще? <span class="hider"> Я родительский hider. <a href="http://google.com">Эту ссылку должно быть видно.</a> Я продолжение родительского hider. <span class="hider"> Я дочерний hider. <a href="http://google.com" class="bold">Меня не должно быть видно при наведении курсора на родителя.</a> Я дочерний hider. </span> Я продолжение родительского hider. </span> .hider { background-color: gray; padding: 7px; line-height: 1.5em; } .hider, .hider a{ color: transparent; } .bold{ font-weight: bold; } .hider:hover{ color: #000; } .hider:hover > a { color:blue } Плюсы: Работает во всех браузерах Со 100% вероятностью будет использован нужный цвет, а не цвет по умолчанию или цвет родителя. Минусы: Чуть увеличивается код. Вроде все :)

Попробуйте почитать вот тут: https://code.visualstudio.com/docs/editor/emmet Возможно отключилась какая-то из настроек

Возможно слетел плагин Emmet, ну или чем вы там пользуетесь для автозаполнения

Тогда grid. Если и он не подходит - тогда JS, ну или делать дублирование блоков и в зависимости от ширины экрана показывать/скрывать нужные блоки. Вообще-то есть. Правда там ее мало, но есть ссылки на то где можно почитать подробнее. А вообще htmlbook это старая версия сайта, новая находится по адресу https://webref.ru ну и гугл никто еще не отменял

Использовать свойство order у флексов

Знаете, я не первый день общаюсь на этом форуме и ему подобных, да и на сайтах по фрилансу периодически бываю. А вы здесь человек новый, зарегистрированный только для того чтобы создать тему с этим сообщением, и даже не указавшим пол.Так вот, к чему я все это описываю, очень часто, новые люди создающие подобные темы, не разбираются в вопросе (кстати это касается не только околокомпьютерных тем) и им кажется что (применительно к данной теме например) html версткой называется все от верстки до работы с БД. Ну или например если ты программист, то должен и телевизор уметь ремонтировать. Надеюсь теперь понятно из-за чего возникло такое предположение? Если я вас обидел, прошу извинить :)

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

Нигде и не было озвучено обратного... Даже только за верстку 5000 мало в данном случае, минимальную цену вам озвучили, и это, возможно, не обратили внимание что в архиве есть и мобильная версия

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

Либо использовать js, либо ждать когда будет поддерживаться CSS selectors level 4. А вообще, повесьте hover на элементы <li> , а не <a>

Смотря какого результата вы добиваетесь. Если в любом из ваших вариантов "убрать" меню под шапку - его просто не будет видно. А вообще воспользуйтесь позиционированием и задайте z-index

Плагин обновлен до версии 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/

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

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

Ну почему же никак? Можно и на чистом 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 в примере используется только для кнопки сброса