Jump to content

HTML Coding

Subforums

  1. Discussion of works

    Source code audit and recommendations

    30.1k
    posts

  2. Practise Templates

    Templates for self education and practise

    1k
    posts

Explore Questions

  1. Вёрстка футера на движке Xenforo

    Asked by Mondeus,

    0 votes
    0 answers

  2. Примеры верстки

    Asked by torsar,

    0 votes
    0 answers

  3. Список покидает див

    Asked by DeZ,

    0 votes
    0 answers

  4. Проблема с шириной ячеек

    Asked by ArrogantSpectator,

    0 votes
    1 answer

  5. Html кнопка

    Asked by НикитаL,

    0 votes
    3 answers

29,542 questions in this forum

  1. Как бы вы сверстали такую страничку?

    Здравствуйте, друзья. Помогите пожалуйста разобраться, в общих чертах, как верстаются подобные страницы. Нужно понять какие пожелания по верстке выдвигать при заказе. Имел плохой опыт с исполнителем который верстал таблицей в таблице! Сайт и адаптивный и резиновый. Количество столбцов меняется в зависимости от ширины экрана: 0-580: 1 столбец, 581-870: 2 столбца, 871-1160: 3 столбца, 1161-1450: 4 столбца, 1451+∞: 5 столбцов. Конкретно этот макет выполнен для разрешения 1920, поэтому пять столбцов. 1 Что выбрать для верстки подобных страниц: гриды, флексбоксы, дивы или что-то другое? 2 Тут надо использовать БЭМ, Bootstrap или что-то другое? …

    Asked by Stoer,

    0 votes
    4 answers

  2. Прелоадер не закрывается.

    При верстке сайта на Bootstrap 4.3.1 хотел сделать прелоадер на основе стандартного элемента Bootstrap - спиннера, который бы закрывался после загрузки страницы. Проблема в том, что спиннер не закрывается после загрузки страницы, очевидно заданные в скрипте стили к нему не применяются. Подскажите, пожалуйста, в каком месте я ошибся? Ссылка на ошибку (Гитхаб)

    Asked by markevil,

    0 votes
    4 answers

  3. Не работает Transition

    Не работает плавный переход, в чем проблема? .works { display: flex; flex-wrap: wrap; } .works__item { width: 25%; height: 350px; position: relative; overflow: hidden; } .works__item:hover .works__content { opacity: 1; } .works__photo { position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate3d(-50%, -50%, 0); } .works__content { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; background-color: rgba(232, 69, 69, .9); opacity: 0; text-align: center; po…

    Asked by sanya003190,

    0 votes
    1 answer

  4. Посмотрите пожалуйста ситуацию

    Как мне разместить эту фигуру на два сэкшина одновременно?

    Asked by Czar_dmitriy,

    0 votes
    1 answer

  5. Помогите разобраться с заданием с чекбокс и выполнить его

    На собеседовании дали задание, но я его не понял, можете, ПОЖАЛУЙСТА, объяснить что имеется в виду и как его выполнить. Вот задание: Используя только html и css отобразите кастомный чекбокс таким образом, чтобы: Оригинальное изображение чекбокса было скрыто. Весь функционал чекбокса был сохранен (checked – unchecked). Вместо чекбокса отображался текст, по клику на который - менялось бы состояние чекбокса на противоположное - менялся бы цвет текста.

    Asked by М_Бавыка,

    0 votes
    1 answer

  6. Помогите с кодом

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> Fucking slavse</title> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap" rel="stylesheet"> </head> <body> <header id="header" class="header"> <div class="container"> <div class="nav"> <img src="img/logo.svg" alt="OJJO"> </div> </div> </header> <section id="section" class="section"> <…

    Asked by Jisuko,

    0 votes
    4 answers

  7. font-family в Chrome для конкретного шрифта не работает

    Памагити. Не пойму, почему в Chrome и в FF не работает элементарная конструкция, а в IE она же работает. <p style="font-family: HVD Peace, sans-serif; font-size: 40pt; ">Test of font family</p> <p style="font-family: HVD Peace, serif; font-size: 20pt; ">Test of font family</p> (шрифт при этом у меня локально установлен, с url я пока не пробовал) Получаем при этом: - это предпросмотр в IE, а во всех остальных браузерах (Chrome, FF, Opera) выглядит вот так: То есть общее описание (serif или sans-serif) подхватывается, а конкретный шрифт - нет. Пробовал с разными шрифтами. Это у меня какая-то локальная проблема с …

    Asked by hithlin,

    0 votes
    2 answers

  8. Перечеркнуть изображение крест-накрест

    Есть div с картинкой и текстом. Его нужно перечеркнуть крест-накрест. Вот никак не соображу как это сделать ловчее и техничней, чтобы адаптивность сохранилась. Кто-нибудь может подсказать решение ?

    Asked by 107andz,

    0 votes
    1 answer

  9. Проблема с меню

    КАК сделать так чтобы меню было для всех страниц одно скажите пожалуйста

    Asked by Кенжнбек,

    0 votes
    2 answers

  10. Линия через три блока

    Добрый день, подскажите как реализовать такую линию, как показано на рисунке? Линия пересекает три блока, один из которых находится над ней?

    Asked by Romario1985,

    0 votes
    2 answers

  11. работа с summary

    Как убрать маркер у тега summary. Прописываю в css summary::-webkit-details-marker{ display: none; } но ничего не меняется, маркер все так же есть

    Asked by Romario1985,

    0 votes
    0 answers

  12. Сворачивание меню при нажатии на ссылку

    Здравствуйте. Есть меню на html/css. Сделал ссылки для навигации с помощью якоря, но при нажатии на ссылку, меню не закрывается, так как для этого необходимо снять флажок с checkbox. Подумывал сделать из label ссылку, меню закрывается, текст оформлен как ссылка, но по ней не переходит. В общем, подскажите, пожалуйста, как сделать, чтобы я нажал на ссылку, попал на нужную часть сайта и меню закрылось без дополнительных действий https://jsfiddle.net/v8rwhuo0/1/ В дополнение: конечно же, хотелось бы то же самое провернуть с затемнением (чтобы меню закрывалось, если я кликну в любое место темной зоны) — class="mask-content" Заранее спасибо 🙂

    Asked by maisiq,

    0 votes
    2 answers

  13. Картинка уменьшается при добавлении ее в тег <figure>

    Всем привет. Решил добавить к картинкам тег <figure>, но при выводе картинка уменьшается в размерах. В чем может быть проблема? Код CSS: body{ margin: 0px; padding: 0px; max-width: 1000px; background: url(./bg3.jpg) repeat center top fixed; } html, body, #wrapper{ margin: 0px; padding: 0px; margin: 0 auto; } @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600&subset=latin,cyrillic); *{box-sizing: border-box;} #container{ display: table; max-width: 100%; height: 100%; margin: 0 auto; background-color: #272727; box-shadow: #000 0px 0px 40px 10px; } #header{ max-width: 100%; width: 10…

    Asked by Weskiers,

    0 votes
    0 answers

  14. Размещение фоновой картинки, заключенной в div, на всю ширину вьюпорта

    Подскажите, пожалуйста, как растянуть фоновую картинку, заключенную в div, на всю ширину вьюпорта? Сейчас она отображается посередине, по ширине макета. Указывала ширину 100%, 1200px, минимальную ширину 1200px - не работает. <div class="banner"> <div class="container background-image"> <div class="banner_text"></div> </div> </div> CSS: .background-image { background-image: url('/img/new_oranges.jpg'); background-size: cover; height: 200px; }

    Asked by Алеся,

    0 votes
    1 answer

  15. Аккордеон на чистом HTML/CSS

    Добрый день. Подскажите как реализовать такой всплывающий блок как на картинке: 1) Блок на который один раз нажал должен быть открытым все время, до выбора другого блока; 2) Название блока в закрытом положении имеет черный цвет и стрелочка вниз, а при открытом синий цвет и стрелочка вверх 3) Реализовать с помошью HTML и CSS

    Asked by Romario1985,

    0 votes
    2 answers

  16. Изменение цвета шрифта блока меню при hover

    Подскажите, пожалуйста, что прописать в коде для изменения цвета шрифта меню при наведении на БЛОК (не на ссылку) с черного на белый при hover. На скрине цвет меняется при наведении на ссылку. И как можно меню отодвинуть влево? Заранее спасибо! <div class="three navigation items"> <nav> <ul> <li> <div class="navigation__item"></div> <a href="#">Hot themes</a> </li> <li> <div class="navigation__item"></div> <a href="#">EURO-2016 Playoffs</a> </li> <li> <div class=…

    Asked by Алеся,

    0 votes
    1 answer

  17. Картинка превью в мессенджерах

    Добрый день! Есть такая страница http://tehne.com/grant/right-bank-of-kazanka-river-competition-2021-ru Хочу сделать чтобы в мессенджерах когда отправляют ссылку вместе с заголовком показывалась определенная картинка. Я добавил эту картинку в мета тэги og и link rel="image_src" и она все равно не появляется когда делюсь в мессенджерах Почему так?

    Asked by smirn0ff,

    0 votes
    1 answer

  18. Всем привет, не работает кнопка моб.меню

    Всем привет, у меня проблема, не работает моб.меню, вроде все пересмотрел, но ничего так и не нашел. Смотрел на самом пк, через файл html все робит, но заходя на сайт почему то никак не реагирует мобильное меню Сайт : Brownail.ru

    Asked by Moruga,

    0 votes
    1 answer

  19. Tilda, Button, Form, JS

    У меня в тильде есть Zero Block с кнопками (например b1, b2, b3) и есть блок с формой в которой есть выпадающий список со значениями (l1, l2, l3). Как мне сделать так, чтобы по нажатию b1, b2, b3 из Zero Block, страница опускалась к блоку с формой и там в списке выставлялось автоматически, соответственно, l1, l2, l3?

    Asked by uppjke,

    0 votes
    0 answers

  20. Как сделать следующий функционал?

    Всем привет! Есть интересный вопросик. Нужно реализовать такое же поведение, как и на картинке. Подскажите, как это можно сделать при помощи css html. без js Всем Спасибо за ответы!

    Asked by antonylevitsky,

    0 votes
    1 answer

  21. работа type="time" и вывод установленного времени в консоль

    Здравствуйте, как там ваше ничего?)) А я вот пришел со своими тараканами в виде: <!DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ESP Web Server</title> <style type="text/css"> body, html { margin: 0; overflow-x: hidden; } p { font-size: 1.9rem; } div { position: relative; } svg { width: 24px; top: 12px; position: absolute; } .container { padding: 0; overflow: hidden; …

    Asked by itsterit,

    0 votes
    1 answer

  22. Проблема с псевдокласами

    Добрый день. Возникла проблема следующего рода. При верстке все псевдоклассы работают не корректно. Например задаю всем элементам margin-bottom:30px, соответственно у последнего я его пытаюсь почистить ипользуя last-child и задавая margin-bottom: 0. Но проблема в том что после этого все остальные элементы которым обьявил нижний отступ тоже обнуляются. С first-child та же самая проблема. В чем может быть проблема? Первый раз работаю с bootstrap может ли он повлиять на работу псевдоклассов?

    Asked by Romario1985,

    0 votes
    4 answers

  23. Как вставить 3D-тур на сайт?

    Всем доброго времени суток. Имеется 3D-тур для заведения предоставленный по ссылке - http://fotospy.ru/3d/demo/grill-grad/domiki/tour.html. Каким образом мне вставить его на мой сайт так чтобы могли просматривать этот тур на нем? Буду благодарен за помощь.

    Asked by guram07,

    0 votes
    1 answer

  24. Границы изображения css

    Хочу сделать так, чтобы при нажатии на изображение осуществлялся переход по ссылке, но из-за границ этого самого изображения нормально сделать не получается, вот код - https://jsfiddle.net/j7e89dro/.

    Asked by KennyJake,

    0 votes
    0 answers

  25. Bootstrap 3 проблема в мобильном меню

    Всем привет! Подскажите пожалуйста, как решить данную проблему? На телефоне раскрыты сразу все пункты подменю внутри самого меню, мне же необходимо, чтобы при открыии меню, пункты навигации у подменю были скрыты, и раскрывались лишь при клике. Как можно решить данную проблему не дублируя код и создания отдельной навигации для телефонной версии?Код вёрстки <!-- MainNav --> <nav class="navbar-collapse collapse" id="mainnav"> <ul class="nav navbar-nav"> <li class="dropdown active"><a href="./">Home</a> <ul class="dropdown-menu"> …

    Asked by REDGROUP,

    0 votes
    4 answers
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept