HTML Coding

29,542 questions in this forum

1. Ломается блок в моб версии сайта

   Сверстал блок номерами телефонов, возможно криво не спорю, но я все еще учусь верстать. Блок меня устраивает, только вот адаптировать не знаю как, на мобильном экране блок ломается, как этого избежать, но при этом сохранить вид блока в 100%, подскажите пожалуйста? https://jsfiddle.net/q0ozsk5e/

   Asked by viliksar, June 25, 2020

   0 votes
   1 answer
2. Адаптивное изображение

   В общем, сделал на сайте таблицу "почему мы", и на разрешении 1920х1080 выглядит она нормально, однако на смартфонах и на более низких разрешениях изображение не адаптируется, пробовал убрать фиксированные параметры width и height, но у картинок слишком высокое разрешение. Сайт.

   Asked by GreenAurora, June 9, 2020

   0 votes
   1 answer
3. Проблемы с выпадающим меню и скроллингом

   Доброго времени суток. Подскажите пожалуйста , в чем может быть проблема При присвоении overflow-y: auto; блоку, не работает выпадающее меню Пример https://jsfiddle.net/kustovskyi/eho1kyjm/ В меню Dashboard Если убрать в класса .sidebar-submenu-right скроллинг , то меню выпадает

   Asked by Kustovskyi, July 6, 2020

   0 votes
   6 answers
4. help, parallax/content

   Здравствуйте возникла проблема: http://prntscr.com/t96dcc (parallax) его высота смещает блок с текстом. Может подскажите другую рамку с текстом или как исправить это. Параллакс: <section class="parallax sticky" id="scene"> <div class="parallax-L" data-depth="0.3" id="L"><img src="img/bmw-m32.png" alt="" /></div> #L { width: 100%; height: 50vh; padding: 0; margin: 0; } .L { background: url(bmw-m32.jpg) left no-repeat; background-size: cover; overflow: hidden; } img { max-width: 20%; height: auto; } .sticky{ position: sticky; top: 0; } Рамка с текстом: <div class="ramka-5"> Ра…

   Asked by prank, June 30, 2020

   • html
   • css
   • js
   0 votes
   0 answers
5. Проблема вёрстки

   https://jsfiddle.net/8tybdkz0/ Я только начал верстать, в общем всегда справа остаётся место, хз как убрать.

   Asked by DarkHill, July 27, 2020

   0 votes
   1 answer
6. Не применяется media запрос

   Здравствуйте. Подскажите пожалуйста, что с этим media запросом не так? @media (max-width: 991px) #comment-list li { bottom: 55px !important; } На странице, где выводятся комментарии wordpress смещается вверх стиль автора на мобильных устройствах, виновник этого другой медиа запрос, но уже для калькулятора на wooccommerce @media (max-width: 991px) *, ::after, ::before { box-sizing: border-box; } отключить его не могу, потому что уже будут тогда проблемы с калькулятором. Потому решил написать отдельный медиа запрос, но уже для комментариев

   Asked by Jokerrs, June 28, 2020

   0 votes
   0 answers
7. Ченжлог

   Здравствуйте все, у меня возникла проблема при верстке Changelog на сайте, проблема в том что при выборе пункта ченжлог должно появлятся окно с выбором версий, и если выбираешь описание то это окно с версиями должно исчезать, файлы прикрепил, помогите пожалуйста, как это можно реализовать, заранее благодарю за ответы htdocs.rar

   Asked by Kelmint, June 10, 2020

   • html
   • css
   • javascript jquery
   0 votes
   0 answers
8. Медиа запросы | CSS

   День добрый. С помощью видео курса осваиваю медиа запросы - адаптация под мобильную версию только на CSS, навигация HTML. Проблема следующая - адаптация работает когда я открываю сайт в окне и на своей операционной системе самостоятельно меняю размер окна, но при этом не работает в режиме разработчика, когда я выбираю просмотр с устройства, в моём случае это был iPad, и при этом автор в видео курсе демонстрирует работу медиа запросов именно там. Я попробовал перенести веб-страницу на свой телефон и открыть её в браузере - адаптивная версия там тоже не сработала. Видео за январь 2020, у автора Chrome - у меня тоже, разве что у него Mac, у меня Windows. Что это за магия т…

   Asked by asmodeusowner, June 18, 2020

   • медиазапросы
   0 votes
   1 answer
9. Как подогнать css под Safari 5 и IE-11

   Добрый день. Размещено 2 блока по 3 изображения, отцентрировано flex, по плану при наведении курсора картинка затемняется, сверху появляется описание. Стили работают как задумано только в Chrome и Opera. В Сафари рамка не всплывает, текст не выравнивается. В IE 11 рамка всплывает, текст не выравнивается. Заранее благодарю. <div class="wrapper"> <div class="demo-content"> <div class="part"> <figure class="img-box"> <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample54.jpg> <figcaption><section class="imgone">По Вашему желанию электропроводку можно уложить в ПВХ-коро…

   Asked by Xandr555, July 26, 2020

   • flex
   • opacity
   • :after
   • :hover
   • transform
   • transition
   • border-box
   0 votes
   0 answers
10. Помогите сверстать блок

    Здравствуйте, помогите, пожалуйста сверстать блок (в красной рамке). Как сделать слайдер на заднем фоне, и чтобы зеленая линия не смещалась при изменении размера окна?

    Asked by dm-stanislav, June 11, 2020

    • сайт
    • верстка
    • css
    • html
    0 votes
    1 answer
11. iframe очищает остаток страницы

    Добрый день! Возникла следующая проблема: стоит мне вставить iframe с видео с ютуба, как все элементы, идущие после этого iframe'а, попросту удаляются и вообще не отображаются на странице, в коде элемента их просто нет, как будто на iframe'е заканчивается документ. Первое видео корректно отображается, остальные же даже не появляются. Пробовал в разные места вставлять это видео, все тот же результат - после него страница становится полностью пустой. <div id="video_layer"> <button class="swipe_right" onclick="swipeRightVideoGallery();"><</button> <button class="swipe_left" onclick…

    Asked by Magitrop, July 16, 2020

    0 votes
    2 answers
12. Позиционирование элемента

    Подскажите пожалуйста, как позиционировать элемент на всю видимую область окна браузера? Есть слайдер, в котором крутятся картинки, и есть скрипт, благодаря которому картинка увеличивается, но не могу понять относительно какого элемента он позиционируется. <div class="sl_slider"> <div class="sl_img"> <img class="image" src="img/001-1.jpg" alt="001-1"> </div> <div class="sl_img"> <img class="image" src="img/002-2.jpg" alt="002-2.jpg"> </div> <div class="sl_img"> <img class="image" src="img/001-1.jpg" alt="001-1"> </div> <div class="sl_img"> <img class="i…

    Asked by oleg126, July 30, 2020

    0 votes
    0 answers
13. Как сверстать такоя?

    Как сверстать такоя? Без js, только css. https://prnt.sc/tuhp95 Требования к результату: - нужна возможность крутить схему, надписи должны оставаться горизонтальными; - должен тянутся на 80% от вьюпорта; - нужна возможность масштабировать весь блок изменяя один параметр; - без использования js

    Asked by torsar, August 11, 2020

    0 votes
    9 answers
14. Помогите сделать такое

    Подскажите пожалуйста, есть ли готовое решение такого переключателя? Или как он называется, что гуглить нужно?) http://wbear.by/uslugi/uborka-kvartir/

    Asked by oleg126, August 12, 2020

    0 votes
    1 answer
15. Блок из картинок

    Подскажите, как такое сверстать? Пробую grid'ы и флекс, пока не пришел к результату. https://prnt.sc/u0ucwi

    Asked by Leningram, August 17, 2020

    0 votes
    0 answers
16. Не работает макет сайта.

    Привет всем. Занимаюсь версткой совсем недавно. Прочел тему, что если сделать один блок с width: auto; и margin-left: 200px; а второй с фиксированным width: 200px; и float: right; то будет хороший макет с фиксированной колонкой справа и "резиновой" колонкой справа. Однако это почему-то не работает... Дивы накладываются друг на друга... А должны идти друг за другом. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Имя</title> <style> .div1{ border: 4px solid black; width: auto; margin-right: 200px; } .div2{ float: right; width: 200px; border: 4px solid black } </style> </head> <bod…

    Asked by Ваалентин Семенович, August 17, 2020

    0 votes
    1 answer
17. Как сделать так,чтобы два всплывающих окна перекрывали друг друга при активности?

    Есть адаптивное меню .mobmenu и кнопка обратной связи .feedback.openform. Как сделать так,чтобы при нажатии на гамбургер, меню с темным задним фоном перекрывало кнопку обратной связи,чтобы ее нельзя было нажать? И наоборот,при нажатии на форму обратной связи,нельзя было вызвать адаптивное меню. С меню вроде как я справился,но вот как полностью вывести фидбэк на передний план и чтобы при этом чтобы header с гамбургером отошли назад? https://codepen.io/tempest2708/pen/dyMVoOp pornohub-google-chrome-2020-09-04-00-56-15_AYQgL2jv.compressed.mp4

    Asked by Tempest99, September 4, 2020

    • html
    • css
    0 votes
    1 answer
18. Проблема с отображением сайта на айфоне

    Приветствую! Столкнулся с проблемой неправильного отображения фоновой картинки на iphone. Причем проблема возникает на реальных девайсах, на симуляции всё выглядит нормально. На моем телефоне на андроид всё хорошо. Есть ещё одна проблема - на айфоне не отображаются описания и кнопки "Подробнее".

    Asked by eXile, August 21, 2020

    0 votes
    0 answers
19. Как сверстать шестиугольный тянущийся блок?

    Клиенту надизайнили вот такой макет. Не понимаю, как верстать. Белую область еще примерно понимаю, как можно сделать из трёх частей. Верх и низ бордюрами по методам треугольника, центр - обычный прямоугольник. А вот золотую рамочку - как? И тянуться оно должно вертикально, завися от наполненности Ещё занятно то, что левый край фигуры выходит за сетку. Это видно по левой границе текста. https://codepen.io/d0ublezer0/pen/bGpqgKY вот что удалось сверстать что не нравится: придется ловить значения бордюра для разных разрешений, чтобы попасть в ширину блока ну и рамочку так и не смог запилить. UPD: добрался до clip-path Боле…

    Asked by d0ublezer0, August 25, 2020

    0 votes
    4 answers
20. Как гридами разместить дивы по углам родителя?

    у меня 4 квадрата и я хочу разместить каждый из этих квадратов в каждый угол флекс-контейнера,решил сделать это командой justify-self и когда задаю для дива one параметр justify-self: start, то реакции не идет. Можно ли разместить каждый див по углу через грид? https://codepen.io/tempest2708/pen/ZEWaepy

    Asked by Tempest99, September 5, 2020

    0 votes
    1 answer
21. не "выезжает" текст под картинкой при ее нажатии.

    подскажите нубу, у меня на странице при нажатии на лого, должен "выезжать" внизу отзыв клиента, раньше работало, теперь нет И еще удалились 2 лого,как восстановить ( Альфастрахование и ВСК)? Как это поправить и почему перестало работать? Спасибо заранее! https://kasko007.ru/otzyvy/ Вот: </div> </div> </div> <h1>Читать отзывы клиентов по каско</h1> <b style="color: red;">Нажмите на логотип компании, чтобы увидеть отзывы</b> <div class="image_frame image_item no_link scale-with-grid no_border"> <div class="image_wrapper"><img class="scale-with-grid" src="/wp-content/Ingosstrah.jpg" alt="alph…

    Asked by lipoolfan, May 26, 2021

    0 votes
    1 answer
22. Не работает background-size:cover

    привет. геометрия.онлайн на главной странице слайдер с наложенным фоном на псевдоэлемент почему-то не тянется фон при масштабировании страницы. почему?

    Asked by d0ublezer0, August 31, 2020

    0 votes
    3 answers
23. Не получается выделить первую букву через псевдоэлемент

    Как первую букву в слове "Новье" выделить жирным штифтом и цветом? <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Псевдоэлементы</title> <style> P.new:after { content: " - Новьё!"; /* Добавляем после текста абзаца */ } </style> </head> <body> <p class="new">Ловля льва в пустыне с помощью метода золотого сечения.</p> <p>Метод ловли льва простым перебором.</p> </body> </html>

    Asked by denis_alekss, December 14, 2020

    0 votes
    3 answers
24. Уменьшить размер шрифта при уменьшении блока

    div.Row { height: 15vh; width: 100%; ... } div.Col{ height: 100%; ..... .Col1{width: 10%;} .Col2{width: 60%;} ) <Div class = "Row"> <Div class = "Col Col1">текст<Div> <Div class = "Col Col2">Длинный текст<Div> </Div> Такой вот код. Как средствами CSS3 сделать так, чтоб текст был, допустим, 70% от высоты ROW (или COL, в моем случае высота одна и таже), но в случае, если не вмещается в заданную ширину блока, автоматически уменьшался в размере? Спасибо

    Asked by minvareg, October 15, 2020

    0 votes
    1 answer
25. Скопировать css из фигмы

    Стиль из фигмы только sass. Если преобразовать, то хоть и добавиться точка с запятой но название в стиле не добавляется, что очень трудно если строчек за четыреста. Можно еще как нибудь скопировать безбоязненно стиль из фигмы с обычным css?

    Asked by ChikChicly, September 5, 2020

    • фигма
    0 votes
    1 answer