Новые ответы с меткой html
0
голосов
2
голоса
Принятый
Как сделать такие углы у картинки?
Простой и редактируемый вариант через псевдоэлементы. Более сложный и сложно редактируемый - через path.
Пример через псевдоэлементы:
.productSaleBonusBlock {
background: #f54c5f;
border-...
0
голосов
Как правильно растянуть средний элемент? (flex)
.wrapper {
min-height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 2%;
}
.content {
height: 100%;
display: flex;
flex: 1;
align-items: ...
1
голос
Принятый
Как правильно растянуть средний элемент? (flex)
Для .wrapper укажите высоту height: 100vh; т.е. 100% от высоты вьюпорта.
Так же box-sizing: border-box чтобы padding не "выдавливал" свои 2%.
Для блока видео задайте 100% высоту и ширину, ...
0
голосов
Hover и After плохо работают
Вопрос решен
.firstblock__item2 {
background-color: #fff;
height: 250px;
width: 400px;
display: flex;
justify-content: center;
align-items: center;
font-style: italic;
font-...
1
голос
Принятый
Hover и After плохо работают
треугольник этот появляется не в самом углу блока
У вас блок 400x250px, а "треуголник" позиционируете на 350x350, как думаете, почему он не в самом углу?
Раз вам нужно разместить его в ...
1
голос
Принятый
Автоматическая подстройка ширины по длине текста
section {
display: grid;
grid-template-areas: ". co .";
}
.container {
display: grid;
grid-area: co;
background: red;
word-break: break-all;
}
<section>
<div class="container"...
0
голосов
Как пройти по DOM и собрать данные с input в древовидный объект?
Если собираешься отправлять файлы через JSON, то скорее всего никак...
Если приёмщик PHP или NodeJS то можно вот так. Что в express body-parser, что PHP Умеют понимать вот такой вот синтаксис.
<?...
1
голос
Расстановка блоков
Удалите float: left; отсюда:
.post-body .snippet-thumbnail{
float: left;
}
И добавьте:
.post-body {
display: flex;
align-items: center;
}
0
голосов
0
голосов
Как можно узнать высоту страницы в пикселях?
Я думаю, самым верным вариантом будет такой. Через js.
document - обращаемся к текущей странице
documentElement - наш всеобъемлющий тег , можно было бы обратиться к body, но есть риск схлопывания, ...
2
голоса
Принятый
Расположенные в ряд иконки с центрированной снизу надписью
Так?
.square {
width: 76px;
box-shadow: rgba(46, 45, 36, 0.15) 0px 0px 6px, rgba(46, 45, 36, 0.15) 0px 3px 6px;
border-radius: 8px;
height: 76px;
margin: 8px;
font-size: 14px;
margin-...
0
голосов
Как расположить иконку слева, а контент, т.е. текст(это h3 и p), справа и ещё h3 и p были друг под другом. Есть пример с фото
Вариант на Flex.
.grid {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 100%;
}
.grid .item {
display: flex;
justify-content: flex-start;
align-items:...
1
голос
Принятый
Как расположить иконку слева, а контент, т.е. текст(это h3 и p), справа и ещё h3 и p были друг под другом. Есть пример с фото
Так годится?
div {
display: inline-block;
width: 30%;
border: 1px solid gray;
padding: 5px 5px 5px 60px;
box-sizing: border-box;
}
img {
margin-left: -55px;
float: left;
}
b {
...
0
голосов
Как сделать отступ в право на 7.45px у SVG&
.. отступ в право на ..
Сместить вправо или всё таки отступ справа..
Если сместить, то в коде ниже оставьте как есть, а если отступ справа, то замените margin-left на margin-right.
svg path {fill:...
4
голоса
Принятый
Имеет ли смысл оборачивать абзацы в теги
Если это семантически абзац - заворачивайте в p, если это заголовок - заворачивайте в h1/h2/h.. Если картинка - в img (а не как один мессенджер - телеграм, который в вебверсии заворачивает картинку в ...
0
голосов
Открытие меню при hover?
$('.catalog-header__link').hover(function() {
$(this).find('.catalog-header__item').toggleClass('active');
})
.bottom-header__catalog {
max-width: 800px;
margin: 0 auto;
position: relative;
}
...
0
голосов
Принятый
JS Как посчитать количество повторяющихся слов в строке?
Вариант 1. Через вспомогательный объект.
let text = "да да да нет нет угу угу ыы ага ага";
let words = text.split(/\s+/);
let qty = 0;
let hashes = {};
words.forEach(v => {
hashes[v] = ...
0
голосов
JS Как посчитать количество повторяющихся слов в строке?
function TwoString(initStr) {
// разбиваем строку на массив, по пробелу
const strItems = initStr.split(' ');
const result = {};
strItems.forEach( item => {
// приводим в один регистр,...
0
голосов
Как сделать отступ в право на 7.45px у SVG&
Оберни его в wrapper и дай ему стиль
padding-right: 7.45px;
2
голоса
Принятый
Hover эффект блока
Добавил border-rdius + rotate для более эффектного появления:
.main {
height: 200px;
width: 200px;
background: red;
position: relative;
overflow: hidden
}
.main h1 {
position: ...
0
голосов
Как подключить шрифт в css
По всей видимости - да,
можете сами себя проверять, клик на этот значок и потом курсор наводите на элемент, появляется подсказка
0
голосов
Принятый
Обновление изменённой с помощью ajax сессии
В качестве быстрого решения предлагаю следующее:
перенесите код, который формирует корзину из index.php в файл CreatingShoppingCart.php. При загрузке страницы и при каждом изменении корзины ...
2
голоса
Принятый
Как в JS изменить Html код который находится в переменной?
Пример через DOMParser:
let sourceString = "<span id='test'>test</span>";
let parser = new DOMParser();
let doc = parser.parseFromString(sourceString, "text/html");
doc.querySelector('#...
0
голосов
Ширину блока по размеру содержимого (блок скролится)
В классе пропиши .right__child {width: auto; flex-shrink: 1;}
2
голоса
Как прижать span к тексту
Можно так, просто span переместить в p
<p class="blockquote-text">
<span>“</span>
GAME OVER —
это место незабываемых впечатлений
<span>”&...
0
голосов
audo mp3 сделать чтоб не могли скачать
Есть вариант хранить мп3-файлы на сервере в зашифрованном виде, и для получения возможности прослушивать нужно будет один раз ввести ключ для расшифровки. После этого он сохранится в localStorage и в ...
0
голосов
Принятый
Кастомный выпадающий список стран при помощи API
проблема заключается в том, что
const openItems = openList.querySelectorAll('.form-item');
Находит два списка, НО так как второй список (страны) через fetch, то он просто еще не успевает загрузится и ...
1
голос
Не могу связать css файл и html
Советую почитать как писать пути к файлам http://htmlbook.ru/samhtml/ssylki/absolyutnye-i-otnositelnye-ssylki
В вашем случаее файл .css лежит отдельно в папке и называется style.css, а html документ ...
0
голосов
Принятый
При добавлении HTML кода с помощью .prepend()|jQuery никакие события на добавленный код не срабатывают
Заменить
$('.message-close').on('click', function() {
на
$(document).on('click', '.message-close', function() {
Не срабатывает потому. что слушатель вешается ДО того, как элемент появится на ...
1
голос
Принятый
у меня есть несколько объектов с одним классом(сердечки), я хочу сделать их красными прим нажатии через js. каждую кнопку перебирать не вариант
const element = document.querySelectorAll('.element');
element.forEach(el => el.addEventListener('click', function () {
el.classList.toggle('active');
}))
.block {
display: flex;
}
.element {...
0
голосов
Как сделать чтобы кнопка становилась активной в зависимости от того можно пролистывать или нет?
Возможно, я где-то ошибся, но логически должен быть понятен алгоритм.
let tabsCount = 4; //количество табов всего
let step = 1; //счётчик, который мы будем увеличивать при нажатии вправо, ...
0
голосов
Покрыть блок полностью изображением
.fon{
width: 1000px;
height: 400px;
background-color: wheat;
}
.img{
background-image: url('/1.png');
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
<div class=...
0
голосов
Покрыть блок полностью изображением
Это у меня получилось при помощи Волшебного выделения PAINT3D.
Берете свой оригинал делаете то же самое, потом на странице сайта, накладываете текст и нужные блоки поверх картинки, как вы уже это ...
1
голос
Как добавить данные из input в массив и записать в БД одной кнопкой?
Надо поставить всем инпутам квадратные скобки в имена, т.е.
name="name[]"
name="quantity[]"
name="price[]"
На бэке будет не $name, $price, $quantity, а $names, $prices, $...
1
голос
Принятый
Растянуть изображение по контейнеру
Если я правильно понял вопрос, то вы хотите сделать размер картинки, такой же как и круга (rect), если так, то всё что вам нужно, это передать такие же атрибуты как у rect для image.
Демо
<svg ...
1
голос
Как подключить скрипт node js к своему сайту на html?
Node.js скрипты в html файле не подключить. Только JavaScript можно подключать в html. Node.js скрипты запускаются на сервере. Ваш сайт должен отправлять запрос на сервер с данными, серверный скрипт ...
0
голосов
Подскажите как сделать открытие модального окна bootstrap в определённый промежуток времени
При посещении пользователем страницы получаете его время:
let now = new Date();
Переводите время в секунды:
const hourse = now.getHours()
const minutes = now.getMinutes()
const seconds = now....
1
голос
При клике на input внутри <td> с listener'ом функция вызывается дважды
В комментариях вам уже написали, что label, при клике на нём, согласно спецификации, вызовет клик и на вложенном input. Такое у него поведение по умолчанию. Это как при клике на ссылку с пустым href ...
0
голосов
Принятый
Добавление текста двигает блок вниз
#error-text присваиваем position:absolute; bottom:40px;
document.getElementById('btn').onclick = function() {
document.getElementById('error-text').firstChild.innerText = 'some error text here';...
0
голосов
Добавление текста двигает блок вниз
Не совсем понял, чего вы хотите.
position: fixed применен к оболочке cont, а текст и все другие элементы находятся внутри. И сдвигается не ваш блок, а содержимое блока увеличивается на высоту текста ...
0
голосов
Показать при наведении
Check out this page https://lovehairstyles.com/insanely-cute-purple-hair-looks/ here you get some sample
1
голос
Принятый
DragToScroll React, КАК?
Можно установить готовую версию react-indiana-drag-scroll. При установки на React 18 and npm >= 7 могут быть проблемы, с конфликтом peerDependencies (подробнее тут). Поэтому установить можно, с ...
0
голосов
отступы в тексте
Разве у вас здесь на картинке отступы у каждой строки? По-моему, весь текст выравнен по центру, а к первой строке добавлен отступ.
p {
max-width: 300px;
text-indent: 40px;
text-align: center;...
1
голос
Принятый
При клике на input внутри <td> с listener'ом функция вызывается дважды
e.currentTarget - Всегда совпадает с элементом, на котором обработчик события был назначен
e.target - Совпадает с элементом, на котором событие возникло.
Что происходит у вас в коде при выполнении ...
1
голос
Принятый
Удаление HTML тэгов с регулярного выражения
Нужно только URL получить
document.querySelectorAll('a').forEach(function(e) {
let url = e.getAttribute('href');
console.info(url);
});
<a href="file:/gallery/pictures/summer.html">...
0
голосов
Принятый
Блоки, отслеживание курсора HTML
document.querySelector('.block-two').addEventListener('mouseover', () => {
document.querySelector('.wrap-two').classList.add('show');
});
document.querySelector('.block-two').addEventListener('...
1
голос
Принятый
Slider js по 4кнопкам
я бы на вашем месте немного изменил логику кнопок:
во-первых нужно задать счетчик слайдеров:
let currentSlider = 0;
и фукнкцию, которая меняет слайдер:
function toggleSlider (count) {
if (count &...
50 лучших ответов включены
Связанные метки
html × 33131css × 18582
javascript × 12869
jquery × 4834
php × 3649
вёрстка × 2294
css3 × 2105
html5 × 1902
bootstrap × 1282
svg × 975
веб-программирование × 872
python × 640
ajax × 624
wordpress × 503
flexbox × 474
mysql × 389
java × 385
django × 356
адаптивная-верстка × 337
парсер × 297
css-animation × 285
анимация × 271
frontend × 269
json × 263
input × 263