Как расположить <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; } |
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> |
В Elementor Pro есть виджет отзывов, отображается не корректно. Нужно как-то строки с фото, заголовком, вторым заголовком и текстом поменять местами. Понял что это можно сделать через пользовательские CSS используя order. Но не получается пока. Помогите пожалуйста кто сталкивался
https://codepen.io/codepcod/pen/abxpRGd
swiper-slide set to fixed width but it doesn't work, why is it stretched to fill the whole screen, I tried wide display but it doesn't work in my unit
Здравствуйте, я новичок в сфере веб-разработки и очень нужна помощь. Там, где li с ссылками, все ссылки становятся заглавными буквами, с помощью СSS исправить не получается. При удалении тега ссылки текст становится нормальным.Пожалуйста, подскажите, что делать?
Ребята, почему у меня 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"> |
А на странице всё белое и без стилей, будто я ничего не подключал. Что может быть не так? 😤