HTML Coding
Subforums
-
- 30.1k
- posts
-
- 1k
- posts
- Про макеты
- By klierik,
Explore Questions
There are no popular questions to show right now
-
0 votes0 answers
-
0 votes0 answers
-
0 votes0 answers
-
0 votes1 answer
-
0 votes3 answers
29,542 questions in this forum
-
Относительный размер шрифта(smaller) дает отличный результат если задать размер явно.
Доброго дня всем. Есть пример https://codepen.io/pitchcontrol/pen/bGbJdgZ Две таблицы вложены в блок, у блока задан размер шрифта x-large, у одной таблицы задан large а у другой smaller. Получается у них должны быть одинаковые размеры, но по факту они разные. Почему это так?
0 votes2 answers -
Карусель с навигацией в 2 ряда
Всем привет! Есть задачка - сделать карусель, в котором навигация в 2 ряда http://prntscr.com/pb6dlu Обычно пользуюсь плагином slick. Есть у него в настройках slidesPerRow и rows, с помощью которых можно выстроить визуально в 2 ряда, но увы, навигация работает некорректно. Буду благодарна советам, как такое можно реализовать. Slick не обязателен, может есть другой хороший плагин.
0 votes10 answers -
Flex-контейнер с input элементами расширяет границы основного блока
Основной блок содержит 2 блока 1-й с некоторым текстом 2-й flex блок с input элементами 2-й блок как будто не видит <b>ширины</b> основного блока, которую <b>задает 1-й блок</b> (sometext) и расширяет основной. Подскажите как решить данную проблему ? Пример : https://jsfiddle.net/sarcus/1vmaf3wo/14/ Но если вместо input (class='inp') вставить div то все приходит в норму: https://jsfiddle.net/1vmaf3wo/83/ <style> .cont { position: absolute; top : 200px; left: 30px; border: 1px solid #ccc; } .ctrl { display: flex; width…
0 votes3 answers -
ищу наставника
ищу наставника: я новачок в програмування: я буду верстать сайти и буду платить небольшой процент от заказа 15%; наставник будем меня учить. у меня сильное рвения к роботе. я люблю верстать.
0 votes2 answers -
Порядок при обтекании плавающего блока
При обтекании плавающий блок указывается в коде над обтекающим текстом. Если уменьшать ширину рабочей области обтекающий текст уйдёт под обтекаемый блок. Есть ли способы, чтобы при нехватке места текст уходил не под обтекаемый блок, а оказывался над ним?
0 votes1 answer -
Элементарный вопрос - почему не применяются стили
Есть такой код, например: <article> <ul class="armorList"> <li><img src="img/sword.svg" alt=""></li> <li><img src="img/shield.svg" alt=""></li> <li><img src="img/stick.svg" alt=""></li> <li><img src="img/bow.svg" alt=""></li> </ul> </article> Почему к картинкам применяюся стили в формате: img { height: 50px; } а в таком: .armorList img { height: 50px; } или .armorList { height: 50px; } не применяются. В чем тут особенность? Просьба не пинать за глупые вопросы, пытаюсь разобраться.
0 votes1 answer -
Как кастомизировать форму хабспота?
ЗдравствуйтеНе получается кастомизировать форму хабспота. (только стили и визуал)Не понимаю в чем проблема и где не там пишу.Доки: https://developers.hubspot.com/docs/...d_form_optionsПрописываю и реакции 0: <style> .my-custom-form input[type=text] { border: 3px solid red; } </style> <div> <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script> <script> hbspt.forms.create({ portalId: "6402240", formId: "c39e10cd-caf3-4853-b412-fef2e723c153", cssClass: "my-custom-form" }); </script> </div>
0 votes0 answers -
новичок в html и css
я зовсім новачок в створені сайтів підскажіть з чого починати що б стати front-end розробітником.
0 votes7 answers -
Передача данных из контактной формы
Здравствуйте. Подскажите пожалуйста: есть стандартная контактная форма php Имя Телефон Город Как заполнить одно из полей (например город), запретить его изменение и передать значение на почту? То-есть, контактная форма Имя Телефон Москва Или Имя Телефон Питер Посетителям нельзя изменить город и на почту приходит указанный именно мной город. Данное применяется на разных страницах, каждая страница для своего города.
0 votes4 answers -
Табличная верстка. Как сверстать такое
Верстаю email-письмо. Использую Foundation. Не получается сверстать таблицей такой блок http://skrinshoter.ru/s/170919/5k7rvQdR Как его сверстать табличной версткой? https://codepen.io/yaparoff/pen/vYBzdPm?editors=1000
0 votes7 answers -
font-weight влияет на работу тега A
Добрый день! Столкнулась со странной проблемой, буду признательна, если вы объясните в чем дело. Подключила шрифт Gotham вместо OpenSans на страницу, после чего ссылки c font-weight: 500 перестали работать. Для начертаний bold и 300 все ок. Как вообще начертание шрифта может влиять на работу тега и почему это не происходит с OpenSans ? Шрифт подключаю так: <style> @font-face { font-family: 'Gotham'; src: url("{{asset 'Gotham-Medium.eot'}}"); src: url("{{asset 'Gotham-Medium.eot?#iefix'}}") format('embedded-opentype'), url("{{asset 'Gotham-Medium.woff2'}}") format('woff2'), url("{{asset 'Gotham-…
0 votes12 answers -
Различное поведение блоков в сафари и хроме
Почему выпадает контент из родительского блока в сафари, а в хроме все хорошо? С чего начать? Куда смотреть?
0 votes2 answers -
Анимация градиента svg в safari
Здравствуйте. Есть такой пример. По окончании анимации path должен закрашиватся градиентом. Везде работает, кроме safari на ios, фон остается белым. Подскажите в чем причина и как это исправить?
0 votes1 answer -
Блок вылезает из центровщика
Пол года не занимался, не было времени, сейчас решил продолжить обучение и первым делом сел за практику опять...но многое забыл, вспоминаю, но не все получается. Например сверстал вот такую сетку и не могу понять, почему блок который skill-right при изменении масштаба браузера вылазит из под центровщика или вообще ломается. Очень хочу увидеть свои косяки, подскажите пожалуйста. https://jsfiddle.net/w02bzr4p/
0 votes3 answers -
Работа атрибута srcset
Здравствуйте, помогите разобраться, начал осваивать атрибут srcset в целом все понятно, не могу понять только один момент, код: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример</title> </head> <body> <img srcset="dota600.jpg 1x, dota1024.jpg 2x, dota1920.jpg 3x" src="1.jpg"> </body> </html> Соответственно на моем мониторе отображается dota600.jpg (x1) в оригинальном разрешении, но например при загрузке с устройства Pixel 2 XL (537 ppi) браузер выдает правильное изображение dota1920.jpg, но его размеры не 1920px на 1080px а 620px на 360px. Не могу понять почему так,…
0 votes1 answer -
Помогите создать верстку
Никогда не занимался этим. С чего начать? В частности интересует для начала сделать шапку из лого, 2 ссылок и 3 кнопок на соц сети. макет.rar
0 votes2 answers -
Помогите разобраться. (разрешение экрана)
Всем привет. У меня при верстке сайта по уроку возникла проблема. Сверстал все один в один (перепроверил несколько раз), но по итогу получается смещение элементов. Из за чего такое может произойти? Ссылку на скрин оставлю ниже (1левый экран то как у него, а (2)правый то как у меня) Скрин для наглядности, чтобы понять о чем я. Spoiler https://ibb.co/88wDBzq
0 votes5 answers -
Как оптимизировать скорость загрузки картинок без сжатия веса?
У меня из галереи отбирается пять случайных картинок и показывается пользователю, эти картинки имеют довольно солидный вес до 300 кб. При извлечении картинки становятся миниатюрными с помощью php тега getImageSize и увеличиваются если щёлкнуть по картинке, вес никуда не девается он по прежнему 300 кб. Как мне оптимизировать изображения так, чтобы ускорить загрузку сайта? Прочла вот эту статью https://habr.com/ru/post/189764/. Она мало мне чем помогла, правдо я использовала только два первых примера вот этот <div> <img src="comicbookguy.jpg" alt="" onload="imgLoaded(this)"/> </div> и вот этот <div id="Slideshow"> <img src="slid…
0 votes3 answers -
Помогите с сайтом
Помогте с сайтом, надо чтобы подменю отображалось снизу, но когда я навожу на меню происходить дичь какая то, помогите в чем проблема. Вот код: https://codepen.io/Totjmyanin/pen/rNBzYPj
0 votes2 answers -
Интересная задумка дизайнера. Как реализовать?
Дизайнер нарисовал макет вот с такими интересными линиями, которые идут по всей высоте сайта http://skrinshoter.ru/s/300819/pJvpKBvC А я теперь вот ломаю голову как такое сверстать. С одной стороны это можно сверстать колонками с рамкой, но ведь есть такие блоки, которые выходят за пределы этих колонок Как тогда быть в таком случае? Такие линии реально идут по всей высоте сайта.
0 votes3 answers -
push offcanvas
Крик о помощи.Помогите найти инфу как сделать примерно такое меню https://itchief.ru/examples/lab.php?topic=bootstrap.. только чтобы гамбургер был слева и открывался и закрывался по нажатию на него а выдвигающее меню выходило так же слева но при этом была не по вверх контента а сдвигала его. еще нужно что бы логотип расположенный сразу после гамбургера так же сдвигался за контентом при открытии меню. В идеале мне нужно все это реализовать с помощью классов бутстрап 4. Прикрепляю макет который мне нужно сверстать используя стили bootstrap 4 test-markup.psd
0 votes1 answer -
Интересный вопрос по мобильной верстке!
Всем привет! Задание: При размерах экрана от 800px и больше - col1=30%,col2=30%,col3=30% от ширины экрана и рассположены в 3 колонки; При размерах экрана от 500px до 800px - col1=100%,col2=50%,col3=50% от ширины экрана и первый блок сверху, два остальных снизу вместе; При размерах экрана от 0 до 500px - col1=90%,col2=90%,col3=90% от ширины экрана и расположены друг под другом. Вопрос: как сделать, чтобы в колонках отображалось нужное значение в %-х в зависимости от размера экрана? unit.zip
0 votes1 answer -
Подскажите как можно реализовать
Здравствуйте, есть макет вот с таким заголовком, подскажите пожалуйста как можно реализовать оформление вокруг него (полосы и ромбы), я имею представление о том как добавить по одному ромбу с каждой стороны - тут все ясно: before и after. Но как добавить множество элементов? Если что, знаю(чуть-чуть) только html и css, а js для меня пока темный лес. Буду признателен, если также скинете ссылки на статьи где можно об этом почитать поподробней.
0 votes1 answer -
Форма добавления объявления
Может быть кто-то любезно согласиться помочь.. Ситуация такая: создана доска объявлений. Есть 2 существенных неудобства в форме добавления объявлений. 1. Если в поле вставить текст, то появляется окно "ваш браузер не поддеживает...." - короче, вставка в основное поле, через дополнительное. 2. При прикреплении изображений в объявление необходимо копировать их код и вставлять в основное текстовое поле объявления. Естественно, для потенциального пользователя это катастрофически неудобно и громоздко. Как это можно исправить? какие изменения необходимо внести в код? Заранее благодарна за помощь 🙂
0 votes1 answer -
Float: both. Миф или реальность?
В одном из источников набрёл на both в списке возможных значений для атрибута float. Это какая-то ошибка или реально интерпретируется каким-нибудь браузером?
0 votes5 answers