css- все статьи тега ➜ страница 16
CSS box-тень небольшой границы на мобильном телефоне
Я использую тень-прямоугольник, чтобы получить цвет на внешней стороне элемента. На моем рабочем столе это выглядит нормально, но на моем мобильном я вижу небольшую границу, вероятно, вызванную высоким PPI моих мобильных экранов. Смотрите скриншот ниже. Код .container { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } .container.main { background-color: #fff; } .header-main{ height: 90px; box-shadow: 0px -15px 0px 15px #009fe ...
Запретить div, содержащее изображение, изменять размер при добавлении текста
У меня есть div, центрированный на сайте и содержащий картинку. div расширяет свой height, чтобы соответствовать картине, как и ожидалось. Затем я добавляю текст и ожидаю, что он будет выложен в нижней части div. Но в дополнение к этому div также немного изменяется, так что его height является higher, чем height изображения. Вот пример: Html: <div class="siteContent"> <img class="debug" src="../../Content/themes/base/images/pageTitle.png" /> <span> aaa & ...
overflow-y scroll всегда показывает даже его не переполнение
Я делаю "прокрутку мобильной панели JQuery отдельно от контента", то, что я сделал Я применяю этот css для достижения того, что я делаю, но проблема в том, что Overflow-y: scroll ==> всегда показывать даже его содержимое не переполнение. Есть ли у вас какие-либо идеи по этому поводу, Заранее благодарю. .ui-panel-inner { position: absolute; top: 1px; left: 0; right: 0; bottom: 0px; overflow: scroll; -webkit-overflow-scrolling: touch; } ...
Подчеркивание активных ссылок navbar в bootstrap 4
Я обновляю веб-сайт с bootstrap 3 до 4 (бета-версия). В CSS я использовал, чтобы подчеркнуть активный навигации ссылки уже не работают. Вместо подчеркивания элемента он подчеркивает всю ширину страницы. Как я могу подчеркнуть активные элементы навигации в bootstrap 4? Bootstrap 3 css .navbar-default .navbar-nav > .active:after { position: absolute; bottom: 0; left: 0; width: 100%; content: " "; border-bottom: 5px solid #5BC0EB; } Попытка Bootstrap 4 css .navb ...
Как правильно оформить контур Select2 на: фокус?
Я использую Select2 , чтобы стилизовать мои <select> коробки, но я не могу стилизовать принудительный контур, который Chrome применяет к стилю: Проблема: Я попробовал несколько строк (очень непрофессионально, !important) CSS-кода, но до сих пор я не нашел решения, вот что я сейчас делаю: CSS: .select2 > *:focus, .select2:focus .select2 > *, .select2 { outline-width: 0px !important; } Чтобы исключить возможные проблемы, я определенно включаю этот CSS-файл, после моего о ...
Как я могу пойти на якорь и одновременно открыть Бутстрэп-аккордеон?
Я использую Бутстрэп-аккордеон, и он работает как заклинание, никаких проблем. Тем не менее, я хотел бы иметь ссылку на одну из вкладок в аккордеоне. Идея заключается в том, что как только я нажимаю на ссылку, я попадаю в ту часть страницы (аккордеон действительно находится внизу страницы) и открываю вкладку. Поэтому я использовал следующее: <a href="#prizes" data-toggle="collapse" data-parent="#accordion"><i class="mdi-action-info"></i></a> Который должен работать. ...
Как установить высоту карты vuetify
Я пытаюсь добавить карту с vue и vuetify, которая займет место в моем контейнере, используя v-flex для создания горизонтальной карты, которая действует так же вертикально. Я попытался добавить стиль высоты 100%, используя fill-height, child-flex и т. д., Но я не могу получить размер карты для заполнения контейнера. Как правильно регулировать высоту? Ref: https://vuetifyjs.com/en/components/cards <div id="app"> <v-app id="inspire"> <v-toolbar color="green" dark fixed app ...
CSS: before: after псевдо-элемент класса не работает
Я пытаюсь добавить ::before и ::after псевдо-элемент в заголовок меню. Псевдо-элементы прекрасно работают для обычной ссылки вне меню. Однако, когда я пытаюсь применить их к пункту меню, СВОЙСТВО background установлено, а свойства ::before и ::after - нет. Вот соответствующий CSS: #cssmenu { background-color: #FFFFCC; clear: both; display: inline; float: left; list-style: none; overflow: hidden; text-align: center; text-transform: uppercase; width: 100%; ...
Как изменить цвет нижнего колонтитула?
Я новичок в HTML и CSS и не могу понять, как я изменяю цвет нижнего колонтитула, который находится в http://materializecss.com/footer.html . любая помощь была бы потрясающей, спасибо! ...
Квадратные скобки с CSS
Я хочу создать скобки [ и ] только с помощью CSS. Есть ли способ указать верхнюю и нижнюю границу (без разрезания изображения), чтобы она выглядела как скобка? .bracket { border-top:20px; border-bottom:20px; border-right:none; border-left: 1px solid black; } ...
jQuery Image map альтернатива
Какова альтернатива использованию карт изображений? Недавно я увидел вопрос, и кто-то сказал: "Почему люди все еще используют карты изображений?"и я хотел знать хорошее CSS или JavaScript решение, чтобы увидеть для себя, если его лучше использовать, чем изображение карты. ...
Динамическое введение фильтров SVG и применение к HTML
Я играю с применением фильтров SVG к HTML. Это работает, если все жестко закодировано, хотя мне нужен идентификатор CSS -webkit-filter для chrome. При попытке создать элемент SVG с фильтром динамически с помощью javascript это не удается. Кто-нибудь может объяснить почему? Вот что у меня есть до сих пор: http://jsfiddle.net/H3UX8/1/ Первая пара изображений и текста размыта в chrome и firefox, а вторая - нет. Выписка не содержит работа: .dynamic div { -webkit-filter: url('#f2'); fil ...
Как изменить глобальный размер шрифта Bootstrap по умолчанию?
Глобальный размер шрифта Bootstrap по умолчанию равен 14px, а высота строки-1,428. Как я могу изменить его глобальные настройки по умолчанию? Придется ли мне менять bootstrap.минута.css во всех множественных записях? ...
Как назначить класс элементу с помощью переменной $ scope в angular js
У меня есть класс .haba-haba{ border:1px solid red; height:50%; width:50%; } Я сохраняю имя класса в переменной scope в моем контроллере, используя $scope.className = "haba-haba"; Как я могу назначить $scope.className моему div классу? Я пытался сделать <div ng-class="'{{className:true}}'"></div> это не сработало. Кто-нибудь может подсказать мне решение? заранее спасибо! ...
CSS: заставить div поместиться на экране браузера?
Хорошо, я пытаюсь сделать div подходящим по размеру окна браузера. Так что у меня есть div с высотой: 100%. Все это очень хорошо. Однако это содержит таблицу (в элементе управления ASPX я не могу изменить код и т. д., прием.), и много уровней вниз есть div с "height: 1869px" (и переполнение:auto и position:relative, если это имеет значение). Это приводит к изменению размера таблицы, чтобы соответствовать этому, и вся страница заканчивается прокруткой. IE8 developer tools report мой внешний div и ...
bootstrap 4 таблица размеров столбцов
В bootstrap 3 я мог бы применить col-sm-xx к тегам th в thead и изменять размер столбцов таблицы по желанию. Однако это не работает в bootstrap 4. Как я могу достичь чего-то подобного в bootstrap 4? <thead> <th class="col-sm-3">3 columns wide</th> <th class="col-sm-5">5 columns wide</th> <th class="col-sm-4">4 columns wide</th> </thead> Глядя на код, при условии, что он не имеет правильного размера, особенно если вы добавляете некоторые данные в ...
Есть ли способ использовать CSS, чтобы фоновое изображение действовало как "обложка", но на 120%?
Значение CSS background-size: cover растянет изображение, но сохранит его отношение ширины к высоте. Однако он будет растягивать его только до тех пор, пока наименьшая сторона не достигнет 100% той же стороны родительского узла. /* This is an image of 100px Wide x 50px Tall, so it'll stretch to 100% of the window height and then scale the width larger to retain its width-to-height ratio. */ body { background-image: url( "/images/test.png" ); background-size: cover; backgroun ...
Как переместить мигающий курсор в css?
Я работаю над веб-сайтом (встроенным в HTML/CSS), в котором я хочу переместить мигающий курсор вправо, чтобы он не был вверху значка. Фрагменты HTML и CSS, которые я использовал для того, чтобы сделать значок поиска: .searchicon { position: absolute; left: 34.5%; top: 22.4%; transform: translateY(-50%); color: red; pointer-events: none; } <div class="input-searchicon"> <input class="form-control search_radius mb-4" type="text"> <span class="fa ...
Несколько медиа запросов в css не работают
У меня есть несколько запросов в моей таблице стилей, где код@media only screen and (min-width : 768px) and (max-width : 1024px) { } работает отлично, но под ним у меня @media screen and (min-device-width : 176px) (max-device-width : 360px) {} не работает. CSS: @media only screen and (min-width : 768px) and (max-width : 1024px) { body {background: red; } } @media screen and (min-device-width : 176px) (max-device-width : 360px) { body {background: green; } } ...
Увеличение ширины полосы прокрутки в Firefox-html / css
Я видел некоторые вопросы по этому поводу, но эти вопросы не дали решения, которое могло бы работать для меня. Я хочу увеличить ширина скроллбара элемента div. Размер div огромен, поэтому появилась горизонтальная полоса прокрутки. Теперь я хочу увеличить ширину этой полосы прокрутки для большей гибкости. Поэтому я поискал и нашел следующую ссылку с кодом, который работает в браузере Chrome. JSFiddle ::-webkit-scrollbar { width: 2em; height: 2em } ::-webkit-scrollbar-button { backgr ...