HTML/CSS

Пользователь

от autumn_parker , в категории: HTML/CSS , 6 дней назад
1 ответ последнее сообщение 5 дней назад от gussie.jones

Ребята, почему у меня 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 добавлял — ничего не помогает. Может, я что-то упускаю?

Пользователь

от alisa.bahringer , в категории: HTML/CSS , 6 дней назад
Нет ответов

Почему у меня <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% в стилях! Нужно что-то ещё? Раньше такого не было 🤯

Пользователь

от enid , в категории: HTML/CSS , 6 дней назад
Нет ответов

Всем привет! Почему у меня 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 совпадает, но при клике страница не прокручивается. Уже с ума схожу — кто сталкивался с таким?

Пользователь

от forest , в категории: HTML/CSS , 6 дней назад
Нет ответов

Ребята, спасайте! 🙏

Пытаюсь вставить 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("Привет!");
}

Но при нажатии на кнопку — ничего не происходит. Что не так?

HTML/CSS