Вопросы с меткой [css]

CSS, или каскадные таблицы стилей, — формальный язык описания внешнего вида документа, язык стилей, определяющий отображение HTML-документов.

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

Как сделать чтоб css не применялся к какому-нибудь блоку внутри html? [закрыт]

Например: есть html, к нему подключен framework (materialize, js и css) и плагин для отображения таблицы (tabulator, js и css). В html есть div, куда рендерится таблица с помощью плагина tabulator, со ...
Dmytro's user avatar
  • 1
0 голосов
1 ответ
33 показа

Как сделать изображения spotify.png и soundcloud.png под надписью с классом main-hero-text?

.header-links-list__item { font-family: 'DM Sans', sans-serif; margin-right: 60px; } .header-links-list__item a { color: #FFFFFF; } .header-links-list__container { float: right; padding: ...
floydpower's user avatar
-3 голоса
0 ответов
27 показов

Помогите правильно применить стили к вложенным элементам

есть кнопка проблема в том что мне необходимо сделать так, что бы при наведении на кнопку у меня менялся бэк цвета самой кнопки и черточки слева на этой кнопке, эти линии я сделал при момощи одного ...
Влад Рыжиков's user avatar
0 голосов
2 ответа
70 показов

Как расположить div'ы разного размера так рядом так, чтобы они заполняли все свободное пространство?

Есть условно 20 дивов, ширина у всех одинакова, но высота разная. Они идут в ряд, и когда начинается новая строка блоков, они оставляют пустые места над собой и идут по линии, выравниваясь по верхней ...
Surion's user avatar
  • 7
0 голосов
1 ответ
57 показов

Помогите реализовать слайдер без испрользования JavaScript

Помогите реализовать слайдер, без использования JavaScript. С помощью radio button нужно переключать блоки, в каждом блоке по 4 фото, всего их 4. У меня это получилось, но только с помощью JavaScript....
Artem817's user avatar
0 голосов
1 ответ
35 показов

Как расположить форму регистрации под заголовком?

.container { max-width: 1120px; margin: 0 auto; } .reserv { background-color: #f8e7d7; } .reserv__inner { display: flex; } .reserv__content { margin: 0 auto; } <div class="reserv"&...
Aноним's user avatar
0 голосов
2 ответа
43 показа

Не получается сделать анимацию выпадающего меню

Мне нужно создать красивую анимацию выпадающего меню. После наведения курсора на фотографию появляется выпадающее меню. Фотография становится больше и вокруг нее появляется рамка. <!DOCTYPE html&...
Artem817's user avatar
0 голосов
1 ответ
22 показа

Применений стилей при наведении к элементам не имеющих общих родителей

вопрос : возможно сделать одновременное срабатывание стилей для двух элементов с разными родителями, но родители имеют одинаковые классы. к примеру я курсором навожу на video__control__info(любой из ...
Максим's user avatar
0 голосов
3 ответа
41 показ

Блок выходит за края страницы

я начинающий разработчик сайтов, и возникла проблема с блоком. Блок выходит за края страницы и не получается сделать округление углов с правой стороны. Вот код: .board{ display: flex; max-...
Danil Zewaikin's user avatar
0 голосов
1 ответ
37 показов

Подскажите, пожалуйста, почему не хочет работать первая кнопка (все остальные работают). Не применяется курсор и анимация (ни в хроме, ни в опере)

* { margin: 0; padding: 0; box-sizing: border-box; } .containerWrap1 { display: flex; flex-direction: column; margin-left: 150px; margin-right: 150px; margin-top: 44px; justify-...
Alena's user avatar
  • 3
0 голосов
2 ответа
28 показов

вывод изображения из массива для div [закрыт]

Нужно взять фоновое изображение для div исходя из номера текущего вопроса. const вопросыОсновнойМассив = [ {правильныйОтвет: 4, ссылка: "https://b1.m24.ru/c/1060947.730xp.jpg"}, {правильныйОтвет: ...
Анmъ uзъ Нuзовья's user avatar
0 голосов
0 ответов
33 показа

Можно ли использовать bootstrap в перемешку с обычной адаптивной вёрсткой

У меня есть проект, где я хочу использовать и bootstrap, и обычную адаптивную вёрстку от руки, так скажем Будет ли верно с точки зрения стандартов\правильности разметки использовать и то, и то? Или я ...
WTFisGoingOn's user avatar
  • 1,303
0 голосов
1 ответ
27 показов

как задать размер пустого textarea в списке в строках? (framework7)

<ul> <li class="item-content item-input item-input-outline"> <div class="item-inner"> <div class="item-input-wrap"> <textarea id="word1" class="resizable"...
Djames's user avatar
  • 7
0 голосов
0 ответов
26 показов

С помощью какого свойства можно расположить блоки таким образом как на рисунке (имеется ввиду что слева картинка, а справа блок разделён на 2 части)

Помогите пожалуйста с расположением. Я пыталась сделать с помощью grid, но получилось так, как на второй картинке. Линии я тоже вставляла, но из-за того, что они уходили вправо я их просто убрала.
Liloika's user avatar
  • 11
1 голос
2 ответа
81 показ

Как создавать кольцевые диаграммы с помощью stroke-dashoffset и stroke-dasharray

У меня есть 3 кольцевые диаграммы SVG, на каждой диаграмме есть линия, созданная с помощью Stroke-Dasharray, в целом диаграммы составляют 100%. Я бы хотел, чтобы каждый график начинался там, где ...
Alexandr_TT's user avatar
0 голосов
1 ответ
18 показов

Как изменить цвет блока слайдера bootstrap

Подскажите, как я могу изменить цвет блока? Он статично белый, не могу никак стилями его подбить, подскажите, в чем может быть дело? style уже во все блоки закидываю, !important тоже не помогает. {% ...
shaidullin2h's user avatar
0 голосов
0 ответов
20 показов

Не вставляется pdf в html для django

В общем, мне надо поставить pdf в html, у меня лежит эта pdf в папке /media/ у меня щас вот такой код в html: {% load static %} <!DOCTYPE html> <html lang="en"> <head> &...
Locdog's user avatar
  • 1
0 голосов
1 ответ
33 показа

JS HTML Хочу отследить на какой из 19 областей сейчас находится мышка и выводить её класс в консоль каждую секунду

Есть код, состоит из 19 картинок (цветные части тела) поверх неё другая картинка (Черно белая, цельная одна картинка). в чем задача, хочу отследить на какой из областей находится мышка, у и у ...
Pavel Orlov's user avatar
1 голос
1 ответ
64 показа

Соединение двух текстов через многоточие на CSS

Вот пример того что надо получить https://codepen.io/spensersab/pen/MWLBNKo li { width: 400px; overflow: hidden; border: 0px solid red; } li+li { margin-top: 10px; } li:after { border:...
Andrey's user avatar
  • 13
1 голос
1 ответ
38 показов

Смещение текста в таблице

Как сделать с помощью css смещение текста в таблице на 20% от ширины ячейки? Заголовок таблицы оставить по центру. <!DOCTYPE html> <html lang="en"> <head> <meta charset="...
Bernard's user avatar
  • 13
0 голосов
0 ответов
43 показа

В мобильной версии сайта есть отступ фона от header. Не могу понять из-за чего?

В мобильной версии сайта появляется какой-то просвет между фоном и header. Фон указан в самом теге header, в целом верстка через одно место, но нужна нормальная картинка. Подскажите как исправить? ...
mack.rodionov's user avatar
-2 голоса
1 ответ
48 показов

Как мне нарисовать серые полоски на границах секторов круга?

Нужны вот такие серые рамки на треугольниках, сам круг сделать автоматически через conic-gradient
Wyse's user avatar
  • 1
0 голосов
2 ответа
69 показов

надо сделать так чтобы при клике на дивы у которых id box1 box9 box35 box44 box49 box53 box67 box83 box93 box97 ниже допишу

вместо того чтобы у них менять бекграунды надо вставить картинку начал только с box1 и на нем не работает. исправьте ошибку на строке где первый if а то я написал style.backgroundImage = "pngegg (...
hnb's user avatar
  • 1
0 голосов
0 ответов
72 показа

Почему не отображается svg картинка? [дубликат]

В футер на кнопке "Сохранить на память" меня есть svg картинка https://svgur.com/i/10Br.svg Но она не отображается. Подскажите почему? :root { --main-font: 'InterVariable', sans-serif; ...
Ramil's user avatar
  • 9
1 голос
0 ответов
43 показа

Как верстаются подобные элементы в макетах

Как правильно верстать такой блок, что бы при изменении размера в меньшую сторону, ничего не съезжало. Под конкретное разрешение понятно, что изображение по центру, а его описание через абсолютное ...
Olegexe's user avatar
  • 39
1 голос
1 ответ
29 показов

В моем css файле множество правил, содержание которых соответствует их названиям классов. Как я могу их сократить?

В моем react приложении есть общие компоненты типа Text, в которые я через props передаю параметры типа color и size. В зависимости от этих параметров я присваиваю возвращаемому компоненту класс (...
Olivka's user avatar
  • 11
5 голосов
3 ответа
100 показов

Почему применение CSS-фильтра к родительскому элементу нарушает позиционирование дочернего элемента?

Итак, у меня есть «анимация» титульного экрана, в которой заголовок Title сосредоточен на полноэкранной странице, и при прокрутке вниз он становится меньше и остается в верхней части страницы. Вот ...
Alexandr_TT's user avatar
0 голосов
1 ответ
38 показов

ссылка добавляет лишние пиксели

есть ссылка с классом logo а также картинка внутри. Проблема в том, что картинка ровно 40х40, а ссылка почему-то 40х44, кто может сказать, почему? И как можно исправить? Падинги, маржины сброшены до 0
Oleksii Shpak's user avatar
0 голосов
0 ответов
23 показа

объясните пожалуйста разницу между justify-content: center и margin: 0 auto

Я новичок в верстке пока не понимаю как работает центрирование элементов. Если я правильно поняла, margin: 0 auto- для центрирования элемента фиксированной ширины внутри родительского контейнера. Но ...
юля's user avatar
  • 1
0 голосов
0 ответов
20 показов

Не получается сделать окно авторизации/регистрации [дубликат]

Должно быть такое, что при нажатии на одну из кнопок: "Вход"/"Регистрация" должна меняться видимость нужного из окон html код: <div class="container"> <div ...
Dairrow's user avatar
3 голоса
3 ответа
93 показа

Прикрепление стрелок к path дуги SVG

Я создаю датчик, используя SVG. Есть ли способ добавить стрелку в конце дуги анимированного индикатора, чтобы указать введенное значение? Так как датчик отображается с помощью stroke-dasharray path, ...
Alexandr_TT's user avatar
0 голосов
0 ответов
38 показов

Накладывается один элемент на другой

Слайдеры накладываются на форму. Код css слайдера: .slider{ padding-top: 10%; margin-left: auto; margin-right: auto; box-sizing: border-box; height: 30%; width: 40%; scrollbar-color: ...
Сашок Нубик's user avatar
1 голос
1 ответ
82 показа

Неправильная работа скролла у контейнера и body(страницы сайта)

Всем привет! Я новичок в вебе и всё время сам находил решения, но сейчас не получается решить. Все знают о проблеме вертикальной прокрутки страницы на смартфонах из-за адресной строки браузеров, ...
Малик's user avatar
0 голосов
0 ответов
21 показ

как скопировать эффекты текста в фигме?

Хочу скопировать все свойства текста в фигме (раньше можно было так в Avacode сделать). Подскажите пожалуйста как это сделать? строго не судите, я -новичок.
юля's user avatar
  • 1
0 голосов
1 ответ
40 показов

Открыть и закрыть search input по 1 кнопке, чистый js

Подскажите, пожалуйста, как можно выполнить проверку на чистом JS, что инпут открыт и его сразу закрывать не нужно? Мне необходимо реализовать на 1 кнопку и открытие и закрытие search input. Код на JS ...
jojoj's user avatar
  • 11
0 голосов
1 ответ
27 показов

Разное отображение css стилей на разных устройствах

прошу помочь разобраться что не так с кнопкой. На компьютере она выглядит так А на телефоне так Сначала думала что это из за разных размеров экрана, добавляла @media, но это не помогло, так как сайт ...
user574435's user avatar
0 голосов
0 ответов
16 показов

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

Имеется блок с партнёрами для шалона Django, сейчас он переключается только по нажатию на кнопки. Можно-ли как-то сделать, что бы переключение происходило автоматически? Спасибо. .u-section-1 .u-...
Aliaksei Yurau's user avatar
0 голосов
1 ответ
78 показов

Как реализовать Элипс на CSS

Здравствуйте. Как мне реализовать этот Элипс с помощью css?
Feron129's user avatar
0 голосов
1 ответ
22 показа

Динамические строки для grid-template-areas

У меня есть сетка с grid-template-areas, и я хочу, чтобы элементы с классом item-left отображались слева в одной колонке, а элементы с классом item-right - справа, как на скриншоте: Важный момент: ...
rabbit's user avatar
  • 881
1 голос
1 ответ
42 показа

Расширение стилей компонента (задача a link href)

Как можно с помощью расширений стиля изменить компонент? import ReactDOM from 'react-dom/client'; import styled from "styled-components"; type AspectPropsType = { children: string ...
Serg Nakovnik's user avatar
0 голосов
1 ответ
24 показа

Как убрать отступы?

Как убрать белые отступы по краям шаблона? /* grid container */ .holy-grail-grid { display: grid; grid-template-areas: 'header' 'main-content' 'left-sidebar' 'right-sidebar' 'footer'; } /* ...
alex's user avatar
  • 1
0 голосов
0 ответов
12 показов

Изменение высоты блока при раскрытии строк в MUI Table

Коллеги, привет! Не могу решить следующую проблему, есть обертка для MUI Table (таблица древовидная) c высотой, как в примере. В таком случае все работает корректно, если строки не помещаются в ...
Donald Myesha's user avatar
0 голосов
2 ответа
84 показа

Почему не работает grid-template-columns я написал код а он не работает

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Магазин продажу ...
ShaurmaShaverma's user avatar
-4 голоса
0 ответов
31 показ

адаптив через js

мне надо сделать так, чтобы когда ширина экрана меньше 500, то удалялся ul и добавлялась картинка. Нашёл способ window.innerWidth, но у меня картинка появляется сразу. Ul я удалил через display:none;
Дима Сухарев's user avatar
1 голос
1 ответ
40 показов

Маска изображения в виде трапеции

Задача - вставить несколько (4-5) картинок с маской в виде трапеции (первое и последнее изображения обрезаются немного иначе, чем средние 2-3) Делаем: HTML <div class="imgs"> <...
GrimCap's user avatar
  • 161
-1 голос
0 ответов
44 показа

Проверка адаптивного дизайна сайта [закрыт]

помогите, пожалуйста, проверить, как работает адаптивный дизайн сайта на разных устройствах. Я загрузила сайт на хостинг, и на планшетной и мобильной версиях появляется горизонтальная полоса прокрутки ...
Bemfes's user avatar
  • 23
0 голосов
1 ответ
43 показа

Подключение CSS к HTML с Go linux

Проблемы с подключением css к проекту. В HTML у меня: <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="...
Максим's user avatar
0 голосов
0 ответов
18 показов

Почему когда я вставляю второй код js то получается каша. Кто знает как сделайте, пожалуйста, что бы селект меню открывалось как на картинке [дубликат]

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&...
Zeris's user avatar
  • 1
0 голосов
0 ответов
53 показа

Вопрос с фиксацией ширины .logo

Как сделать так, чтобы при расширении nav-а ширина .logo была фиксированная = 174px. #wrapper { width: 100vw; height: 100vh; } header { display: flex; justify-content: center; align-...
Женя Боронин's user avatar
0 голосов
0 ответов
33 показа

Не понимаю в чем проблема. Контент шире экрана, слишком мелкий шрифт, интерактивные элементы близко

Ребят привет. Задам для кого-то банальный вопрос. Не кидайте камнями. Я не разбираюсь. Нужен совет. Есть сайт и проблемная страница шпателя для шпаклевки стен Просканировал в мобайл френдли - страница ...
Guidebook Store's user avatar