Вопросы с меткой [вёрстка]
Вёрстка (HTML-вёрстка, Вёрстка веб-страниц) — процесс формирования веб-страниц на языке разметки гипертекста (HTML) с использованием каскадных таблиц стилей (CSS).
3,640
вопросов
1
голос
1
ответ
25
показов
Картинка заслоняет уголки у блока
Сделал у текстового блока уголки с помощью двух прямоугольников псевдоклассов
При изменении z-index у изображения оно начинает закрывать уголки
Код:
*{
margin: 0;
padding: 0;
}
:root{
...
0
голосов
1
ответ
8
показов
Карточки слайдера slick
Такая проблема, верстаю карусель из карточек, используя slick. Сам слайдер работает, но я хочу, чтобы карточки меняли резиново свои размеры (ширина, высота, font-size)
Подскажите, как правильно это ...
0
голосов
3
ответа
129
показов
Некорректно работает свойство height:100% для дочерних элементов
Не совсем понимаю поведение height:100% для дочерних div-ов.
Есть вот такой простой пример кода:
html, body
{margin:0;padding:0;}
.main-wrapper {
height: 100vh;
}
.section {
background: grey;...
-1
голос
0
ответов
54
показа
Как сверстать таблицу?
Всем привет. Подскажите как сверстать данную таблицу и можно ли ее сделать в таком виде.(картинка ниже)
Основные проблемы:
1)с фиксацией левой колонки и шапки таблицы, лучше бы без использования js;
2)...
0
голосов
0
ответов
25
показов
Почему не получается переопределить background-color
В зависимости от состояния, блок должен менять цвет. Все нечетные блоки имеют цвет $smoky-white, а блоки в состоянии open должны иметь цвет $platinum.
Проблема в то, что у &:nth-child(odd) блоков ...
0
голосов
0
ответов
15
показов
Как Swiper'у задать центральный слайд?
В Swiper есть настройка "centeredSlides: true,", но она применяется сначала к первому слайду и при этом остается пустое место слева.
Как задать настройку "centeredSlides: true," с ...
0
голосов
2
ответа
55
показов
Как сделать такой вырез в фоне [закрыт]
подскажите как сделать такой вырез в виде восьмёрки у фоновой заливки
0
голосов
1
ответ
27
показов
Кнопка фильтр работает не правильно
Вот сценарий. Сайт перезагружен, все элементы показаны(не отфильтрованы) нажимаю на кнопку-фильтр например "Машины", видно в devtools что класс добавляется , НО реакции нету, не фильтруются ...
2
голоса
3
ответа
68
показов
Возможно ли на CSS реализовать прямоугольник как на картинке (куча линий заполнящих блок)
Тренируюсь в верстке, нашел такой макет. Скажите пожалуйста, возможно ли так заполнить блок не прописываю куча линий вручную? Или это обязательно картинка? Заранее всем огромное спасибо)
0
голосов
0
ответов
13
показов
Как сделать фиксированные пробелы для детского издания в InDesign, чтобы не возникало "коридоров"?
Я верстаю детское издание 6+ (2-я возрастная категория). ГОСТ устанавливает норму пробела с кегль шрифта. В качестве пробела установил круглую шпацию, но визуально пробелы получаются слишком большими. ...
0
голосов
1
ответ
56
показов
Как ограничить ширину span по фактически занимаемому буквами пространству?
В span есть стрелочка сортировки, она позиционируется абсолютно относительно span. Но когда происходит перенос строки, то образуется промежуток между тестом span и стрелочкой. Мне нужно, чтобы span ...
0
голосов
0
ответов
38
показов
Неверно рассчитывается ширина столбцов Grid в WPF
При запуске окна с установленным SizeToContent="WidthAndHeight" столбцы должны занимать ровно по половине ширины окна, но на самом деле получается так, что первый столбец занимает больше ...
0
голосов
0
ответов
11
показов
Реальное разрешение окна браузера для верстки мобильной версии сайта
Для верстки мобильной версии сайта использую браузерную эмуляцию мобильных устройств.
Там есть разные устройства с указанным разрешением:
iPhone 4 с разрешением экрана 320х480px;
iPhone SE с ...
-1
голос
1
ответ
36
показов
как сверстать данную таблицу. Проблема именно с подложкой под центральной колонкой. Возможно ли это силами табличных тегов?
.table {
/* border-collapse: separate; */
border-spacing: 12px;
border: none !important;
margin: 0;
width: unset;
position: relative;
}
.center-col {
position: relative;
background: ...
0
голосов
1
ответ
21
показ
Верстка Bootstrap. Blade
Имеется представление.
И пользуется bootstrap.
Проблема заключается в том, что первый элемент при переборе отображается криво. В чем может быть причина?
Код представления
<div class="row&...
-1
голос
2
ответа
51
показ
Линейный градиент через CSS + фоновая картинка
Встала задача с версткой вот такой карточки:
Изначально делал через background-image с добавлением иконки и линейного градиента, но возникла проблема, когда стало необходимо реализовать hover, при ...
1
голос
1
ответ
34
показа
Почему height:100% не работает в данном случае? [закрыт]
Вот у меня есть контентная часть, которую я с помощью стиля 'flex' расположил автоматически между хедером и футером(в нем пока нет контента), мне нужно расположить секцию welcome до конца экрана, я ...
0
голосов
0
ответов
17
показов
Кодогенераторы для Figma?
Подскажите, кто использует какие-то кодогенераторы поверх Figma? Какие-то плагины?
*Раньше верстал psd шаблоны из Avocode и Zeplin, там была возможность контролировать переменные, работа с ...
0
голосов
3
ответа
62
показа
Как отключить полосу прокрутки для навигационной панели в HTML/CSS?
Есть шаблон страницы, содержащей навигационную панель и контент отдельными блоками. При переполнении страницы в content появляется полоса прокрутки, которая задевает navbar. Сама полоса прокрутки ...
0
голосов
1
ответ
58
показов
Как сверстать нестандартный блок
Какими способами можно сверстать каплю снизу блока чтобы в ней был background-image блока?
Интересует несколько возможных решений
0
голосов
2
ответа
70
показов
Как сверстать по сетке уходящий в бок элемент
Пытаюсь сверстать эту часть, получается через одно место, не понимаю как это нормально верстать по дизайнерской сетке. В моём случае сеткой выступает .container
Есть вариант левый и правый элемент ...
0
голосов
1
ответ
41
показ
Сделать фон во всю ширину за контейнером
При масштабировании страницы фон липнет к одному краю и уезжает. Это нормально? Нужно будет адаптировать под такой размер или можно растягивать картинку в нормальном положении?
.container {
...
0
голосов
1
ответ
36
показов
CSS Нестандартный text-align, как выровнять?
При верстке с шаблона столкнулся с таким не стандартным выравниванием текста.
Анализатор psd шаблона сломался, и показывает невалидное значение text-align: justifyLeft; Подскажите, пожалуйста, как ...
0
голосов
2
ответа
56
показов
Кнопка живет своей жизнью html
Как сделать чтобы кнопка находилась под последним вводом?
main #osn #feedback {
height: 600px;
padding-top: 20px;
clear:both;
}
main #osn #feedback input {
width: 40%;
margin-...
0
голосов
1
ответ
15
показов
Bootstrap под разные разрешения
Можно ли под разные разрешения использовать свойства bootstrap?чтобы к примеру к одному и тому же объекту было применено свойство одного типа, но под разные разрешения.подскажите пожалуйста
0
голосов
0
ответов
33
показа
Помогите доделать многоуровневое меню
const contents = document.querySelectorAll('.content');
const menu = [...document.querySelectorAll('.menu *:not(.head)')];
document.addEventListener('click', (event) => {
const node = event....
0
голосов
1
ответ
41
показ
Верстка карточки товара
Ребят в чем проблема?
Пытаюсь сверстать карточку товара по макету. В итоге не могу центрировать по вертикали изображение внутри блока.
Верхний значек процентов я оформил, его дает центровать только ...
0
голосов
2
ответа
35
показов
Сделать фон больше размера container
Подскажите как сделать фон таким образом.
Контент находится в container 1500px.
Размер блока с фоном 1700px.
Пробовал делать такую конструкцию
<orange-background>
<container>
</...
0
голосов
0
ответов
15
показов
Как сделать вью, скрытые клавиатурой/другими элементами, доступными для скроллинга?
Есть экран. Когда показывается клавиатура, некоторые элементы скрываются за ней и за блоком с кнопкой и текстом, которые прижаты к ней (скрин)
Но я пытаюсь реализовать скролл в случае, если какие-то ...
0
голосов
0
ответов
14
показов
Как сделать иконку к просмотренной ссылке?
У меня такой вопрос, как мне сделать не просмотренную ссылку(1) и просмотренную ссылку(2), как на картинке. Я конечно понимаю, что это скорее всего легко реализуемо, но мне честно нужна помощь. ...
0
голосов
1
ответ
37
показов
Почему при изменении позиции меняется ширина у абсолютно позиционированного элемента?
Есть такой pen: https://codepen.io/stn28/pen/ExepRrp
Кому неудобно лазить на сторонние ресурсы, вот пример:
* {
box-sizing: border-box;
}
.wrapper {
position: relative;
border: 1px solid ...
0
голосов
0
ответов
14
показов
Как сделать прокрутку на сайте по якорю, чтобы блок отображался целиком
Всем доброго дня, у меня имеется навигация на сайте используя id и , но так как хедер у меня фиксированный сверху, выходит что при подходе к блоку, он занимает какую-то часть места и выглядит не очень ...
0
голосов
1
ответ
38
показов
Выпадает ли position absolute из DOM?
Я смотрел ролик про позицинирование в css. Автором была сказана такая мысль, что когда элементу применяется абсолютное позиционирование, то он как бы выпадает из DOM дерева, аналогично как это ...
0
голосов
1
ответ
74
показа
По стандарту html, в ul можно вложить только списки li?
По стандарту html w3c в ul на первом уровне вложенности могут быть только списки li? Или можно вложить любой другой элемент и это не будет ошибкой? Просто случайно заметил что у меня в коде в ul ...
0
голосов
0
ответов
29
показов
Как сделать чтобы меню с подкатегорией не закрывалось?
Есть такой код: https://codepen.io/stn28/pen/VwGdmyo
<div class="menu">
<div class="block-1">Кино</div>
<div class="block-2">
<ul>
...
0
голосов
0
ответов
26
показов
Как реализовать задачу из макета
обучаюсь верстке , возник такой вопрос есть макет: https://www.figma.com/file/rnIAwsECd4Qxltrz2p4NJa/Ветклиника?node-id=0%3A1&t=aPkamyHowD0px2qc-0
В нем имеется блок "История пациентов", ...
0
голосов
0
ответов
28
показов
HTML Заголовки становятся ссылками
Почему-то HTML заголовки ссылаются на якорь cities. Вроде бы все парные закрыл.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<...
0
голосов
0
ответов
27
показов
Самый оптимальным вариантом создания сайдбара по прежнему является float?
Ребята, создавать сайдбары все также лучше с помощью float-ов? Flex'ы не лучшее решение для них, а грид не такой кроссбраузерный как float и гриды конечно для более сложных случаев. Я прав, или мое ...
0
голосов
0
ответов
28
показов
Почему в сафари круг становится овалом?
У меня есть вот такой круг, при медиа запросе на max-width для него он уменьшается как положено, но становится овалом. Почему так?
&__value-circle {
width: 380px;
height: 380px;
...
0
голосов
0
ответов
23
показа
Не работает @media-запрос
При вёрстке срабатывает @media на первом изображении:
А при открытии сайта на ноутбуке не работает @media-запрос на втором:
Может быть, задаю не правильный @media-запрос. Если так, то подскажите ...
0
голосов
1
ответ
41
показ
Видео поверх iframe
никак не могу понять, как добавить видео, поверх другого?
Например есть iframe с видео из Ютуба, как поверх этого ifram'a добавить другое видео с ютуба, затем по окончанию открывалось другое? То, ...
-1
голос
1
ответ
22
показа
Не подскажите, как реализовать эффект скролла спаралксом
Подскажите пожалуйста, как на реакте реализовать, скролл как на этом сайте, с помощью каких библиотек?
www.studiorhe.com/
1
голос
1
ответ
26
показов
Как сделать правильно списки
Всем привет.
Нужно сделать два дива .list с двумя колонками списка и что-бы они делили пространство между собой, но возникает одна проблема, когда в первом диве .list текста мало во втором списке, то ...
0
голосов
1
ответ
35
показов
Адаптированные отступы
Всем привет. Можно ли как-то задать адаптированный размер margin/padding для элементов? Чтобы при уменьшение экран также уменьшались отступы. Например как max-width: 1200 для блоков. Не получается ...
0
голосов
0
ответов
10
показов
Почему в vue transition на блок не работает
Хотел чтобы при hover div блок менял цвет но это происходить слишком быстро добавил transition:.4s но все равно transtion не работает
<template>
<div class="about " id="...
1
голос
0
ответов
39
показов
Контент в три колонки на flexbox
Всем доброго времени.
Есть код, в нем конечно каша, но помогите у кого есть возможность разобраться как сделать.
Необходимо меню как на сайте https://www.ey.com/en_gl чтобы табами было.
Табы вроде ...
1
голос
1
ответ
31
показ
Помогите с вёрсткой блока на HTML + CSS
Учусь вёрстке.
В одном из бесплатных макетов есть такой блок:
Не знаю, как сделать так, чтобы все блоки, а также линии, идущие к ним, были расположены правильно.
Было предположение, что для ...
0
голосов
1
ответ
32
показа
Сверстать треугольную инфографику с динамическими данными
Есть задача сверстать такого типа инфографику, однако я в ступоре, как это сделать без абсолютов и canvas
Подскажите пож, как это лучше реализовать?
0
голосов
2
ответа
40
показов
как при клике выводить конкретный элемент массива?
let song1 = document.querySelector('song_1');
let song2 = document.querySelector('song_2');
let song3 = document.querySelector('song_3');
let song4 = document.querySelector('song_4');
let song5 = ...
2
голоса
1
ответ
52
показа
Как реализовать анимацию появления кривых линий?
При загрузке страницы , должны появляться линии по направлению точки(левые направо , правые налево), в конце анимации ,на каждой появляется точка.