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
-
Выравнивание пунктов списка с добавленным элементом
День добрый! Набиваю руку в простенькой верстке придуманного мной сайта. Возникла проблема из за которой рву на себе волосы уже 2е сутки - это выравнивание пункта текста с добавленной картинкой вместо привычных точек. Перепробовал уже все,с list-style-image вообще сделать что либо бесполезно. Перешел на изменения в самом <li>, текст просто накладывается на картинку и сделать ничего не получается. Размер картинки 64x64. Поиски в интернете успехом не увенчались. Ниже мой сырой код по этому вопросу: li { list-style-type: none; } li:before{ content: url("http://s1.iconbird.com/ico/2013/9/447/w128h12813804433922.png"); width: 30px; height: 30px;…
0 votes4 answers -
Выравнивание пунктов списка с добавленным элементом
День добрый! Набиваю руку в простенькой верстке придуманного мной сайта. Возникла проблема из за которой рву на себе волосы уже 2е сутки - это выравнивание пункта текста с добавленной картинкой вместо привычных точек. Перепробовал уже все,с list-style-image вообще сделать что либо бесполезно. Перешел на изменения в самом <li>, текст просто накладывается на картинку и сделать ничего не получается. Поиске в интернете успехом не увенчались. Ниже мой сырой код по этому вопросу: li { list-style-type: none; } li:before{ content: url("http://s1.iconbird.com/ico/2013/9/447/w128h12813804433922.png"); width: 30px; height: 30px; display: grid; marg…
0 votes0 answers -
Шапка и 100% DIV
Наверно, все просто: подскажите, пожалуйста, как реализовать такое: нужна фиксированная шапка и две области под ней: слева аля меню, в ней может быть прокрутка. И справа - вторая область, 100% высоты и ширины всего остального пространства. Таким образом на странице браузера не должно быть прокрутки. Как это можно простыми средствами сделать? Вот что я имею ввиду (см. картинку): идеально, если у шапки будет тень.
0 votes6 answers -
Переход на анкор с другой страницы
Ребята, всем доброго времени суток, выручайте, делаю свой первый сайт и понимаю ничего:) Сабж, у меня есть главная страница, index.php, на ней есть разделы-анкоры, всякие там "О компании", "Услуги" и.т.д. Менюшка сверху, соответственно, их повторяет. По клику на менюшку, страница скроллится до нужного анкора. Просто-таки шоколад. Но в чем проблема. Менюшка одинакова на всех страницах и мне надо сделать так, чтобы с других страниц по клику на пункт меню открывало мой index.php на нужном анкоре. Собсна, мои познания во всем этом очень неочень. Первое что пришло в голову, прописать в менюшке href="/index.php/#box1" вместо просто #box1, но работает криво, перекидывает на анко…
0 votes5 answers -
Как это сделано? Битрикс, hover, фиксация.
Привет! Не соображу, как сделано так, что при наведении на карточку в каталоге появляется блок добавления в корзину, но высота родительского блока не меняется. Вернее, сетка не расползается. Как это сделано? https://mirbelia.ru/catalog/nizhnee_bele/
0 votes1 answer -
Скопировать css из фигмы
Стиль из фигмы только sass. Если преобразовать, то хоть и добавиться точка с запятой но название в стиле не добавляется, что очень трудно если строчек за четыреста. Можно еще как нибудь скопировать безбоязненно стиль из фигмы с обычным css?
0 votes1 answer -
Как гридами разместить дивы по углам родителя?
у меня 4 квадрата и я хочу разместить каждый из этих квадратов в каждый угол флекс-контейнера,решил сделать это командой justify-self и когда задаю для дива one параметр justify-self: start, то реакции не идет. Можно ли разместить каждый див по углу через грид? https://codepen.io/tempest2708/pen/ZEWaepy
0 votes1 answer -
Как сделать так,чтобы два всплывающих окна перекрывали друг друга при активности?
Есть адаптивное меню .mobmenu и кнопка обратной связи .feedback.openform. Как сделать так,чтобы при нажатии на гамбургер, меню с темным задним фоном перекрывало кнопку обратной связи,чтобы ее нельзя было нажать? И наоборот,при нажатии на форму обратной связи,нельзя было вызвать адаптивное меню. С меню вроде как я справился,но вот как полностью вывести фидбэк на передний план и чтобы при этом чтобы header с гамбургером отошли назад? https://codepen.io/tempest2708/pen/dyMVoOp pornohub-google-chrome-2020-09-04-00-56-15_AYQgL2jv.compressed.mp4
0 votes1 answer -
Не работает background-size:cover
привет. геометрия.онлайн на главной странице слайдер с наложенным фоном на псевдоэлемент почему-то не тянется фон при масштабировании страницы. почему?
0 votes3 answers -
Как сверстать шестиугольный тянущийся блок?
Клиенту надизайнили вот такой макет. Не понимаю, как верстать. Белую область еще примерно понимаю, как можно сделать из трёх частей. Верх и низ бордюрами по методам треугольника, центр - обычный прямоугольник. А вот золотую рамочку - как? И тянуться оно должно вертикально, завися от наполненности Ещё занятно то, что левый край фигуры выходит за сетку. Это видно по левой границе текста. https://codepen.io/d0ublezer0/pen/bGpqgKY вот что удалось сверстать что не нравится: придется ловить значения бордюра для разных разрешений, чтобы попасть в ширину блока ну и рамочку так и не смог запилить. UPD: добрался до clip-path Боле…
0 votes4 answers -
Проблема с отображением сайта на айфоне
Приветствую! Столкнулся с проблемой неправильного отображения фоновой картинки на iphone. Причем проблема возникает на реальных девайсах, на симуляции всё выглядит нормально. На моем телефоне на андроид всё хорошо. Есть ещё одна проблема - на айфоне не отображаются описания и кнопки "Подробнее".
0 votes0 answers -
Не работает макет сайта.
Привет всем. Занимаюсь версткой совсем недавно. Прочел тему, что если сделать один блок с 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…
0 votes1 answer -
Блок из картинок
Подскажите, как такое сверстать? Пробую grid'ы и флекс, пока не пришел к результату. https://prnt.sc/u0ucwi
0 votes0 answers -
Помогите сделать такое
Подскажите пожалуйста, есть ли готовое решение такого переключателя? Или как он называется, что гуглить нужно?) http://wbear.by/uslugi/uborka-kvartir/
0 votes1 answer -
Как сверстать такоя?
Как сверстать такоя? Без js, только css. https://prnt.sc/tuhp95 Требования к результату: - нужна возможность крутить схему, надписи должны оставаться горизонтальными; - должен тянутся на 80% от вьюпорта; - нужна возможность масштабировать весь блок изменяя один параметр; - без использования js
0 votes9 answers -
Позиционирование элемента
Подскажите пожалуйста, как позиционировать элемент на всю видимую область окна браузера? Есть слайдер, в котором крутятся картинки, и есть скрипт, благодаря которому картинка увеличивается, но не могу понять относительно какого элемента он позиционируется. <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…
0 votes0 answers -
Проблема вёрстки
https://jsfiddle.net/8tybdkz0/ Я только начал верстать, в общем всегда справа остаётся место, хз как убрать.
0 votes1 answer -
Как подогнать 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">По Вашему желанию электропроводку можно уложить в ПВХ-коро…
0 votes0 answers -
Форма уведомления об использовании cookie для сайта
Уважаемые форумчане, подскажите, пожалуйста, скрипт, виджет или другое решение для размещения на страницах сайта уведомления об использовании cookie в соответствии с Федеральным законом от 27.07.2006 года №152-ФЗ "О персональных данных" со следующими элементами: - кнопки "Согласен" (при ее использовании уведомление исчезает и больше не появляется ни на одной странице сайта) и "Не согласен" (при ее использовании сайт закрывается); - ссылка на документ "Политика конфиденциальности персональных данных".
0 votes0 answers -
iframe очищает остаток страницы
Добрый день! Возникла следующая проблема: стоит мне вставить iframe с видео с ютуба, как все элементы, идущие после этого iframe'а, попросту удаляются и вообще не отображаются на странице, в коде элемента их просто нет, как будто на iframe'е заканчивается документ. Первое видео корректно отображается, остальные же даже не появляются. Пробовал в разные места вставлять это видео, все тот же результат - после него страница становится полностью пустой. <div id="video_layer"> <button class="swipe_right" onclick="swipeRightVideoGallery();"><</button> <button class="swipe_left" onclick…
0 votes2 answers -
Не правильно работает меню сайта при адаптации.
Всем всем привет. Делаю сайт. Точнее редактирую шаблон добытый с просторов интернета. Сайт адаптивный. И в принципе все норм только вот меню криво работает. Суть проблемы: Когда сайт открыт во весь экран на пк все хорошо. фото 1. Когда окно браузера делаешь меньше то меню сжимается, и появляется кнопка раскрытия меню. Но сам список с назвиниями пунктов меню не пропадает (а по идее должен). фото 2. Когда нажимаешь на кнопку то типа появляется меню в том которое уже есть. 2й раз нажимаешь пропадает. фото 3. И если потом опять развернуть на весь экран страницу меню не появляется и кнопка с выпадающем меню пропадает. если свернуть нажать кнопку и зарвернуть страницу на…
0 votes2 answers -
Проблемы с выпадающим меню и скроллингом
Доброго времени суток. Подскажите пожалуйста , в чем может быть проблема При присвоении overflow-y: auto; блоку, не работает выпадающее меню Пример https://jsfiddle.net/kustovskyi/eho1kyjm/ В меню Dashboard Если убрать в класса .sidebar-submenu-right скроллинг , то меню выпадает
0 votes6 answers -
Gulp-sass категорически отказывается задавать css свойства для новых добавляемых в разметку элементов
Столкнулся с довольно удивительным явлением: gulp-sass категорически отказывается хавать и отображать css для новых добавляемых элементов разметки. Поломка произошла без каких-либо заметных вмешательств, просто с очередным запуском. Ошибок в системной консоли сейчас нет, только указывает на депрекаты одной функции Бурбона.Есть определенная предыстория. Изначально при установке данного шаблона консоль жаловалась на отсутствие модуля node-sass, хотя таковой был. Пришлось переустановить заново, попутно сменив номер версии в конфиге: "gulp-sass": "3.0.0", без галочки, хотя пробовал и с галочкой – результат тот же (это было нагуглено в бурже). Связана ли эта предыстория с наст…
0 votes2 answers -
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"> Ра…
0 votes0 answers -
Не применяется media запрос
Здравствуйте. Подскажите пожалуйста, что с этим media запросом не так? @media (max-width: 991px) #comment-list li { bottom: 55px !important; } На странице, где выводятся комментарии wordpress смещается вверх стиль автора на мобильных устройствах, виновник этого другой медиа запрос, но уже для калькулятора на wooccommerce @media (max-width: 991px) *, ::after, ::before { box-sizing: border-box; } отключить его не могу, потому что уже будут тогда проблемы с калькулятором. Потому решил написать отдельный медиа запрос, но уже для комментариев
0 votes0 answers