Поиск по сайту
Результаты поиска по тегам 'css'.
Найдено 886 результатов
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script type="text/javascript" src="script's.js"></script> <style> .text-jquery { margin: 0 0 0 30px; transition: 4s; } h1 { position: relative; } </style> </head> <body> <input id="val1" type="text"><br><br> <input id="val2" type="text"><br><br> <button id="as">Посчитать!</button> <button id="lol">Сместить!</button> <button id="lik"></button> <h1>LOL</h1> </body> </html> Как мне сделать в jquery, чтобы при каждом нажатии на кнопку с id="lik" у меня h1 смещался влево на 15px?
-
Дан код: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script type="text/javascript" src="script's.js"></script> <style> input { position: relative; transition: all ease 1s; } </style> </head> <body> <input id="val1" type="text"><br><br> <input id="val2" type="text"><br><br> <button>Посчитать!</button> <button id="lol">Сместить!</button> </body> </html> И его скрипт: $('document').ready(function() { $('button').on('click', function(){ var value1, value2; value1 = $('#val1').val(); value2 = $('#val2').val(); value1 = parseInt(value1); value2 = parseInt(value2); value3 = value1 + value2; alert(value3); }); $('button#lol').on('click', function() { $('#val1, #val2').css( { border: '2px solid red', left: '50px' } ); }) }); И первая проблема: при нажатии на кнопку "Сместить!" у меня вылетает алёрт со значением "NaN", а потом работает сам скрипт. И вторая: почему в коде не работает плавное смещение вправо? В html задал параметр стиля, но плавного перехода нет. Только плавная смена цвета. Как исправить NaN и плавный переход? Если возможно, объясните поподробнее.
-
Добрый день! Подгружаю шрифты с google fonts, имя шрифта Fira Sans (и причем он у них отображается корректно), но когда я его подгружаю он выглядит так как будто избитый. Привожу 2 скриншота: 1. Как выглядит шрифт на google fonts 2. Так выглядит у меня Почему так получается? Все эти манипуляции я провожу в браузере Firefox.
-
Дан код: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { background: #e8ece7; } .menu { position: absolute; background: #b13224; border-radius: 5px; top: 90px; left: 450px; } .menu a { display: block; text-decoration: none; background: #b13224; color: white; padding: 7px; margin: 0; } .menu a:hover { background: #383838; } .menu ul { width: 958px; height: 33px; list-style: none; font-size: 0; } .menu ul li { display: inline-block; font-size: 16px; } h1 { position: absolute; top: -5px; left: 450px; display: inline-block; } h1:before { content: ''; width: 48px; height: 56px; background: url(gold-logo.jpg) no-repeat center center; background-size: 48px 56px; display: inline-block; } #polosa { position: relative; background: red; } .slider { overflow: hidden; height: 38px; padding: 4px; border: 2px solid black; position: absolute; top: 506px; left: 900px; font-size: 36px; } </style> <script> document.getElementById('slider-top').onclick = slider; var top = 0; function slider(){ var polosa = document.getElementById('polosa'); top = top - 256; if (top < -768) { top = 0; } polosa.style.top = top +'px'; } </script> </head> <body> <h1>Xman<font color="red">Bank</font></h1> <div class="menu"> <ul> <li><a href="">Home</a></li> <li><a href="">About us</a></li> <li><a href="">Our services</a></li> <li><a href="">Deposits</a></li> <li><a href="">FAQs</a></li> </ul> </div> <div class="slider"> <div id="polosa"> <li>Привет</li> <li>как</li> <li>у тебя</li> <li>дела?</li> </div> </div> <button id="slider-top">TOP</button> </body> </html> В скрипте в окне разработчика браузера ошибка: "cannot set property onclick of null". Как её решить?
-
Html не может добраться до ресурсов, где CSS файлы и картинки
lines добавил вопрос в Проблемы верстки
Здравствуйте. Моя проблема состоит в том, что изначально созданы папки css, img с соответствующими файлами и отдельно image.hml. Но когда .html файлов стало несколько, создав для этого папку и переместив в неё эти файлы , они вдруг перестали видеть .css. Помогите нубу, я только изучаю и мне стыдно. -
Мир вам! Начинающий верстальщик сделает вёрстку сайта бесплатно, по вашему psd макету, с возможностью добавить в портфолио. Знаю: html5, css3, адаптивную вёрстку, могу применять готовые скрипты на jQuery. Пишите на почту: [email protected]
-
bootstrap Как сверстать картинку, выходящую за сетку бутстрап?
incub добавил вопрос в Для начинающих
Как сверстать картинку, выходящую за сетку бутстрап? Как лучше сверстать это! -
<div class="wrap" id="post_1"> <div class="post"> <div class="post-header"> <h2 class="post-name">Заголовок</h2> </div> <div class="post-content-desc"> <p class="content-desc-p">краткое описание статьи</p> </div> <div class="post-content" style="display:none;"> <p class="content-p">полный текст статьи</p> </div> <a href="" class="content-desc-button">Подробнее..</a> </div> </div> задача, нужно при нажатии на кнопку "Подробнее" скрыть див с классом post-content-desc, и открыть див с классом post-content, при этом постов много на странице а при нажатии действия должны происходить лишь с тем постом на котором была нажата кнопка "Подробнее", может кто подсказать как решить эту задачу? или хотя бы дать пару советов (подробнее можно разглядеть все на изображении)
-
как сделать такую обводку как наскрине помогите
-
Для блока пытаюсь установить фон, при увеличении фон обрезается браузером до размера окна, но контент за его пределами имеется и остается без фона. что я делаю не так? #header{ background: url(../images/header.png) no-repeat center center fixed; background-size: cover; flex: 1 0 auto; }
-
Доброе утро! Не сочтите за спам, просто хотелось бы услышать ваше мнение о моем сайте http://proweb4all.ru/ - дизайн (цвет, шрифты, контент), юзабилити и т.д. Критика приветствуется. В разделе "обсуждение работ" был совет разместить пост сюда, если нет 30 сообщений. Флудить не хочется, а по делу написать столько и за неделю не успеть... Заранее благодарен.
-
Добрый день. Подскажите пожалуйста как правильно реализовать данное меню или список, не знаю как правильней назвать. Нужно чтобы при нажатии на город появлялся блок с информацией и загорался определенное место на карте. Если с появлением блока более менее понятно, то как позиционировать эти красные (активные) города, чтобы они не съезжали с карты на разных разрешениях. Буду благодарен ссылкам на демо и примеры. С меня кофе тому кто поможет мне найти хорошее решение =)
-
Добрый вечер , подскажите пожалуйста , как зациклить анимацию картинки , что бы она плавно увеличивалась и уменьшалась до тех пор пока не навести на неё курсор ? Есть такой код css <style type="text/css"> .hovergallery img{ -webkit-transform:scale(0.9); -moz-transform:scale(0.9); -o-transform:scale(0.9); -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; /opacity: 0.7;/ margin: 0 0px 0px 0; } .hovergallery img:hover{ -webkit-transform:scale(1.0); -moz-transform:scale(1.0); -o-transform:scale(1.0); box-shadow:0px 0px 0px gray; -webkit-box-shadow:0px 0px 0px gray; -moz-box-shadow:0px 0px 0px gray; opacity: 1; } </style> Но он работает при наведении курсора - увеличивает , курсор убираем - уменьшает . Как сделать зацикленное плавное увеличение/уменьшение до наведении курсора на картинку ? Спасибо . Вот примерно как то так.webm
-
страница отображается во всех браузерах правильно, кроме chrome: баннера перекрывают выпадающее меню что не так для chroma? вот ссылка на страницу http://centrpol.com.ua/index.html прин-скрин прикрепил: слева во всех брайзерах верно, справа в Хроме не верно
-
Доброго времени суток. Возникло пару вопросов: - Пытаюсь конвертировать png в svg через вот этот сервис https://convertio.co/ru/png-svg/ . Картинка цветная, на выходе она получается черно-белая... так и должно быть? - А как данную картинку потом вставить, если правильно, что она получается черно-белой... (хотя в принципе как правильно поставить svg) Вроде смотрела примеры, но что-то не поняла.. *первый раз пробую поставить svg Спасибо ^^
-
backgorund не стакается с верхним краем css body { background-color: #fff; margin: 0; } div.ferst{ height: 700px; width: 100%; background-position:21.5%; background:#0A0905 url(../img/IMGP4333.png)100% 100% no-repeat; } h1{ margin: 0; padding-left: 250px; padding-top: 59px; } html <!doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>Whitesquare</title> <link rel="stylesheet" href="css/style.css" type="text/css"> <link rel="stylesheet" href="wtf" type="text/css"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div class="ferst"> <h1>kek</h1> </div> </body> </html> https://yadi.sk/i/0lstBB273Jm9me болие наглядное фото
-
Всем привет. Прошу помощи в настройке модальной формы. Из трёх заработала только одна - но самая некрасивая, теперь пытаюсь её заменить, но другие две работать отказываются. 1. В общем, в меню имеется кнопка-картинка такого вида: <li><a href="#form1"><img src="call-me/callme.png" alt="Заказать звонок"></a></li> = она будет вызывать форму. Я сначала грешил именно на то, что менюшка в шапке, а код формы оказывается в теле, но нет - всё это уже тело. Хотя здесь тоже не ясно, шапка и менюшка визуально похожи..... Но об этом позже, если понадобится. 2. Дальше я пишу в тело (можно сказать в рандомное место) вот это: <!-- Модальная форма --> <a href="#x" class="overlay" id="form1"></a> <form class="modal"> <input name="name" placeholder="Укажите ваше имя:" class="name" required /> <input name="emailaddress" placeholder="Укажите ваш Email:" class="email" type="email" required /> <textarea rows="4" cols="50" name="subject" placeholder="Введите ваше сообщение:" class="message" required></textarea> <input name="submit" class="btn" type="submit" value="Отправить" /> </form> <!-- конец блока формы--> 3. Потом я прописывал в стили новый кусок (style-form.css, см. вложение), а также пробовал цеплять его к html через link rel = но ничего так и не заработало. Получается что: при нажатии кнопки ничего не выводится, лишь страница уезжает куда-то немного вниз. Прошу помощи. С чего начать, куда копать? p.s. Я совсем новичок, если что. style-form.css
-
Всем привет. Прошу помощи: Имеется вот такое меню: <div class="collapse navbar-collapse navbar-right navbar-main-collapse"> <ul class="nav navbar-nav"> <img src="img/callbacklogo.png" alt="Консультация" width="275" height="50" /> <li class="active"><a href="#intro">Главная</a></li> <li><a href="#service">Физлицам</a></li> <li><a href="#doctor">Юрлицам</a></li> <li><a href="#pricing">Стоимость услуг</a></li> <li><a href="#pricing">Контакты</a></li> - но почему-то первая картинка оказывается последней в списке меню. Как перенести её вперёд? P.S. Прошу камнями сильно не кидаться, я новичок. Если нужно что-то из CSS тоже - скину (просто пока точно не знаю, где именно нужный элемент). Спасибо. UPDATE Всё, я неожиданно сам для себя разобрался только что)
-
http://prntscr.com/fcm086 кто нибудь сталкивался с таким слайдером, подкиньте пример решения пожалуйста. В гугле не смог найти подобного слайдера.
-
Добрый день, у "Google" новая страница авторизации, очень понравилось как сделано поле ввода (при нажатии плавно подчеркивается и надпись перемещается вверх). Можете подсказать как такое реализовать?
-
При объединении gulpом css файлов, заменяет ссылки на border-image
1mp0rt добавил вопрос в Проблемы верстки
Добрый день, подскажите. до объединения css файл: shapka { border-image-source: url(img/shapka.png); } и после: shapka { border-image-source: url("../../../../src/css/img/shapka.png"); } как получить такой путь? shapka { border-image-source: url("../../src/css/img/shapka.png"); } или сделать чтобы ссылку не трогал при объединении? gulpfile.js -
СДЕЛАЮ САЙТ ПО НИЗКОЙ ЦЕНЕ. ЗНАНИЯ: HTML5, CSS, LESS, SASS, JADE, JS. ПО ВОПРОСАМ ПИСАТЬ НА ПОЧТУ [email protected] МОЙ GITHUB: https://github.com/mazay62RUS МОЙ SKYPE: amosov_01 МОЙ VK: https://vk.com/wooooooowjs
-
Здравствуйте, уважаемые. У меня возникла проблема с блоком который немного "кривой" в мобильной версии. Возможно, у вас есть версии... Не подскажите, как исправить? Страница бага: http://destonrp.ru/donate Спасибо.
-
Всем привет! Прошу помощи. Какие есть варианты по реализации? Я использовала fieldset с вложенным legend и css rotate, но думаю этот способ не очень. В итоге получилось на половину, и текст с LERN MORE добавить не получилось(второй тег legend не учитывается)
-
Контрольные точки в медиавыражениях и $(window).width() (или window.innerWidth) не совпадают?
psywalker добавил вопрос в Проблемы верстки
Всем привет! Столкнулся с проблемой, когда контрольные точки в медиавыражениях не совпадают с точками $(window).width() (или window.innerWidth). Это и правда так, или всё же я что-то не так делаю? Покажу на примерах. 1) https://codepen.io/psywalker/pen/WjJZbe - в этом примере верхний div отвечает за медиавыражения, нижний за $(window).width() (или window.innerWidth), ну а span -- это просто линейка в 600px, правый край которой и является нашей контрольной точкой (600px). Здесь всё работает отлично. Сузьте экран ровно до правого края span и увидите, как все два div станут синими (http://take.ms/ECczJ). А если жмякнуть ссылкой на span, то даже в консоли всё будет ровненько по 600px. 2) Но всё здорово ровно до того момента, пока не появляется вертикальный скролл. Сравним вариант со скроллом. https://codepen.io/psywalker/pen/jmxKxM?editors=0110. Теперь во всех браузерах (в Edge не тестил, не суть) кроме Safari сужение экрана до 600px врубает $(window).width(), а вот медиазапросы срабатывают только на 585px. Понятно, что медиазапросы учитывают скролл, который 15px. Но разночтение с $(window).width() уже очень расстраивает. А вот в Safari всё срабатывает так же, как без скролла, то есть ровненько на 600px (http://take.ms/f81ta). Следовательно, помимо разночтения при скролле мы ещё имеем разночтения в браузерах (Safari vs остальных). 3) Ок, попробуем поменять $(window).width() на window.innerWidth. https://codepen.io/psywalker/pen/wdjXNM?editors=0110. Теперь во всех браузерах (в Edge не тестил, не суть) кроме Safari медиазапросы и window.innerWidth срабатывают в одной точке - 585px, а вот в Safari медиазапросы срабатывают на 600px, а вот window.innerWidth на 585px. Итог: Получается, что в данном случае нет единого мнения среди браузеров, и у нас нет возможности контролировать медиазапросы вместе с $(window).width() (или window.innerWidth). Или я ошибаюсь? И какие вы видите решения данной проблемы?
