HTML Coding
Subforums
-
- 30.1k
- posts
-
- 1k
- posts
-
- Про макеты
- By klierik,
Explore Questions
-
0 votes0 answers
-
0 votes0 answers
-
0 votes0 answers
-
0 votes1 answer
-
0 votes3 answers
29,542 questions in this forum
-
Вопрс по макету
Есть вопрос по макету. (psd) Макет более 80мб. На форуме не выложишь. Где лучче залить файл и выложить ссылку на него? (Гугл диск подойдет?) Может у кого, знающего найдется 10 минут, чтоб ответить на вопрос по верстке?
0 votes0 answers -
Flex и flex-basis
Зачем нужен flex-bsis, если есть width и hieght? Смысел?
0 votes3 answers -
Как разместить изображения чтобы они отображались квадратными
Есть несколько изображений, как горизонтальные так и вертикальные. Как их можно выстроить в ряд так, что бы все они стали квадратными. То есть, растянуть картинку меньшей стороной по размеру блока, а та часть что вылазит из блока - скрыть. Вместо продолговатой картинки отобразить только ее середину в форме квадрата. Вот пример, но это не совсем то, надо чтобы картинки масштабировались а там просто отображается верхний угол - https://jsfiddle.net/jk8todrq/
0 votes7 answers -
Как сделать кастомный чекбокс?
Приветствую! Подскажите, плиз, как сделать чекбокс как на скрине? Я новичок в верстке и что-то не могу разобраться в кастомизации данной штуки
0 votes0 answers -
Почему border делает отступ?
Приветствую! Создаю свой первый сайт. Помогите пожалуйста понять и решить, почему при использовании атрибута border он делает отступ снизу от контента? Padding нигде не стоит в коде. Прикрепляю скрины как выглядит непонятный отступ и результат, который хочу достичь позже Мой код: HTML <main> <div class="menu text stroke"> <nav> <a href="./Playlists.html">PLAYLISTS</a> <a href="./LocalArtists.html">LOCAL ARTISTS</a> <a href="./Shop.html">SHOP</a> <a href="./Schedule.html">SCHEDULE</a> <a href="./About.html">ABOUT</a> …
0 votes3 answers -
Дата публикации материала HTML
Здравствуйте, как (желательно не JS) я могу преобразовать на сайте дату публикации материала, например: Фото машины, опубликовано: 25.07.2022
0 votes1 answer -
Можно ли сделать такой сложный макет
Скажите пожалуйста, можно ли создать такой макет? Все что я сумел сделать это выстроить 4 блока - https://jsfiddle.net/nczm2aps/ а вот как сделать вертикальные разделения? Флекс во флексе?
0 votes1 answer -
как сделать полупрозрачный border
как сделать полупрозрачный border как на этом сайте http://css-tricks.com/ вот - исходный код смотрел и этого там нет
0 votes23 answers -
Класс header_wrapper не принимает свойства css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Discover Amazing places in Japan</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <header class="header"> <div class="wrapper"> <div class="header_wrapper"> <div class="header_logo"> <a href="/" class="header_logo-link"> <img src="./img/svg/odigo-Logo.svg" alt="Discover A…
0 votes1 answer -
Заголовок и кнопка в окне чата
Добрый день, есть кнопка на странице по нажатию на которую открывается окно чата. Когда добавляю хедер, он отображается не в окне чата, а на главной странице. Помогите заставить его появиться в окне чата.
0 votes0 answers -
Как отцентрировать один элемент внутри flex контейнера?
Добрый день. Есть три блока разной величины расположенных горизонтально внутри контейнера. Нужно второй блок расположить ровно по центру по горизонтали, как указано на скриншоте. У меня же получается так, что навигационный блок смещается чуть правее
0 votes1 answer -
Как разместить фото друг за другом?
Вот код , подскажите как мне сделать чтобы фото шли друг за другом с описанием под фото <div class="block"><img src="/admin/files/_MG_2882.jpg" width="20%" /> <p><a href="https://prozuby.clinic/specialist/sryvkina-nelli-vaceslavovna">Срывкина Нелли Вячеславовна</a></p> <p><strong>Стоматолог-терапевт</strong></p> <p><strong>Опыт работы 8 лет</strong></p> <div class="contmeleft"><img src="/admin/files/_MG_2961.jpg" width="20%" /> <p><a href="https://prozuby.clinic/specialist/nikolaj">Дрюкова Ксения Витальевна</a></p> <p><strong>Стома…
0 votes1 answer -
не работает padding и margin
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Скачать новеллу</title> <link rel="shortcut icon" href="i.ico" type="image/x-icon"> <link rel="stylesheet" href="style.css"> <!-- ШРИФТЫ --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet"> <!-- ШРИФТЫ 2 --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.…
0 votes0 answers -
Как здесь правильно задать позиционирование?
Как здесь (https://skr.sh/sEfRBjoTUH1) правильно задать позиционирование? <ul class="list bottom-header-container-list"> <li class="bottom-header-container-list-item"> <div> <img src="./images/mail-svg.svg" alt="иконка эл.почты" width="28" height="22"> </div> <p>Mail Us</p> <a href="mailto:Info@bluecollar.com">Info@bluecollar.com</a> </li> <li class="bottom-header-container-list-item"> <div> <img src="./images/phone-svg.svg" alt="иконка телефона" width="26" he…
0 votes0 answers -
Не работает js на айфоне
$(function () { var mixer = mixitup('.directions__list'); $('.directions__filter-btn').on('click', function () { $('.directions__filter-btn').removeClass('directions__filter-btn--active') $(this).addClass('directions__filter-btn--active') }) })
0 votes3 answers -
Блок article не растягивается на всю ширину, при media запросе на 900px
https://vasyldubno.github.io/project1/#blog https://github.com/vasyldubno/project1
0 votes1 answer -
Как сделать крестик в бургер меню
https://vasyldubno.github.io/project1/ https://github.com/vasyldubno/project1 бургер меню появляеться на ширине менее 1100px
0 votes1 answer -
Как сделать чтобы кнопки были на одной линии Listen, Watch, Read
https://vasyldubno.github.io/project1/#blog https://github.com/vasyldubno/project1
0 votes1 answer -
Почему фото увеличиваеться при добавлении текста
HTML Скрытый текст CSS Скрытый текст
0 votes1 answer -
Помогите выровнять подписи
Помогите новичку, подписи пляшут, как их уровнять не понимаю. Делаю задание через bootstrap
0 votes0 answers -
Не правильная адаптация на сайте
Всем привет, у меня такой вот вопрос, делаю сайт через react и при изменении расширения что-то идёт не так и какой-то бред получается, подскажите как решить данную проблему. Я вообще не понимаю из-за чего это происходит, по этому не могу нормально объяснить 😅.
0 votes0 answers -
CSS transition
Не работает transition при появлений модального окна: <a class="btn">Modal</a> <div class="modal"> <div class="overlay"> <div class="content"> <a class="close">X</a> <h1>Title</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellat asperiores rerum animi officiis minus corporis iure voluptate accusantium, ut optio ratione iusto nemo delectus. Quasi illum libero dolorum neque?</p> </div> </div> </div> //scss .modal .overlay{ position: fixed; top: 0;left: 0; width: 100%;height: 100%; backgroun…
0 votes1 answer -
Помогите разобраться с макетом
Помогите пожалуйста разобраться с макетом, не пойму как это реализовать. Пример на картинке. Необходимо чтобы центральный блок был фиксированного размера, а боковые растягивались по бокам до краев экрана и вниз по высоте центрального блока. При этом, фон страницы желтый, а в боковых блоках в качестве фона используется изображение с прозрачностью которое в результате должно оказаться на том, нижнем, желтом цвете. Тут заготовка которая не работает (блоки стоят друг на друге) - https://jsfiddle.net/26fen5mk/1/
0 votes3 answers -
При наведені підстрибує текст
При наведені на навігацію підстрибує текст! What should I do? https://fluffy-kringle-4f9fb0.netlify.app/
0 votes1 answer -
Как из ссылки сделать кнопки?
Мне из ссылки нужно сделать такие кнопки как на картинке. Соответственно нужно получить две ссылки одна активная подсвечивается определенным цветом, вторая не активная прозрачная не подсвечивается. Значит здесь нужно применить два стиля. Наведение мышкой не подходит, так как, эти ссылки будут менять в зависимости от перехода на страницу. Вот код примера здесь сделано на input’ах мне нужно тоже самое только на ссылках. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div id="test"> <form>…
0 votes2 answers
-
Обсуждения
-
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ -
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ Портфолио https://www.behance.net/d4d4186e
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-