css- все статьи тега ➜ страница 14
960 grid system-вложенные сетки имеют проблему компоновки
Я только начал разрабатывать сайт хобби для себя, и пытаюсь использовать 960 CSS grid system для размещения моих html-элементов на экране. Я получил основную идею и только что реализовал скелетный сайт здесь, на моем сервере Пока у меня есть несколько вопросов: <div class="container_12"> <div class="grid_12"> <div id='top_bar' class='grid_insider'><!-- start of #top_bar --> <ul id='top_menu' class='grid_5'><!-- start of #top_menu --> ...
Как убрать стрелки в полосе прокрутки через CSS
Как правило, в полосе прокрутки будут стрелки вверх и вниз на обоих концах вертикальной полосы прокрутки. Есть ли в любом случае, чтобы удалить его так, чтобы появилась только полоса прокрутки, а не стрелки на обоих концах. Ниже приведен мой CSS: .scrollbar-vertical { top: 0; right: 0; width: 17px; height: 100%; overflow-x: hidden; scrollbar-3dlight-color:#999; scrollbar-arrow-color:white; scrollbar-base-color:white; scrollbar-face-color:#999; border-r ...
Подгонка к размеру своего содержимого с помощью CSS?
Вотскрипка . Мне нужно сделать <fieldset> шириной его содержимого, а не его родителя. Есть ли хороший способ сделать это? ...
Добавление Google Translate на веб-сайт
Глядя здесь Google Translate я получаю следующий код. <meta name="google-translate-customization" content="9f841e7780177523-3214ceb76f765f38-gc38c6fe6f9d06436-c"></meta> <div id="google_translate_element"> </div> <script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element'); } </script> <script t ...
jQuery addClass не применяет стиль динамически
Я пытаюсь динамически применить стиль к нескольким выпадающим спискам на моей странице. Использование jQuery addClass действительно добавляет класс ко всем элементам Select, как я могу видеть это из моей консоли Chrome. Однако стили не применяются к элементам. Теперь, если я вручную добавляю класс к каждому элементу select отдельно, а затем сохраняю страницу и обновляю ее, стиль применяется к элементу. Есть идеи, почему стиль не применяется с классом jquery инъекция? $("select").addClass("se ...
CSS Parallax фоновое изображение пробел в IE
Я использую метод CSS-only кита Кларка для создания двухслойного эффекта параллакса, чтобы фоновое изображение прокручивалось с меньшей скоростью, чем остальной контент сайта. Просто для ясности, изображение покрывает всю страницу,а содержимое располагается на ней. Мой сайт разделен на два основных элемента div (и контейнер div) - один для фонового изображения, а другой для содержимого страницы. Ниже приведен код, который я использовал для различных div элементы. .container { height: 100%; ...
OS X Yosemite меню размытие фона в CSS
Я ищу способ получить эффект размытого фона OS X 10.10, работающий в css. Размытие с помощью filter:blur или фильтра Гаусса SVG также размывает границу, поэтому это не будет работать. Вот пример эффекта: ...
Простая форма как сделать флажок принять условия встроенным
<p><%= f.input :terms, :as => :boolean, :label => false, :boolean_style => :inline %> Accept <%= link_to "Terms of use", terms_path,:remote => true %> and <%=link_to "privacy Policy", privacy_path, :remote => true%></p> В конечном итоге это выглядит так Как лучше всего выстроить их в одну линию? ...
Vanilla JS замены для индексов jQuery () и eq () [дубликат]
На этот вопрос уже есть ответ здесь: jQuery index () в ванильном javascript 3 ответа Я преобразую старые манипуляции DOM на основе jQuery на нашей веб-странице в ванильный javascript, большинство из которых прошло на удивление легко, но попали в стену с всплывающими меню. Мы используем простой формат вкладок и скрытого меню дивы: <div class="tab">tab 1</div> <div class="tab">tab ...
Расстояние между кнопками Navbar находится друг под другом, а не бок о бок
У меня возникли проблемы с расстоянием между кнопками Navbar. Я понятия не имею, почему буквы расположены друг под другом, а не рядом, я попробовал использовать встроенный блок; но это, похоже, не сработало, поэтому я уверен, что здесь что-то происходит в коде, который отключает его. sub_menu прекрасно работает с использованием inline-block, Jsfiddle Css #right_menu { position:fixed; font-size:15px; top:-80px; right:-115px; padding:70px; background-color:#FF00FF; width:-40%; ...
CSS Display inline-block issue with IE
Я столкнулся с проблемой с IE6 и IE7, и я надеялся, что у кого-то есть решение для меня, кроме того, чтобы не использовать IE6/7. Стоимость справа должна быть на той же линии, что и этикетка слева. Я могу получить это только для работы в FireFox, но в IE7, например, он помещает стоимость на строку ниже, хотя я использую встроенный блок. Yhelp был бы очень признателен Примечание: я включил бордюры, чтобы видеть, что происходит... Демонстрация моего выпуска: http://jsbin.com/ilese4/ Вот карт ...
Расположить нижний колонтитул в нижней части страницы с фиксированным заголовком
Я хочу поместить нижний колонтитул в нижней части страницы, которая также имеет фиксированный заголовок... Только не с ним position: fixed - я не хочу, чтобы он оставался на экране, он должен просто быть в конце страницы и вести себя нормально при прокрутке. Не в нижней части видимого экрана - в нижней части страницы , т. е. после всего остального контента. Вот схема, чтобы объяснить лучше: Вот код: я подготовил демо-версию: JSFiddle или смотрите ниже <div id="header" ...
Простой тест jQuery с использованием функции" toggle", не ведет себя так, как ожидалось
Я построил простой тест с помощью jQuery, чтобы увидеть, могу ли я получить элемент, чтобы показать/скрыть при нажатии кнопки. HTML-файл: <link href="test.css" rel="stylesheet" type="text/css" /> <script src="jquery.js" type="text/javascript"></script> <script src="test.js" type="text/javascript"></script> <input type="submit" id="show" value="Show content"> <div class="hidden"> Some content! </div> CSS-файл: .hidden { display: none; } ...
Как создать такой "блестящий" эффект, используя CSS градиенты?
Можно ли создать следующее, используя только CSS? Я создал контейнер и закругленные углы. Скрипка здесь . Но я не знаю, как получить легкий блестящий эффект. Можно ли это сделать в CSS? Если да, то как? Ниже приведен код, который я написал до сих пор. HTML <div id="phone-outer"> <div id="phone-inner"> </div> </div> CSS #phone-outer { margin-bottom:200px; margin:0 auto; width:400px; height:500px; background-color:#333; -web ...
Прихлоп: активное текстовое изменение цвета мякиша по
Я хочу сделать цвет текста о нас из хлебной крошки черным, но это не работает. <ol class="breadcrumb"> <li class="disabled"><a href="index.html">Home</a></li> <li class="active"><a href="#">About us</a></li> </ol> Я пытался следовать CSS, но это не сработало. .breadcrumb > .active { color: black; text-decoration: none; } Есть идеи, почему это не работает? ...
Почему translateY (-50%) необходим для центрирования элемента, который находится наверху: 50%?
Я вижу, что этот код работает для выравнивания div по вертикали внутри его родительского элемента: .element { position: relative; top: 50%; transform: translateY(-50%); } Вопрос в том, почему? Моей первой мыслью было, что родительский элемент включает в себя больше, чем видовое окно. Я сделал мой родительский видовой экран высотой 100vh и шириной 100%. Это не сработало. Мне все еще нужен был перевод или отрицательное смещение маржи. Зачем мне нужно отрицательное смещение, если родитель ...
Bootstrap 4 таблица отзывчивая, горизонтальная и вертикальная прокрутка
Я использую bootstrap таблицы с Angular 6 в проекте, и мне удалось создать вертикальную таблицу прокрутки-тело с этим кодом: <table class="table table-striped table-bordered" style="margin-bottom: 0"> <thead> <!-- Column names --> <tr> <th scope="col">#</th> <th scope="col">Col 1</th> <th scope="col">Col 2</th> <th scope="col">Col 3</th> ... <th s ...
CSS-размытое изображение / текст при резизации
Я создаю эффект парения на своем веб-сайте, где вы наводите изображения (pngs), и они увеличиваются в размере. Проблема у меня в том, что теперь они становятся размытыми, когда они изменяют размер. Код, который я использую, выглядит примерно так: .div { -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: perspective(1000px) translate3d(0,0,1px); transform: perspective(1000px) translate3d(0,0,0); } .div:hover { -webkit-transform: perspective(100px) tra ...
CSS: абсолютное позиционирование в разных браузерах
Почему это происходит с разными позициями в разных браузерах? { position: absolute; left:332px; top: 210px; width: 293px; height: 215px; border: 1px solid #000000; background-color: #143f72; -moz-border-radius: 10px; -ms-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; } В IE он идет влево, как 100px по сравнению с Firefox, а в Chrome он идет как 100px вправо по отношению к FF... Почему? Edit: html-это просто <div id ...
Как установить пользовательские шрифты из css в JavaFX?
Я добавил пользовательский шрифт в свой проект в папке src/main/resources (RobotoMono.ttf). Затем я пытаюсь загрузить его из моего css-файла следующим образом: @font-face { font-family: 'RobotoMono'; src: url('RobotoMono.ttf'); } Но когда я пытаюсь установить этот шрифт на что-то, он не работает: .column-header-label { -fx-label-padding: 0; -fx-text-overrun: clip; -fx-font-family: 'RobotoMono'; } Если я установлю шрифт на что-то, что присутствует в моей системе, я мог ...