Новые ответы с меткой html
1
голос
Принятый
Картинка заслоняет уголки у блока
для уголков лучше сделать маленькие блоки и задать им бордер по нужным сторонам, все это выровнять и лучше задавать размеры в процентах или вьюпортах. Я так накидал, для наглядности.
body {
...
-1
голос
css, как добиться резиновости от отступов для flex или grid?
ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 30px;
list-style-type: none;
}
li {
width: calc(50% - 15px);
}
@media (max-width: 1200px) {
ul {
gap: 30px ...
1
голос
Принятый
Как сделать чтобы блок скролился мышкой в overflow-hidden
(function(){
let speed = 2; // Скорость скролла.
let scroll = document.querySelector('.scroll');
let left = 0; // отпустили мышку - сохраняем положение скролла
let drag = false;
let coorX = 0; // ...
-3
голоса
1
голос
Анимация плавного появления при скролле
(function () {
var square = document.querySelector('.square-wrapper');
var observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
var entrySquare = entry....
1
голос
Почему псевдо элемент(.todo-item__span::after) появляется не по середине?
По крайней мере, у меня работает так:
.todo-item__container-field {
display: flex;
justify-content: center;
align-items: center;
}
.todo-item__span {
display: flex;
justify-...
0
голосов
Как добавить header когда страница скролится вверх?
Если правильно понял, что требуется, то можно попробовать вот так (объяснил, возможно, не совсем хорошо, но как получилось):
const header = document.querySelector('.header');
let scrollPrev = 0; //...
2
голоса
Как добавить класс другому блоку в зависимости от слайда swiper.js?
Можно обратиться к документации Swiper.js и почитать раздел "Methods & Properties". Там обнаружим, что Swiper предоставляет возможность получить свойство слайда swiper.realIndex - "...
0
голосов
Не могу разобраться с вложенными циклами в js
Еще один подход: первый цикл - шаг в 10, второй - шаг в 1.
for (let i = 10; i <= 30; i += 10) {
let num;
for (let j = 1; j <= 3; j++){
num = i + j;
document.write(num + ' ...
1
голос
При нажатии на кнопку в блоке меняется текст и через время текст возвращается в исходное положение
Потому что izm -- это Ваша кнопка, а не текст и Вы скрываете всю кнопку, где предварительно заменили текст, просто сделайте console.log(izm). Консоль естественно не поможет решить проблему, но поможет ...
1
голос
Принятый
Подскажите в чем проблема. Ошибка ERR_FILE_NOT_FOUND при появлении картинки в окне
Проблема была в контексте
document.querySelectorAll('.container-gallery .gallary-icon').forEach(img => {
img.addEventListener('click', ({target}) => {
const {src} = target
...
1
голос
Почему при нажатии на popup он закрывается?
Потому что EventListener передаёться всем наследникам. Если например ты поставишь EventListener клика на BODY то куда-бы ты не кликнул он всегда отработает.
Решение? Проверить event.target. А точно-ли ...
1
голос
Наложение блоков друг на друга
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge&...
0
голосов
Принятый
Как растянуть input на всю ширину родителя?
если вам нужно растянуть input на всю ширину div'а то уберите max-width и используйте используется просто width со значением 100%.
max-width не задает ширину компонента, а указывает на максимальное ...
-1
голос
Как зафиксировать объекты при масштабировании
Вы можете использовать свойство max-width для ограничения ширины контейнера с текстом, чтобы он не плавал при масштабировании страницы. Чтобы форма двигалась вместе с текстом, вы можете добавить ...
0
голосов
SASS не работает один класс
всё дело было в строке display: block. Надо было добавить в &__secondary
0
голосов
Как сделать одинаковую высоту слайдов в Slick Slider
Для того, чтобы высота слайдов была одинаковой и зависела от высоты самого большого слайда, можно использовать JavaScript.
Код JavaScript должен быть добавлен перед закрывающим тегом body. В этом коде ...
2
голоса
Принятый
Как сделать одинаковую высоту слайдов в Slick Slider
В своё время на просторах интернета нашёл вот такой jQuery-скрипт, вполне рабочий:
function carouselNormalization() {
var items = $('.slide'), //grab all slides
heights = [], //create empty ...
1
голос
Принятый
Рефакторинг кода JavaScript, объединение в одну функцию
Написал 100 слов, код масштабировался на 700 строк, понимаю, что можно оптимизировать, только не знаю как
Можно использовать вариант, что я давал по ссылке...
Делаем словарь для неких "ключей&...
2
голоса
Принятый
как сделать анимацию движения таракана
tx, ty, lastTargetTime отвечают за цель к которой таракан бежит. Цель меняется случайно с интервалом около двух секунд.
t, lastT измеряют время между последовательными вызовами update.
aspeed, vspeed -...
4
голоса
Как сделать рамку так чтобы одна часть была над другим элементом а другая под другим элементом?
Две рамки блока-обёртки будут под изображением, а две других рамки создаём с помощью псевдоэлемента, который будет над изображением за счет абсолютного позиционирования. Само изображение тоже с ...
1
голос
как вытащить заблюренный текст
Давайте разберемся изначально с правилами.
Код нужно указывать в формате текста, это очень важно.
Обязательно пишите url сайта для полного понимания сути вопроса.
Теперь к самому вопросу.
Сайт ...
0
голосов
Принятый
Как сделать, чтобы контейнер было видно только внутри карточек
Как оказалось, есть background-attachment (или же в tailwind - bg-fixed), который красиво решает эту задачу.
Может не идеально (т.к. градиент идёт от края экрана к другому краю), но довольно круто.
...
1
голос
Принятый
Как в ссылке заменить атрибут href на другой и закодировать путь в Base64
как закодировать содержимое HREF в Base64 и после кодировки заменить атрибут href на придуманный атрибут link
Предложу вот такой вариант...
const o = document.querySelector('.button')
let v = o....
0
голосов
Swiper внутри flex элемента растягиваются слайды, mw0 не помогает
Просто добавь flex-элементу в котором находится слайдер min-width: 0; и все сразу в норму придет.
1
голос
Принятый
Как сделать счетчик ввода значений?
Впервые такое реализовываю, было интересно! Думаю можно это сделать как-то и лучше.
В моем варианте мы слушаем событие input у каждого input, убираем все символы кроме цифр и оставляем только один ...
0
голосов
Анимация текста как у Spotify
Если всегда известен цвет заднего фона, то можно сделать вот так на чистом CSS/HTML:
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: ...
1
голос
Некорректно работает свойство height:100% для дочерних элементов
Вам нужно указать высоту для родительского элемента .section div2And3Parent. Один из способов сделать это - сделать его растягивающимся по высоте, используя flexbox:
.section.div2And3Parent {
flex: ...
2
голоса
Высота ребенка по всю высоту скролла родителя + абсолютный блок
Без JS мне кажется не обойтись.
Высчитываем высоту скролла .content, учитывая при этом padding
let content = document.querySelector('.content'),
contentPaddingTop = parseInt(window....
1
голос
Принятый
Вывод результатов теста на JavaScript
Расчет оценки реализовал через switch, а вывод результата в div с помощью document.getElementById("resultBox").innerHTML через ид div'а.
Также сами вопросы лучше отображать сразу а не через ...
0
голосов
Карточки слайдера slick
картинкам можно задать ширину в таких единицах измерения как (vmin) и при этом aspect-ratio: 9/16 - например,
а текст (поиграть с calc()):
font-size: calc(.5em + 2vw)
в таком роде подбирать…
1
голос
Принятый
Подскажите пожалуйста, с чем связано не ровное увеличение картинки при наведении?
с чем связано не ровное увеличение картинки
Связано это с тем, что Вы, при наведении, заменяете свойство transform, а нужно добавлять трансформации. То есть было:
transform: translate(-50%, -50%);
...
1
голос
Принятый
Некорректно работает свойство height:100% для дочерних элементов
Скажем так: во первых сложно работать с размерами, когда у вас у совершенно разных блоков один класс section
<div class="main-wrapper">
<div class="section"> <&...
1
голос
Почему мой фон отображается только на одной части сайта
Твой код отрабатывает так, как ты его написал.
Из багов, у тебя не закрыт тег со стилями.
А так же рекомендуется подключать основной файл стилей CSS в самом конце среди всех подключений. Так, как ...
1
голос
Почему не получается прижать грид элемент полностью к верху?
У вас всего два ряда, потому и сетка так выстраивается.
Попробуйте так:
.reviews__row {
display: grid;
grid-template-areas:
"reviews__swiper reviews__info"
"...
0
голосов
Как срезать углы у блоков с картинкой на фоне?
Лови вот еще пример
body {
background: #cbcbcb;
}
.nk {
background: #1caaaa;
background: linear-gradient(135deg, transparent 15px, #1caaaa 0) top left, linear-gradient(-135deg, transparent ...
1
голос
Принятый
javascript как корректно указать путь к файлу находящемуся на несколько уровней выше
Попробуйте таким образом:
fetch('../../data.json')
2
голоса
Почему-то перестало работать подчеркивание + счетчик
У вас была проблема в том, что вы получаете tasks единоразово и не обновляете их.
Теперь при каждом обращении к tasks они запрашиваются по новой.
UPD:
Поправил момент с подчеркиванием.
Изменил метод ...
0
голосов
Принятый
Динамический :src возвращаемый из геттера или функции, Vue, Vite, Vutify
Итак спустя тысячи перестановок src и чтения документации vite(у меня проект собран на vuetify в нём по умолчанию используется vite).
Я пришёл к правильному решению этого вопроса. Всё, что нужно было ...
0
голосов
Как изменить модульное окно, чтобы оно открывалось в этой же вкладке (css+html)
Код рабочий. Возможно, Вы его запускаете как-то неправильно?
.u-btn-3 {
font-weight: 700;
text-transform: uppercase;
font-size: 0.875rem;
letter-spacing: 1px;
margin: 20px auto 0 15px;
}
...
1
голос
Как затемнить только картинку не затемняя элементы
Простейший способ - использование нескольких слоёв в фоне. В примере, верхний слой - это одноцветный сплошной полупрозрачный градиент (для наглядности указан розовый цвет, для затемнения измените цвет ...
5
голосов
как сделать анимацию движения таракана
Я никак не могу заставить жука проворачиваться в сторону перемещения последующей позиции.
Решено. Нужно было ставить дельту Y первой, и умножать сами новые X и Y на -1, чтобы жуки не шли задом на ...
0
голосов
Почему появляется вертикальный скролл?
Как вам уже подсказывали в комментариях, просто в main замените height: 100% на height: calc(100% - 60px) 60px - высота header.
* {
margin: 0px;
padding: 0px;
}
a {
text-decoration: ...
0
голосов
Почему появляется вертикальный скролл?
Попробуйте мой вариант
* {
margin: 0px;
padding: 0px;
}
a {
text-decoration: none;
}
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
font-...
0
голосов
Почему появляется вертикальный скролл?
Именно в этом случае скролл дает grid-template-rows: 1fr 2fr; у контейнера
* {
margin: 0px;
padding: 0px;
}
a {
text-decoration: none;
}
html {
width: 100%;
height: 100%;
}
...
1
голос
Принятый
Как корректно отобразить данные из файла json на HTML странице ( переключая значения на самой html странице)
Завести переменную data. При погрузке данных с файла их закинуть в переменную. И добавить динамически option справильными атрибутами в select
Повесить слушателя (addEventListener) на select на ...
0
голосов
Принятый
При обновлении страницы ошибка 404
Если кто-то тоже столкнулся с такой проблемой на github pages, то отловить такую ошибку можно создав в корне проекта файл 404.html, теперь дефолтная страница заменится на кастомную, в которой можно ...
0
голосов
Не работает SlickSlider в Chrome
Возможно, проблема заключается в путях к файлам, которые используются в вашем слайдере. Когда вы запускаете сайт VSCode, сервер раздает файлы с помощью локального хоста, и пути к файлам будут ...
1
голос
как изменить размер linear-gradient
Я думаю более корректно делать такой эффект через псевдоэлемент ::before (или ::after).
У вас расширяло шире текста, ибо вы давали background для span, а у него имелся padding, я его перенес на a, не ...
0
голосов
Принятый
justify-content: space-around; - как при нечетном количестве блоков выставить последний элемент под левый блок над ним?
Извините, наверное не в тему, так как нужно было на flex решить, но на grid легче)).
Если нужно, что бы блоки зелёные занимали большую площадь, нужно просто вместо 2fr сделать 3fr например.
На flex ...
50 лучших ответов включены
Связанные метки
html × 35442css × 20203
javascript × 14104
jquery × 4955
php × 3827
вёрстка × 2425
css3 × 2192
html5 × 2020
bootstrap × 1312
svg × 1014
веб-программирование × 1004
python × 782
ajax × 637
flexbox × 522
wordpress × 521
mysql × 410
django × 406
java × 405
адаптивная-верстка × 363
css-animation × 321
парсер × 318
frontend × 316
анимация × 297
reactjs × 294
input × 285