Вопросы с меткой [css]
CSS, или каскадные таблицы стилей, — формальный язык описания внешнего вида документа, язык стилей, определяющий отображение HTML-документов.
28,855
вопросов
-1
голос
0
ответов
19
показов
Как сделать чтоб css не применялся к какому-нибудь блоку внутри html? [закрыт]
Например: есть html, к нему подключен framework (materialize, js и css) и плагин для отображения таблицы (tabulator, js и css). В html есть div, куда рендерится таблица с помощью плагина tabulator, со ...
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: ...
-3
голоса
0
ответов
27
показов
Помогите правильно применить стили к вложенным элементам
есть кнопка
проблема в том что мне необходимо сделать так, что бы при наведении на кнопку у меня менялся бэк цвета самой кнопки и черточки слева на этой кнопке, эти линии я сделал при момощи одного ...
0
голосов
2
ответа
70
показов
Как расположить div'ы разного размера так рядом так, чтобы они заполняли все свободное пространство?
Есть условно 20 дивов, ширина у всех одинакова, но высота разная. Они идут в ряд, и когда начинается новая строка блоков, они оставляют пустые места над собой и идут по линии, выравниваясь по верхней ...
0
голосов
1
ответ
57
показов
Помогите реализовать слайдер без испрользования JavaScript
Помогите реализовать слайдер, без использования JavaScript.
С помощью radio button нужно переключать блоки, в каждом блоке по 4 фото, всего их 4.
У меня это получилось, но только с помощью JavaScript....
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"&...
0
голосов
2
ответа
43
показа
Не получается сделать анимацию выпадающего меню
Мне нужно создать красивую анимацию выпадающего меню.
После наведения курсора на фотографию появляется выпадающее меню. Фотография становится больше и вокруг нее появляется рамка.
<!DOCTYPE html&...
0
голосов
1
ответ
22
показа
Применений стилей при наведении к элементам не имеющих общих родителей
вопрос : возможно сделать одновременное срабатывание стилей для двух элементов с разными родителями, но родители имеют одинаковые классы.
к примеру я курсором навожу на video__control__info(любой из ...
0
голосов
3
ответа
41
показ
Блок выходит за края страницы
я начинающий разработчик сайтов, и возникла проблема с блоком. Блок выходит за края страницы и не получается сделать округление углов с правой стороны. Вот код:
.board{
display: flex;
max-...
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-...
0
голосов
2
ответа
28
показов
вывод изображения из массива для div [закрыт]
Нужно взять фоновое изображение для div исходя из номера текущего вопроса.
const вопросыОсновнойМассив = [
{правильныйОтвет: 4,
ссылка: "https://b1.m24.ru/c/1060947.730xp.jpg"},
{правильныйОтвет: ...
0
голосов
0
ответов
33
показа
Можно ли использовать bootstrap в перемешку с обычной адаптивной вёрсткой
У меня есть проект, где я хочу использовать и bootstrap, и обычную адаптивную вёрстку от руки, так скажем
Будет ли верно с точки зрения стандартов\правильности разметки использовать и то, и то?
Или я ...
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"...
0
голосов
0
ответов
26
показов
С помощью какого свойства можно расположить блоки таким образом как на рисунке (имеется ввиду что слева картинка, а справа блок разделён на 2 части)
Помогите пожалуйста с расположением. Я пыталась сделать с помощью grid, но получилось так, как на второй картинке. Линии я тоже вставляла, но из-за того, что они уходили вправо я их просто убрала.
1
голос
2
ответа
81
показ
Как создавать кольцевые диаграммы с помощью stroke-dashoffset и stroke-dasharray
У меня есть 3 кольцевые диаграммы SVG, на каждой диаграмме есть линия, созданная с помощью Stroke-Dasharray, в целом диаграммы составляют 100%.
Я бы хотел, чтобы каждый график начинался там, где ...
0
голосов
1
ответ
18
показов
Как изменить цвет блока слайдера bootstrap
Подскажите, как я могу изменить цвет блока? Он статично белый, не могу никак стилями его подбить, подскажите, в чем может быть дело? style уже во все блоки закидываю, !important тоже не помогает.
{% ...
0
голосов
0
ответов
20
показов
Не вставляется pdf в html для django
В общем, мне надо поставить pdf в html, у меня лежит эта pdf в папке /media/ у меня щас вот такой код в html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
&...
0
голосов
1
ответ
33
показа
JS HTML Хочу отследить на какой из 19 областей сейчас находится мышка и выводить её класс в консоль каждую секунду
Есть код, состоит из 19 картинок (цветные части тела) поверх неё другая картинка (Черно белая, цельная одна картинка). в чем задача, хочу отследить на какой из областей находится мышка, у и у ...
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:...
1
голос
1
ответ
38
показов
Смещение текста в таблице
Как сделать с помощью css смещение текста в таблице на 20% от ширины ячейки? Заголовок таблицы оставить по центру.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="...
0
голосов
0
ответов
43
показа
В мобильной версии сайта есть отступ фона от header. Не могу понять из-за чего?
В мобильной версии сайта появляется какой-то просвет между фоном и header. Фон указан в самом теге header, в целом верстка через одно место, но нужна нормальная картинка. Подскажите как исправить?
...
-2
голоса
1
ответ
48
показов
Как мне нарисовать серые полоски на границах секторов круга?
Нужны вот такие серые рамки на треугольниках, сам круг сделать автоматически через conic-gradient
0
голосов
2
ответа
69
показов
надо сделать так чтобы при клике на дивы у которых id box1 box9 box35 box44 box49 box53 box67 box83 box93 box97 ниже допишу
вместо того чтобы у них менять бекграунды надо вставить картинку начал только с box1 и на нем не работает.
исправьте ошибку на строке где первый if а то я написал style.backgroundImage = "pngegg (...
0
голосов
0
ответов
72
показа
Почему не отображается svg картинка? [дубликат]
В футер на кнопке "Сохранить на память" меня есть svg картинка https://svgur.com/i/10Br.svg
Но она не отображается.
Подскажите почему?
:root {
--main-font: 'InterVariable', sans-serif;
...
1
голос
0
ответов
43
показа
Как верстаются подобные элементы в макетах
Как правильно верстать такой блок, что бы при изменении размера в меньшую сторону, ничего не съезжало. Под конкретное разрешение понятно, что изображение по центру, а его описание через абсолютное ...
1
голос
1
ответ
29
показов
В моем css файле множество правил, содержание которых соответствует их названиям классов. Как я могу их сократить?
В моем react приложении есть общие компоненты типа Text, в которые я через props передаю параметры типа color и size. В зависимости от этих параметров я присваиваю возвращаемому компоненту класс (...
5
голосов
3
ответа
100
показов
Почему применение CSS-фильтра к родительскому элементу нарушает позиционирование дочернего элемента?
Итак, у меня есть «анимация» титульного экрана, в которой заголовок Title сосредоточен на полноэкранной странице, и при прокрутке вниз он становится меньше и остается в верхней части страницы. Вот ...
0
голосов
1
ответ
38
показов
ссылка добавляет лишние пиксели
есть ссылка с классом logo а также картинка внутри.
Проблема в том, что картинка ровно 40х40, а ссылка почему-то 40х44, кто может сказать, почему? И как можно исправить?
Падинги, маржины сброшены до 0
0
голосов
0
ответов
23
показа
объясните пожалуйста разницу между justify-content: center и margin: 0 auto
Я новичок в верстке пока не понимаю как работает центрирование элементов. Если я правильно поняла, margin: 0 auto- для центрирования элемента фиксированной ширины внутри родительского контейнера. Но ...
0
голосов
0
ответов
20
показов
Не получается сделать окно авторизации/регистрации [дубликат]
Должно быть такое, что при нажатии на одну из кнопок: "Вход"/"Регистрация" должна меняться видимость нужного из окон
html код:
<div class="container">
<div ...
3
голоса
3
ответа
93
показа
Прикрепление стрелок к path дуги SVG
Я создаю датчик, используя SVG.
Есть ли способ добавить стрелку в конце дуги анимированного индикатора, чтобы указать введенное значение?
Так как датчик отображается с помощью stroke-dasharray path, ...
0
голосов
0
ответов
38
показов
Накладывается один элемент на другой
Слайдеры накладываются на форму.
Код css слайдера:
.slider{
padding-top: 10%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
height: 30%;
width: 40%;
scrollbar-color: ...
1
голос
1
ответ
82
показа
Неправильная работа скролла у контейнера и body(страницы сайта)
Всем привет! Я новичок в вебе и всё время сам находил решения, но сейчас не получается решить.
Все знают о проблеме вертикальной прокрутки страницы на смартфонах из-за адресной строки браузеров, ...
0
голосов
0
ответов
21
показ
как скопировать эффекты текста в фигме?
Хочу скопировать все свойства текста в фигме (раньше можно было так в Avacode сделать). Подскажите пожалуйста как это сделать? строго не судите, я -новичок.
0
голосов
1
ответ
40
показов
Открыть и закрыть search input по 1 кнопке, чистый js
Подскажите, пожалуйста, как можно выполнить проверку на чистом JS, что инпут открыт и его сразу закрывать не нужно?
Мне необходимо реализовать на 1 кнопку и открытие и закрытие search input.
Код на JS
...
0
голосов
1
ответ
27
показов
Разное отображение css стилей на разных устройствах
прошу помочь разобраться что не так с кнопкой. На компьютере она выглядит так
А на телефоне так
Сначала думала что это из за разных размеров экрана, добавляла @media, но это не помогло, так как сайт ...
0
голосов
0
ответов
16
показов
Сделать автопрокрутку для блока с картинками
Имеется блок с партнёрами для шалона Django, сейчас он переключается только по нажатию на кнопки. Можно-ли как-то сделать, что бы переключение происходило автоматически? Спасибо.
.u-section-1 .u-...
0
голосов
1
ответ
78
показов
Как реализовать Элипс на CSS
Здравствуйте. Как мне реализовать этот Элипс с помощью css?
0
голосов
1
ответ
22
показа
Динамические строки для grid-template-areas
У меня есть сетка с grid-template-areas, и я хочу, чтобы элементы с классом item-left отображались слева в одной колонке, а элементы с классом item-right - справа, как на скриншоте:
Важный момент: ...
1
голос
1
ответ
42
показа
Расширение стилей компонента (задача a link href)
Как можно с помощью расширений стиля изменить компонент?
import ReactDOM from 'react-dom/client';
import styled from "styled-components";
type AspectPropsType = {
children: string
...
0
голосов
1
ответ
24
показа
Как убрать отступы?
Как убрать белые отступы по краям шаблона?
/* grid container */
.holy-grail-grid {
display: grid;
grid-template-areas: 'header' 'main-content' 'left-sidebar' 'right-sidebar' 'footer';
}
/* ...
0
голосов
0
ответов
12
показов
Изменение высоты блока при раскрытии строк в MUI Table
Коллеги, привет!
Не могу решить следующую проблему, есть обертка для MUI Table (таблица древовидная) c высотой, как в примере.
В таком случае все работает корректно, если строки не помещаются в ...
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>Магазин продажу ...
-4
голоса
0
ответов
31
показ
адаптив через js
мне надо сделать так, чтобы когда ширина экрана меньше 500, то удалялся ul и добавлялась картинка. Нашёл способ window.innerWidth, но у меня картинка появляется сразу. Ul я удалил через display:none;
1
голос
1
ответ
40
показов
Маска изображения в виде трапеции
Задача - вставить несколько (4-5) картинок с маской в виде трапеции
(первое и последнее изображения обрезаются немного иначе, чем средние 2-3)
Делаем:
HTML
<div class="imgs">
<...
-1
голос
0
ответов
44
показа
Проверка адаптивного дизайна сайта [закрыт]
помогите, пожалуйста, проверить, как работает адаптивный дизайн сайта на разных устройствах. Я загрузила сайт на хостинг, и на планшетной и мобильной версиях появляется горизонтальная полоса прокрутки ...
0
голосов
1
ответ
43
показа
Подключение CSS к HTML с Go linux
Проблемы с подключением css к проекту. В HTML у меня:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="...
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&...
0
голосов
0
ответов
53
показа
Вопрос с фиксацией ширины .logo
Как сделать так, чтобы при расширении nav-а ширина .logo была фиксированная = 174px.
#wrapper {
width: 100vw;
height: 100vh;
}
header {
display: flex;
justify-content: center;
align-...
0
голосов
0
ответов
33
показа
Не понимаю в чем проблема. Контент шире экрана, слишком мелкий шрифт, интерактивные элементы близко
Ребят привет. Задам для кого-то банальный вопрос. Не кидайте камнями. Я не разбираюсь.
Нужен совет.
Есть сайт и проблемная страница шпателя для шпаклевки стен
Просканировал в мобайл френдли - страница ...