css- все статьи тега


Липкий блок

http://postovoy.net/jquery-plagin-fiksiruyuschegosya-lipkogo-bloka.html...

Макеты на основе Rem, масштабирование в chrome несовместимо, PX против REM

Я ломал голову над этим, поиск google на самом деле не имеет большой помощи или даже документации по этой проблеме, но это сильно влияет на мое текущее преобразование в мобильный дизайн. Куда бы я ни пошел, все рекламируют использование макетов на основе rem в качестве нового золотого стандарта, и на поверхности достоинства этого подхода кажутся идеальными (полная поддержка доступности как для эталонного пиксельного масштабирования, так и для масштабирования размера шрифта для поддержки многих ...

Две колонки flex-box макет

Мне нужно создать макет, который будет содержать список элементов в двух столбцах. Как я показал ниже: .container { border: 1px solid red; height: 300px; display: flex; flex-direction: column; justify-content: flex-start; flex-wrap: wrap; } .item { border: 1px dashed blue; height: 50px; } <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="i ...

Border-Radius для DIV элемента не работает в IE8

The -moz-border-radius:10px; -webkit-border-radius:10px; свойства элемента DIV не работают в IE8, но это прекрасно работает в Firefox и google chrome. Пожалуйста, предоставьте мне, если у вас есть какое-либо решение по этому вопросу. ...

Div бок о бок

Итак, я пытался поставить div рядом здесь, но у меня закончились варианты. <div id='body'> <div id='header'> </div> <div id='container'> <div id='navigation'></div> <div id='content'> <div id='shoutout-box'></div> </div> </div> </div> Я хочу, чтобы заголовок охватывал всю ширину браузера, в то время как контейнер должен отображаться под заголовком. Навигация должна идти параллельно с контентом ...

Размытие за всплывающим окном при загрузке страницы проблема

Я работаю на сайте с всплывающим окном, единственное, чего мне не хватает, - это эффект размытия, когда это всплывающее окно появляется. Это всплывающее окно будет отображаться каждый раз, когда страница загружается, поэтому я нашел отличный код размытия здесь на SO. Хотя этот код предназначен для функции, где эффект размытия отображается кнопкой. Из-за этого я изменил код, так что вместо кнопки он теперь onLoad, который запускается из тега body. Единственная проблема заключается в том, что пя ...

Настройка атрибутов стиля CSS с помощью thymeleaf

Как задать свойство background тега стиля с разрешенным url-адресом thymeleaf. У меня есть <div style="background:url('<url-to-image>')"></div> Есть ли эквивалент <img th:src="${@/<path-to-image>}"> для установки атрибутов стиля в thymeleaf. ...

Bootstrap col-md-offset - * не работает

Я пытаюсь добавить класс Bootstrap offset в свой код для достижения выравнивания по диагонали следующим образом: Но я не знаю, какое смещение мне следует использовать. Я пробовал пару смещений, чтобы достичь этого, но безрезультатно.Текст покрывает весь джамботрон.Вот мой код Html: <div class="jumbotron"> <div class="container"> <div class="row"> <div> <h2 class="col-md-4 col-md-offset-4">Browse.</h2 ...

Создание треугольника в css с градиентным фоном

Я пытаюсь создать треугольник в css с градиентным фоном. У меня пока не было никакого успеха. Есть ли способ сделать это, чтобы вызвать этот эффект, видимый на изображении ниже. (Треугольник, прикрепленный к неправильному окну ошибки пароля.) Дизайн в Photoshop Это дизайн, который у меня есть до сих пор в HTML и CSS. Вот css, который у меня есть для треугольника на данный момент. .error-triangle { wwidth: 0; height: 0; border-top: 10px solid transparent; border-botto ...

CSS Media Query и Javascript/jQuery не совпадают

В моем CSS у меня есть медиа-запрос, такой как: @media (min-width: 800px) { /* styles */ } А затем в моем jQuery я нацеливаюсь на ширину окна и выполняю некоторые действия. Edit: согласно ответам ниже, я изменил эту функцию, но мои JS и CSS все еще не выровнялись. Проблема была исправлена с помощью функции Modernizr, как указано в принятом ответе. $(window).resize(function() { var viewportWidth = $(window).width(); if (viewportWidth >= 800) { // do something } }); ...

CSS3 эффект перехода с onclick

Я работаю над CSS3 и как бы застрял на одной проблеме. Проблема заключается в следующем: У меня есть изображение, которое изначально находится в левой части экрана: .box img{ margin-left:0; -webkit-transition:1s; } Теперь, при наведении, когда я хочу, чтобы эффект имел место, т. е. переместите изображение 500px слева, когда я наведу курсор на изображение, следующий код: .box img:hover{ margin-left:500px; -webkit-transition:1s; } Это работает просто идеально. Единственная проблема за ...

Как удалить CSS-класс из ячейки jqGrid?

Можно добавить класс CSS в ячейку jqGrid, используя метод setCell, как показано ниже. grid.setCell(rowId, "ColumnName", "", "my-style-class"); Учитывая, что этот метод, по-видимому, способен только добавлять CSS-классы, как можно удалить CSS-класс из ячейки jqGrid? ...

Динамическое изменение атрибута стиля элемента с помощью JavaScript

У меня есть определенная таблица стилей для div. Теперь я хочу изменить один атрибут div динамически, используя js. Как я могу это сделать? document.getElementById("xyz").style.padding-top = "10px"; Правильно ли это? ...

Как использовать обратную косую черту в свойстве содержимого css?

Я пытаюсь добавить обратную косую черту после каждого элемента списка, но не могу заставить его работать. Это работает, если я использую трубу или прямую косую черту, но не обратную косую черту. Я искал код сущности-символа для использования, но не смог найти его для обратной косой черты. Есть ли решение? #navigation ul.nav > li:after{ content: " "; } Спасибо! ...

Jquery изменение переменной по клику

Верно, я бы хотел, чтобы при нажатии кнопки (или в данном случае какого-то текста) Jquery показывал тег div, содержащий изображение, затем через 2 секунды изображение исчезало, а затем отображался текст. Все это прекрасно работает, однако я хочу, чтобы это сработало только один раз. Я решил сделать это с помощью переменной и оператора if, поэтому переменная изменяется от 0 до 1, а затем кнопка не может быть нажата снова из-за изменения переменной. Или, по крайней мере, это плохо сформулировано в ...

Bootstrap 3 "btn-group" неадаптивное поведение на небольших экранах

Существует ли способ bootstrap 3 для обработки небольших размеров экрана для "btn-group"? Группа кнопок помещается в <td> и оборачивается в <div class="btn-group">: Выглядит нормально, пока вы не измените его размер до Как сделать их стойкими? Я попытался добавить класс btn-group-justified. Но это дает в результате кнопки полной ширины и выглядит еще хуже при перенастройке до небольшого размера экрана. P. S> у меня есть идея, как ее реализовать добавив полный набор каст ...

Стоит ли создавать отдельный CSS-файл для каждой HTML-страницы?

Я создаю личную домашнюю страницу. У меня есть 4 HTML-страницы и только один CSS-лист, связанный для всех страниц. То есть внутри одного CSS-файла я настроил макет для всех разных страниц. [На самом деле, каждая страница имеет практически одинаковый макет, только содержание и их стиль выглядят по-разному. И мой сайт не является таким уж продвинутым.] Это хорошая практика? Или я должен создать отдельный CSS для каждой страницы? Пример того, что у меня есть сделано: Страница-1.html: <l ...

Как динамически изменять в materialize CSS framework

Я только начал использовать фреймворк materialize css. Теперь materialize преобразует любой тег select в набор элементов ul и li. Раньше, используя JQuery, я мог сделать это: var $selectDropdown = $("#dropdownid"); $selectDropdown.empty(); $selectDropdown.html(' '); var value = "some value"; $selectDropdown .append($("<option></option>").attr("value",value).text(value)); Мой html-это просто пример тега select: Раньше это работало. Теперь это не удается. Какова была бы Альтер ...

Загрузка шрифтов с помощью Webpack и font-face

Я пытаюсь загрузить шрифт в мой CSS-файл с помощью @font-face, но шрифт никогда не загружается. Это моя структура каталогов. Затем в webpack.config.js у меня есть загрузчик, чтобы получить шрифты. var path = require('path'); var webpack = require('webpack'); module.exports = { devtool: 'eval', entry: [ "./index.js" ], output: { path: __dirname+"/build", filename: "main.js" }, plugins: [ new webpack.NoErrorsPlugin(), new webpack.HotModuleReplacementPlugin(), ...

настройка выпадающего списка автозаполнения

Я используюjquerys autocomplete виджет, но у меня есть несколько проблем, пытаясь стиль окна, которые выпадают, когда вы ищете что-то. Я пытаюсь немного сдвинуть коробку вниз и изменить цвет границы/bg, но некоторые JS добавляют некоторые встроенные стили, которые переопределяют мои .CSS-стили. Но я не могу его найти. Я основал свой на этом. <ul class="ui-autocomplete ui-menu ui-widget-content" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 11; display: block; ...