HTML/CSS
Ребята, подскажите, почему у меня не работает 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; } |
Код вроде элементарный, но никакой реакции на наведение. Уже заколдовался... Это что, баг браузера? 😩
Как расположить <a> в центре <div>?
Здравствуйте, мне нужна помощь касающаяся вёрстки сайта. Я установил фон и футор как <div> (фон на 85%, а футор на 15%), body установил высоту в 200hv. По началу всё было хорошо, но когда я добавил <div> для основного текста, между фоном и футаром образовалось какое-то пространство и я не понимаю как его убрать. помогите пожалуйста!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Займы онлайн на карту</title> <style> #navbar { margin: 0; padding: 0; list-style-type: none; border: 2px solid #0066FF; border-radius: 20px 5px; width: 350px; text-align: center; background-color: #33ADFF; } #navbar li { display: inline; } #navbar a { color: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; } #navbar a:hover { border-radius: 20px 5px; background-color: #0066FF; } </style> </head> <body> <ul id="navbar"> <li><a href="#">Телеграмм</a></li> <li><a href="Ссылка">Вконтакте</a></li> </ul> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Займы онлайн на карту</title> <style> #navbar { margin: 0; padding: 0; list-style-type: none; border: 2px solid #0066FF; border-radius: 20px 5px; width: 360px; text-align: center; background-color: #73c7ee; } #navbar li { display: inline; } #navbar a { color: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; } #navbar a:hover { border-radius: 20px 5px; background-color: #0066FF; } </style> </head> <body> |
У меня возникла проблема, даже не знаю как ее описать, но попробую.
При моих скудных (умственных) способностях, был написан сайт, в котором присутствует один попап, который я сделал в виде отдельного файла html, так как у меня несколько страничный сайт. Такой вариант, как мне кажется, является оптимальным, чтобы не вписывать попап в каждую страницу.
Данный попап является окном регистрации. я еле как разобрался как его вообще реализовать (через тег Iframe).
Ну и можно подумать: "Так в чем проблема, тупой школьник во всем разобрался, молодец". А вот проблема заключается в том, что я не понимаю как этот "попыт" закрывать.
У меня присутствует 2 css файла. Один для всего, а второй как раз для окна регистрации.
Вот так выглядит код для iframe:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.regwin{ border: 0; outline: 0; height: 100%; width: 100%; position: absolute; z-index: 5; opacity: 0; visibility: hidden; } .regwin:target{ opacity: 1; visibility: visible; } |
То есть, при ссылке сайт становиться видимым и осезаемым для пользователя.
Как теперь вернуть opacity и visibility к предыдущим значениям, при условии того, что нажатие происходит на новом сайте.
Можете подсказать, что делать или как можно упростить?😅
Всем привет! Столкнулся с проблемой, меняю на WordPress цвет текста но он не меняется, смотрю в код он зачеркнут и применяется глобальный цвет текста я могу как то поставить приоритет для того цвета который мне нужен?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<div class="section__photo"> <div class="section__photo-gallery"> <img class="photo__gallery" src="image/photo__bg-1.jpg" alt="" > <div class="section__content"></div> </div> <div class="section__photo-gallery"> <img class="photo__gallery" src="image/photo__bg-2.jpg" alt="" > <div class="section__content"></div> </div> <div class="section__photo-gallery"> <img class="photo__gallery" src="image/photo__bg-3.jpg" alt="" > <div class="section__content"></div> </div> <div class="section__photo-gallery"> <img class="photo__gallery" src="image/photo__bg-4.jpg" alt="" > <div class="section__content"></div> </div> <div class="section__photo-gallery"> <img class="photo__gallery" src="image/photo__bg-5.jpg" alt="" > <div class="section__content"></div> </div> <div class="section__photo-gallery"> <img class="photo__gallery" src="image/photo__bg-6.jpg" alt="" > <div class="section__content"></div> </div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
.section__photo { display: flex; flex-wrap: wrap; padding-bottom: 73px; width: 1280px; flex-direction: column; flex-direction: row; } .section__photo-gallery{ padding-bottom: 20px; padding-right: 20px; position: relative; } .section__photo-gallery:last-child(3n - 1){ margin-right: 0; } .section__content{ background: rgba(0,0,0,0.50); position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0; } .section__content:hover{ background: rgba(0,0,0,0.50); opacity: 1; } |