Ребята, почему у меня z-index не работает? 🤯
Пытаюсь, чтобы кнопка была поверх модального окна, но она всё равно прячется за ним!
1 2 |
<div class="modal">Модалка</div> <button class="top-button">Важная кнопка</button> |
1 2 3 4 5 6 7 8 9 10 |
.modal {
position: relative;
z-index: 10;
background: #eee;
}
.top-button {
position: absolute;
z-index: 999;
}
|
Казалось бы, 999 — это больше, чем 10, но кнопка всё равно под модалкой. Что за чертовщина? 😵
Ребята, подскажите, почему у меня не работает background-image? 🙃
Пишу вроде как надо, но картинка не отображается.
1
|
<div class="banner"></div> |
1 2 3 4 |
.banner {
background-image: url("images/bg.jpg");
height: 300px;
}
|
Файл точно есть, путь правильный, но блок просто серый. Уже и background-size, и background-repeat добавлял — ничего не помогает. Может, я что-то упускаю?
Почему у меня <input type="number"> принимает буквы? 😵
Разве он не должен блокировать всё, кроме цифр?
1
|
<input type="number" name="age"> |
Но я спокойно могу ввести e, +, -, даже какие-то символы с клавиатуры. Это же не нормально, да? Или я чего-то не понимаю? 😓
Не могу понять, почему у меня не подключается CSS-файл 😠
В консоли всё чисто, но стили как будто не применяются вообще.
Вот структура проекта:
1 2 3 4 |
/project
/css
style.css
index.html
|
В index.html пишу так:
1
|
<link rel="stylesheet" href="css/style.css"> |
А на странице всё белое и без стилей, будто я ничего не подключал. Что может быть не так? 😤
Ребята, почему у меня не срабатывает transition при наведении? 😤
Хочу, чтобы цвет текста менялся плавно, но он переключается мгновенно.
1
|
<p class="text">Наведись на меня</p> |
1 2 3 4 5 6 7 8 |
.text { color: black; transition: 0.3s; } .text:hover { color: red; } |
Я же вроде всё правильно указал... Почему анимации нет? Уже и all, и ease, и transition-property пробовал — не помогает!
Почему у меня не работает адаптивность на мобильных? 😡
На телефоне сайт выглядит слишком увеличенным, всё как будто "зумнуто".
1 2 3 4 |
<head> <meta charset="UTF-8"> <title>Мой сайт</title> </head> |
Я же использую width: 100% в стилях! Нужно что-то ещё? Раньше такого не было 🤯
Всем привет! Почему у меня flex не выравнивает элементы по центру? 🤔
Хочу, чтобы всё было по центру горизонтально и вертикально, но они упорно прижаты к углу!
1 2 3 |
<div class="wrapper"> <div class="box">Привет!</div> </div> |
1 2 3 4 5 6 7 8 9 10 11 |
.wrapper { display: flex; justify-content: center; align-items: center; height: 100%; } .box { background: pink; padding: 20px; } |
А wrapper внутри body, и всё равно всё сбито влево-вверх. Почему center игнорится? Что я не учёл? 😩
Не понимаю, почему при нажатии на кнопку форма не отправляется 😵
Никаких ошибок в консоли нет, а сабмита — тоже нет.
1 2 3 4 |
<form action="/submit" method="POST"> <input type="text" name="name" required> <button type="submit" disabled>Отправить</button> </form> |
Я убираю disabled, и всё работает. Но я же в JS потом активирую кнопку — почему она не срабатывает, когда я убираю disabled через button.disabled = false;? Что-то я не так делаю?
Почему hover-эффект у меня не срабатывает на карточке? 🧐
Навожу мышку — и ничего не происходит.
1 2 3 |
<div class="card"> <p>Содержимое</p> </div> |
1 2 3 4 5 6 7 8 9 |
.card { background: white; padding: 20px; } .card:hover { background: lightblue; cursor: pointer; } |
Код вроде элементарный, но никакой реакции на наведение. Уже заколдовался... Это что, баг браузера? 😩
Не могу понять, почему у меня не работает grid-раскладка 😩
Элементы просто идут в столбик, как будто grid вообще игнорируется.
1 2 3 4 5 |
<div class="container"> <div>1</div> <div>2</div> <div>3</div> </div> |
1 2 3 4 5 |
.container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } |
Но всё как будто display: block. Пробовал и в другом браузере — такая же фигня. Что за магия? 😠
Почему у меня не работает якорная ссылка внутри страницы? 😵💫
Кликаю — и ничего не происходит.
1 2 3 4 |
<a href="#section2">Перейти к разделу 2</a> <!-- где-то ниже на странице --> <h2 id="section2">Раздел 2</h2> |
Вроде всё правильно, ID совпадает, но при клике страница не прокручивается. Уже с ума схожу — кто сталкивался с таким?
Ребята, спасайте! 🙏
Пытаюсь вставить SVG и покрасить его через CSS, но цвет не меняется 😡
1 2 3 |
<div class="icon"> <img src="icon.svg" alt="Иконка"> </div> |
1 2 3 4 5 |
.icon img { width: 40px; height: 40px; fill: red; } |
SVG точно простой, без скриптов. Почему fill: red; не работает? Я думал, можно так цвет менять...
Привет! Пытаюсь сделать фиксированное меню сверху страницы, чтобы оно оставалось на месте при прокрутке, но оно всё равно уезжает вверх 😭
Может, где-то ошибка в позиционировании?
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<header class="navbar"> <nav> <ul> <li><a href="#">Главная</a></li> <li><a href="#">О нас</a></li> </ul> </nav> </header> <main> <p>Много текста...</p> </main> |
1 2 3 4 5 6 |
.navbar { position: fixed; top: 0; background-color: white; width: 100%; } |
Вроде бы всё сделал правильно, но при прокрутке меню всё равно исчезает! Уже замучился 😩 Что не так?
Ребята, почему у меня не работает выравнивание текста по центру? 😤
Пробую сделать заголовок по центру, но он всё равно слева.
1
|
<h1 class="title">Добро пожаловать!</h1> |
1 2 3 |
.title { text-align: center; } |
А на странице он всё равно прижат к левому краю. Что я упускаю?
Почему у меня не работает JavaScript, который подключаю внизу страницы? 😩
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <title>Моя страница</title> </head> <body> <button onclick="sayHello()">Сказать привет</button> <script src="script.js"></script> </body> </html> |
А вот сам script.js:
1 2 3 |
function sayHello() { alert("Привет!"); } |
Но при нажатии на кнопку — ничего не происходит. Что не так?