Вопросы с меткой [вёрстка]

Вёрстка (HTML-вёрстка, Вёрстка веб-страниц) — процесс формирования веб-страниц на языке разметки гипертекста (HTML) с использованием каскадных таблиц стилей (CSS).

Фильтрация
Сортировка
Метки
0 голосов
0 ответов
14 показов

Доработка сайта 1с-Битрикс

Существует уже готовый сайт на 1с-Битрикс, к которому у меня есть админка. Также у меня есть свёрстанный компонент (слайдер) на чистом html/css/js. Как мне решить задачу создания нового раздела на ...
0 голосов
0 ответов
83 показа

Как адаптировать в CSS так же?

На странице регистрации Facebook https://ru-ru.facebook.com/ я заметил, что под кнопками и полями ввода имеется белый квадрат. Когда я изменяю разрешение экрана через DevTools, этот квадрат и все ...
0 голосов
0 ответов
20 показов

Какой подход выбрать в css?

У меня есть в jsx-файле элементы, которые мне необходимо стилизовать в css. Вопрос: мне нужно сразу в css объявить эти элементы, задать им размеры и позиции на своем мониторе и только потом приступать ...
0 голосов
0 ответов
39 показов

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

Всем привет. У меня есть элемент-прямоугольник registration-overlay, который находится под двумя кнопками. Мне нужно, чтобы registration-overlay был "привязан к ним" и подстраивался под их ...
1 голос
1 ответ
47 показов

Как спозиционировать дополнительные элементы управления видео чтобы они не слетали при разворачивании на весь экран?

Чтобы добавить дополнительные элементы управления в тег video оборачиваем его блоком и относительно данного блока позиционирую элементы(position: absolute). <div class="relatVid"> <...
0 голосов
0 ответов
33 показа

Как отобразить position: absolute элемент поверх родителя с прокруткой

У меня в проекте есть div c overflow-x: auto, ограниченный по высоте (например 500px). Когда высота div по мере роста количества элементов внутри него становится более 500px, появляется вертикальный ...
0 голосов
0 ответов
16 показов

div в html сам удаляет у себя класс на отображаемой странице, но класс существует в devtools

что это может быть? скриптов тут нет. при наведении мышью в девтулсе на класс, на странице в бабле он отображает класс как несуществующий. стили к этому классу через css файл не применяются, если ...
0 голосов
1 ответ
26 показов

Ошибка размера родителя при адаптации в CSS

Я задал родителю ширину в 1280px, но при адаптации для маленьких скринов обнаружил, что этот элемент имеет ширину не в 1280px, а около 440. С чем это связано? css: .registration-form { position: ...
0 голосов
1 ответ
171 показ

Чтобы блок display: flex не вылезал за границы родительского блока при растягивании его содержимого

Видео плеер находится внутри блока div(.relatVid) с помощью которого на видео позиционируются элементы управления и прочее. Нужно вписать блок div(.relatVid) в div(.videBlock) так, чтобы он ...
3 голоса
3 ответа
151 показ

Помогите в решении нестандартного блока на html css

Кто знает как решить данную задачу? Возможно есть уже какое то готовое решение сохраненное на кодпене или может быть кто то сталкивался с похожей задачей и сможет поделится её решением? Спасибо
0 голосов
0 ответов
45 показов

Как реализовать подобную смену картинок при помощи ползунка

есть задача реализовать подобный слайдер, меняющий картинку при перемещении ползунка вправо или влево. Как это можно сделать? Возможно надо как-то использовать css свойство clip. Буду благодарен за ...
0 голосов
2 ответа
89 показов

Адаптация под разные устройства

сверстал сайт, версткой занимаюсь не так давно, на широких экранах выглядит довольно прилично, но вот с мобильными у меня проблема, не могу увеличить шапку сайта на весь экран, ей постоянно что-то ...
2 голоса
1 ответ
49 показов

Изображения внутри <pattern> не отображаются в старых версиях браузера Mozilla

На старых версиях mozilla изображения внутри тега pattern не отображаются. Как заставить браузер это делать? Имеется примерно такой html на странице: svg { height: 100%; width: 100%; } ....
0 голосов
0 ответов
30 показов

Кастомный select или css appearance

Нет ли проблем с кроссбраузерностью при изменении стилей нативного select с помощью appearance? Сейчас делаю select с нуля(с помощью `divов, aria-атрибутов и рукописной js логики). Но так как это ...
0 голосов
0 ответов
30 показов

PixelPerfect и React / Webpack

PixelPerfect перезапускается(исчезает/появляется) после каждого обновления в коде. В Gulp такого не было, в webpack или react дело видимо. Кто-нибудь сталкивался с этим/знает, что можно пробовать, ...
0 голосов
1 ответ
432 показа

Контент (Position:relative) накладывается на хэдэр (positioin:sticky) при скролле

В код вставил сниппет слайдера (position:relative), при этом при скролле весь контент слайдера накладывается поверх на header (position:sticky). Происходит примерно вот это. Подскажите, как решить ...
0 голосов
1 ответ
55 показов

Не понимаю как расположить кнопки по краям от лого

Верстаю сайт по макету, в навигационном меню лого расположено между пунктами меню. Верстаю в первый раз по гайдам из ютуба(до этого только совмещение ужже навёрстанного с моим сайтом). Проблема ...
0 голосов
0 ответов
60 показов

Не отображаются изображения в HTML рассылках на iPhone

Подскажите, в HTML рассылках на iPhone в приложении Яндекс.Почта вместо изображений пустые квадраты-заглушки. Если зайти через несколько секунд еще раз в письмо, отобразятся первые несколько ...
0 голосов
1 ответ
85 показов

Как отобразить таблицу внутри border-box?

section { width: 90%; margin: 10px; border: 5px solid skyblue; padding: 10px; } <section> <h2>Soft Skills</h2> <table border=1> <tr> <th>...
0 голосов
0 ответов
24 показа

Что с вордпрессом: не центрирует описание под картинками

Один и тот же подрядчик перенес нам 2 сайта с Тильды на Вордпресс. На одном сайте во всех статьях под картинками описание центрируется, во втором - нет. При этом: в редакторе отображает по центру, а ...
3 голоса
1 ответ
624 показа

Как при наведении на svg добиться появления текста

Как при наведении на svg добиться появления текста svg <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg&...
0 голосов
1 ответ
30 показов

Как реализовать вертикальный каталог каналов?

Хочу сделать сбоку слева блок, в котором будут кружки каналов для навигации(как в дискорде короче). Как реализовать, чтобы они не ломались и оставались пропорциональными? Код выглядит примерно так: &...
0 голосов
1 ответ
38 показов

как можно сделать верстку блока со стрелками

Не могу понять как сделать этот блок, есть ли статья или код по таким версткам. Проблема заключается в правильном расположении стрелок текста и цифр.
0 голосов
0 ответов
29 показов

Изменить расстояние между блоками DIV и принудительно установить высоту и ширину картинок?

Подскажите, как изменить расстояние между блоками DIV и принудительно установить высоту и ширину картинок? Принудительно через width не получается /* Общие стили */ *, *:after, *:before { border-...
0 голосов
1 ответ
68 показов

Плавное увеличение картинки при наведении, с текстом сверху и затемненным фоном

Подскажите код с использованием css и div, для реализации задачи: Необходимо создать 9 блоков (через div) фотографий, которые при наведении медленно увенчиваются и на фотографиях расположен текст. ...
1 голос
1 ответ
32 показа

Картинка заслоняет уголки у блока

Сделал у текстового блока уголки с помощью двух прямоугольников псевдоклассов При изменении z-index у изображения оно начинает закрывать уголки Код: *{ margin: 0; padding: 0; } :root{ ...
0 голосов
3 ответа
260 показов

Некорректно работает свойство height:100% для дочерних элементов

Не совсем понимаю поведение height:100% для дочерних div-ов. Есть вот такой простой пример кода: html, body {margin:0;padding:0;} .main-wrapper { height: 100vh; } .section { background: grey;...
0 голосов
1 ответ
48 показов

Карточки слайдера slick

Такая проблема, верстаю карусель из карточек, используя slick. Сам слайдер работает, но я хочу, чтобы карточки меняли резиново свои размеры (ширина, высота, font-size) Подскажите, как правильно это ...
1 голос
0 ответов
91 показ

Анализ макета и автоматическое создание html структуры

В основном, я занимаюсь вёрсткой и соответственно, в подавляющем большинстве случаев имею дело с макетами (figma, реже photoshop). У макета всегда есть структура, вложенные элементы, основные блоки и ...
0 голосов
0 ответов
52 показа

Почему не получается переопределить background-color

В зависимости от состояния, блок должен менять цвет. Все нечетные блоки имеют цвет $smoky-white, а блоки в состоянии open должны иметь цвет $platinum. Проблема в то, что у &:nth-child(odd) блоков ...
0 голосов
1 ответ
3k показов

Footer внизу страницы

Хотел сверстать шаблон сайта, но никак не могу прикрепить footer, знаю что можно сделать, например, добавив: .content{padding-bottom: N px} .footer{height: N px; margin-top:- N px} но ничего не ...
0 голосов
0 ответов
72 показа

Как Swiper'у задать центральный слайд?

В Swiper есть настройка "centeredSlides: true,", но она применяется сначала к первому слайду и при этом остается пустое место слева. Как задать настройку "centeredSlides: true," с ...
0 голосов
1 ответ
876 показов

Почему не работает слайдер swipe вместе с jquery?

Есть конкретный слайдер Swipe. Он может работать и с jquery, и без. Проблема в том, что не скроллится мышкой и не работают клавиши в нём, если есть jquery. Без jquery — всё отлично работает. Подключал ...
3 голоса
3 ответа
1k показов

Координатная (пиксельная) сетка (линейка)

Меня заинтересовала работа участника @CbIPoK2513, где он создал координатную сетку с помощью технологии CSS, используя абсолютную единицу измерения - пиксель(px). Вот его первая часть ответа на вопрос ...
0 голосов
2 ответа
109 показов

Как сделать такой вырез в фоне [закрыт]

подскажите как сделать такой вырез в виде восьмёрки у фоновой заливки
0 голосов
1 ответ
31 показ

Кнопка фильтр работает не правильно

Вот сценарий. Сайт перезагружен, все элементы показаны(не отфильтрованы) нажимаю на кнопку-фильтр например "Машины", видно в devtools что класс добавляется , НО реакции нету, не фильтруются ...
2 голоса
3 ответа
76 показов

Возможно ли на CSS реализовать прямоугольник как на картинке (куча линий заполнящих блок)

Тренируюсь в верстке, нашел такой макет. Скажите пожалуйста, возможно ли так заполнить блок не прописываю куча линий вручную? Или это обязательно картинка? Заранее всем огромное спасибо)
0 голосов
0 ответов
18 показов

Как сделать фиксированные пробелы для детского издания в InDesign, чтобы не возникало "коридоров"?

Я верстаю детское издание 6+ (2-я возрастная категория). ГОСТ устанавливает норму пробела с кегль шрифта. В качестве пробела установил круглую шпацию, но визуально пробелы получаются слишком большими. ...
0 голосов
1 ответ
176 показов

Как ограничить ширину span по фактически занимаемому буквами пространству?

В span есть стрелочка сортировки, она позиционируется абсолютно относительно span. Но когда происходит перенос строки, то образуется промежуток между тестом span и стрелочкой. Мне нужно, чтобы span ...
0 голосов
0 ответов
45 показов

Неверно рассчитывается ширина столбцов Grid в WPF

При запуске окна с установленным SizeToContent="WidthAndHeight" столбцы должны занимать ровно по половине ширины окна, но на самом деле получается так, что первый столбец занимает больше ...
0 голосов
0 ответов
17 показов

Реальное разрешение окна браузера для верстки мобильной версии сайта

Для верстки мобильной версии сайта использую браузерную эмуляцию мобильных устройств. Там есть разные устройства с указанным разрешением: iPhone 4 с разрешением экрана 320х480px; iPhone SE с ...
-1 голос
1 ответ
39 показов

как сверстать данную таблицу. Проблема именно с подложкой под центральной колонкой. Возможно ли это силами табличных тегов?

.table { /* border-collapse: separate; */ border-spacing: 12px; border: none !important; margin: 0; width: unset; position: relative; } .center-col { position: relative; background: ...
0 голосов
1 ответ
31 показ

Верстка Bootstrap. Blade

Имеется представление. И пользуется bootstrap. Проблема заключается в том, что первый элемент при переборе отображается криво. В чем может быть причина? Код представления <div class="row&...
-1 голос
2 ответа
84 показа

Линейный градиент через CSS + фоновая картинка

Встала задача с версткой вот такой карточки: Изначально делал через background-image с добавлением иконки и линейного градиента, но возникла проблема, когда стало необходимо реализовать hover, при ...
1 голос
1 ответ
62 показа

Почему height:100% не работает в данном случае? [закрыт]

Вот у меня есть контентная часть, которую я с помощью стиля 'flex' расположил автоматически между хедером и футером(в нем пока нет контента), мне нужно расположить секцию welcome до конца экрана, я ...
1 голос
3 ответа
6k показов

Квадратная картинка на CSS

Как сделать на CSS квадратную картинку? Тоесть имеется несколько картинок, одна 500x100, другая 100x500 обе картинки выводятся параметром width:30%; мне нужно сделать их квадратными, height:30%; ...
0 голосов
1 ответ
797 показов

Как сделать такой скролл?

Нужен скролл, как тут: Заранее спасибо!
0 голосов
1 ответ
74 показа

Как сверстать нестандартный блок

Какими способами можно сверстать каплю снизу блока чтобы в ней был background-image блока? Интересует несколько возможных решений
0 голосов
3 ответа
437 показов

Как отключить полосу прокрутки для навигационной панели в HTML/CSS?

Есть шаблон страницы, содержащей навигационную панель и контент отдельными блоками. При переполнении страницы в content появляется полоса прокрутки, которая задевает navbar. Сама полоса прокрутки ...
0 голосов
2 ответа
988 показов

Верстка футера css

Я скажем так новичок в css и у меня не получается сверстать правильно и с сохранением адаптации footer который изображен на скриншоте выше. Пока у меня получается только так <footer> <...