HTML Coding

29,542 questions in this forum

1. Вёрстка сетки товаров.

   Здравствуйте. Я начинающий верстальщик сайтов, столкнулся с проблемой при вёрстке карточек товара. Код карточки: HTML Скрытый текст <div class="product-wrap"> <div class="product-item"> <img src="source/img/test.png"> <div class="product-buttons"> <a href="#" class="button">Купить</a> </div> </div> <div class="product-title"> <a href="">Test</a> <span class="product-price">₽ 100</span> </div> </div> ——————————————————————————- CSS Скрытый текст * { box-sizing:…

   Asked by Ivan_A, November 11, 2018

   • вёрстка
   • сайт
   • сетка товаров
   0 votes
   0 answers
2. Перестал работать simple lightbox. не открывает большие фото

   Всем привет! Прошу помочь разобраться.. Есть самописный сайт. Прошу сильно не материться, делала его не я.. На сайте есть страницы в виде галереи с фото: http://av-bykov.ru/art/kadet-2018-1september Эти страницы работали корректно. Все было ок, фото открывались в большом размере. Недавно после редактирования файлов сайта перестали открываться большие фото. Страница с миниатюрами есть, сами большие фотки тоже есть (загружены на сервер и никуда не делись), но почему-то не открываются. При нажатии на любое фото по ссылке можно это увидеть: http://av-bykov.ru/art/kadet-2018-october Код я меняла в одном файле сайта, к-ый хранит все фото в вид…

   Asked by MariaKo, December 13, 2018

   0 votes
   0 answers
3. Верстка некорректно отображается в IE11

   Сверстал сайдбар с кастомным скроллом, подключил библиотеку для этих целей. Все работает нормально. Но когда проверяешь на browserStack на IE 11, то верстка ломается: Примечательно что когда отключаю эту библиотеку с кастомным скроллом, то на IE все становиться нормально, а когда она подключена вот такая вот ерунда получается. Да, библиотека оборачивает блоки своими блоками, я это учел и прописал свойства наподобие этих: .sidebar__wrapper .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden { display: flex; flex-direction: column; min-height: 100vh; } И еще интересный момент: у меня на компьютере тоже есть IE11, но на моем IE11 все отображается нор…

   Asked by yaparoff, November 13, 2018

   0 votes
   0 answers
4. Шаблон для документации

   Хотел слизать со странички проекта YardT2 код под локальное использование для документации, но прописав абсолютные ссылки к стилям и скриптам заметил, что элементы LIST, TOC и прочие не подгружаются. Может, в яваскриптах остались относительные ссылки, но я их не нахожу... В чем еще может быть загвоздка? Пример странички Её код на JSFiddle

   Asked by lnva, November 24, 2018

   0 votes
   0 answers
5. Кодировка формы обратной связи

   Добрый день! Делал лендинг на bootstrap 4, я в этом деле новичок. Вставил форму обратной связи для отправки через mail.php и ajax. Кодировка на сервере utf-8, сервер nic.ru. Пользуюсь почтовым клиентом Outlook. Но нормально приходят на почту данные, которые заполнены на английском (например имя Kirill а не Кирилл). Если писать на русском, то приходит вот такое: п п╦я─п╦п╩п╩ Вот код обработчика: <?php $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $subject = $_POST['subject']; header('Content-Type: application/json'); if ($name === ''){ print json_encode(array('message' => 'Name cannot be empty…

   Asked by Coby87, November 26, 2018

   0 votes
   0 answers
6. css CSS анимация с текстом

   Особо не вдавался в подробности анимации, поэту прошу у вас. Нужно сделать так, чтобы буква при загрузки страницы, после 3с (ПРИМЕРНО) с центра экрана переместилась на 300px (ПРИМЕРНО) в любое из четырех направлений. P.S. Лишнего не пишите, и ссылки на темы не надо кидать.

   Asked by pro100blich, November 28, 2018

   • анимация
   • текст
   • css анимация
   0 votes
   0 answers
7. сделать ровный градиент

   Добрый день. Помогите сделать ровный градиент,как на картинке. пробую так, но нет плавности перехода: max-height: 150px; background: #dedede; background: -webkit-gradient(linear, left bottom, left top, color-stop(20%, #fff), color-stop(40%, #dedede), color-stop(70%, #fff)) !important; background: linear-gradient(to top, #fff 20%, #dedede 40%, #fff 70%) !important;

   Asked by uppercase_css, December 1, 2018

   0 votes
   0 answers
8. Перенос гридов

   Порядок полей идет сверху вниз. По вертикали может помещаться 4 поля Если поля не помещаются в ширину контейнера, то они должны переноситься на следующую строку Сверстал это гридами, но почему то не переноситься на следующую строку https://codepen.io/anon/pen/OaqQNd

   Asked by yaparoff, December 3, 2018

   0 votes
   0 answers
9. Как при нажатии на копку выводился в модальном окне скрипт

   Как при нажатии на копку выводился в модальном окне скрипт? <button type="button" class="close position-absolute r-0 t-0" data-dismiss="modal" aria-label="Close"><svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 16 16" width="16" class="icon svg-secondary" src="images/gallery/icons/cross.svg" alt=""><path d="m8.07106781 6.65685425 5.65685429-5.65685425 1.4142135 1.41421356-5.65685423 5.65685425 5.65685423 5.65685429-1.4142135 1.4142135-5.65685429-5.65685423-5.65685425 5.65685423-1.41421356-1.4142135 5.65685425-5.65685429-5.65685425-5.65685425 1.41421356-1.41421356z" fill-rule="evenodd" class=""></path></svg></button>…

   Asked by MegaDrive, December 6, 2018

   0 votes
   0 answers
10. Проблема с php js формой

    Привет, очень нужна помощь в форме https://jsfiddle.net/1z0uhe7d/1/. Их три (третья отличается тем что поле emailвместо сообщения). Проблема в том, что обрабатывается только там, что не открывается как попап(через arcticmodal) и открываются при изменении input file. Я пробовал закинуть инпут файлы в попап формы, но не помогает, пробовал через классы обрабатывать в js не помогает. Моих знаний мало, чтобы повесить обработку новых инпутов в js и заставить обрабатывать все формы. Очень нужна помощь, кто разбирается.

    Asked by exoty, December 17, 2018

    0 votes
    0 answers
11. Заморочки с label

    Всем привет. Прошу совета. В табах по ссылке необходимо, чтобы со сменой слайдов изменялась стоимость ремонта в верхней желтой плашке. Никак не могу допереть как написать код. Не сочтите за труд, аксакалы. Кто может помочь, буду благодарен. https://codepen.io/dimpin/pen/YdZRvN

    Asked by Dimpin, December 22, 2018

    0 votes
    0 answers
12. При добавлении в сборку js файла перестал работать слайдер

    Доброго времени суток! Сразу к сути. Делаю учебный проект в шторме, конечный результат которого собирается при помощи сборки проекта. все библиотеки и зависимости установлены. с подключением slick-carousel разобрался, начал делать выпадающее меню в шапке, создал файл head.js, пописал в main.js такую строчку import 'head.js' в результате сломался слайдер, а в консоли ошибка "файл не найден" увидеть воочию можно тут https://rimidbit.github.io/shopia-S/ исходники тут https://github.com/rimidbit/source_code.git Что еще добавить не знаю. Готов предоставить все вводные, только б разобраться

    Asked by rimidbit, December 24, 2018

    0 votes
    0 answers
13. Кнопка "поделиться картинкой вконтакте"

    Нужно сделать кнопку "поделиться картинкой в контакте" Простейший вариант <a href="https://vk.com/share.php?url=сайт/папка/картинка.png">поделиться</a> работает, но подписывает картинку "картинка.png" а хочется свой текст (ну да, тот, кто делится, может свой текст добавить, но он этого не делает) Штатный вконтактовский код https://vk.com/dev/Share НЕ работает. Причина проблемы, по-видимому вот в чем - страничка, на которой надодится (должна находится) кнопка, находится не на сайте, где сама картинка, а может вообще быть на локальном компьютере (по протоколу file://) Можно ли в ссылку добавить какой-то еще параметр (кроме url) который подскажет…

    Asked by rgl, January 22, 2019

    0 votes
    0 answers
14. csv в html

    Еще раз здравствуйте. Я все же не могу разобраться с js. Если можете помогите кодом. Есть csv файл, имеющий в себе конструкцию 21| 45 id| num и имеется html таблица в которую нужно вывести значения id, num в определенные секции этой таблицы. Как нужно правильно обратиться к элементам файла csv и вывести в определенные пункты таблицы в html. Помогите кодом!

    Asked by PShim, January 31, 2019

    • csv
    • html
    • imoprt
    • js
    0 votes
    0 answers
15. Кнопка импорта html файла в секцию другого html

    Привет всем. Может кто помочь написать кнопку выбора файла, после выбираем html и выгружаем его в секцию другого html

    Asked by PShim, February 1, 2019

    • js
    • jq
    • html
    • css
    0 votes
    0 answers
16. Адаптивная верстка группы кнопок

    Здравствуйте! Нужно сделать вёрстку группы кнопок - меню сайта. Идея такая - до 480 px показывать это меню в виде вертикального столбца по 1 кнопке в ряд, ширина каждой кнопки на всю страницу. От 480 до 768 показывать кнопки по 2 штуки в ряд. А от 780 показывать все кнопки в 1 ряд, без переноса. При этом менять размер шрифта и размер кнопок так чтобы они всегда вписывались в одну строку. Т.е. если кнопок много или ширина экрана маленькая, то пусть показываются хоть шрифтом 6 px. Если экран широкий или кнопок мало, то пусть кнопки будут крупные, а надписи внутри них будут хоть 20 px. Вроде бы всё реализуемо на CSS кроме показа в 1 строку. Не понятн…

    Asked by sdanilas, February 7, 2019

    0 votes
    0 answers
17. Файлы скачиваються с кавычками ('file_name.gsm')

    При открытии ссылки на скачивание файла, браузер добавляет кавычки в название. Пользуюсь google chrome на ubuntu. Вопрос, почему так скачиваються файлы? На версии chrome 70 все скачивается адекватно, а на более новых добавляються кавычки и не понятно с чем это связано. Нужно исправить проблему или хотя бы найти. Так как обновления на сайт не накатывались то логично что это что то с браузером, но для того чтобы исправить нужно найти в чем суть проблемы. Варианты ответов типа "У тебя ошибка на сервере", без описания возможной ошибки и "Браузер смени" не подходят. Прикрепляю скрин файла и отправляемые параметры: <ahref="/record?folder=folder34&id=3535454.56453Fuf"&gt…

    Asked by Sakuemy, March 26, 2019

    0 votes
    0 answers
18. [Решено] Почему не работает анимация keyframes?

    http://leveler.ru/i-icons/demo.html Cлепил из svg набор иконок в icomoon, приклеил анимацию вращения. Не вращается В найденном примере вроде всё так же. Но при этом - работает: https://codepen.io/Keyamoon/pen/aHxuq Что я сделал не так? UPD: не хватало display:inline-block;

    Asked by d0ublezer0, April 19, 2019

    • icomoon
    • keyframes
    • rotate
    0 votes
    0 answers
19. создать текст поверх двух картинок

    Задача: 2 картинки с текстом на их поверхности нужно разместить на одной линии Как сделать? Я сделал так ( не получается) : <div class="foto1"> .foto1{ <img src="#"> display: inline-block; </div position: relative; float: left; <div class="foto2"> } <img src="#"> img:{ </div …

    Asked by Rezvykh, April 22, 2019

    0 votes
    0 answers
20. Проблема с кнопками

    Здравствуйте! Помогите, пожалуйста! Что нужно исправить (добавить) в коде, чтобы было как на изображении снизу? Спасибо!

    Asked by clean-nt, April 30, 2019

    • css
    • html
    0 votes
    0 answers
21. SVG карта изображений, масштабирование

    Приветствую! Нужно реализовать кликабельную карту изображения, наткнулся на урок в интернете, но при уменьшении окна браузера области сбиваются. Помогите пожалуйста. <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Интерактивная карта</title> <meta name="description" content=""> <meta name="keywords" content=" "> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/fonts.css"> <link rel="icon" type="image/x-icon" href="/images/favicon.ico"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> </head> <body> <div cl…

    Asked by dimpase, June 20, 2019

    0 votes
    0 answers
22. Схлопывание отступов и оверлей

    Столкнулся с проблемой схлопывания отступов при уменьшении высоты браузерного окна. Пофиксил, добавив overflow: auto; родительскому элементу. Однако, на оверлей это не действует. Как исправить? <header class="header overlay"> <div class="header-content"> <h1 class="header-content__title">We are awesome creative agency</h1> <p class="header-content__descr">This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accums…

    Asked by Okieazy, July 7, 2019

    0 votes
    0 answers
23. Использование rem для задания размеров элемента

    Всем привет. Слышал советы, что вместо пикселей желательно использовать rem для задания размеров. Решил, в качестве эксперимента, попробовать задать для html определённый размер в пикселях, а дальше везде использовать уже rem. И вроде всё нормально, даже очень удобно. Но под конец решил я уменьшить масштаб страницы и вот тут появились проблемы. Если использовать такой код: html { font-size: 10px; } .box { background: red; width: 100px; height: 400px; } То по итогу всё нормально, сколько масштаб не уменьшай, результат всё те же 400px. Но стоило изменить единицы измерения в высоте: html { font-size: 10px; } .box { background: red; wid…

    Asked by Tascan, July 15, 2019

    • вёрстка
    • css
    • px
    • rem
    0 votes
    0 answers
24. Повторяющиеся линии

    Здравствуйте. Мне необходимо вывести вертикальные однопиксельные линии через равные промежутки. Что-то примерное я нагуглил https://jsfiddle.net/6eq501tz/ Но проблема в том, что линия должна всегда находится в центре экрана. Если уменьшите ширину экрана в демо таким образом, чтобы помещались только две линии, то увидите, что при background-position: 50% 0; линии располагаются по краям экрана. Второе - на некотором разрешении в фф линии исчезают. Может есть другие идеи, как реализовать подобное, или пофиксить текущий вариант? Upd: получилось отцентрировать с помощью calc https://jsfiddle.net/8ztwr95e/ Проблема с исчезающими линиями в ФФ актуал…

    Asked by alex_web64, July 20, 2019

    0 votes
    0 answers
25. max-width внутри flexbox элемента в IE11

    Здравствуйте. Почему в этом примере https://jsfiddle.net/pk2rgj3o/4/ в IE11 не срабатывает max-width для изображения? Мне нужно, чтобы фото не выходило за пределы родителя, при этом его ширина и ширина flex-item оставались автоматическими. В данный момент я нашел два решения этой проблемы: 1) width: 100% для фото и 2) flex: 1 для flex-item, но они оба не подходят.

    Asked by alex_web64, July 21, 2019

    0 votes
    0 answers