nikki4

drop-shadow(0.2px 0.2px 0.2px white) В хроме выглядит аккуратно, придает жирности. А вот в ФФ одно накладывается на другое и все размывается. Как это привести к единому виду?

Спасибо, обнаружил следующее: Все оказалось проще, у свг высота 160, соответсвенно при уменьшении - сжимается и становится маленьким. У гифки , которую я сделал из свг - другие пропорции почему-то получились и в итоге нормально отображается. В общем надо как-то поменять пропорцию у свг

<div class="logo"> <a href="/" class="logo-link"> <img src="/logo.svg" class="logo-svg"> </a> </div> .logo { width: 250px; height:100%; } Как сделать, чтобы лого было шириной 250 и высотой 100%? т.е. во весь блок. Если выбрать GIF лого - оно само растягивается. SVG же автоматом уменьшается визуально. как я понял, надо что-то в самом свг поправить: <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1407.9 938.4" style="enable-background:new 0 0 1407.9 938.4;" xml:space="preserve"> Пробовал менять preserve на default, но не сработало Может тут что-то еще надо поменять?

Сейчас блок черный, можно ли его сделать его зеленым через css? изменять html нельзя (генерируется на стороннем сервере через скрипт) <div id="mainblock"> <block> <block> <block style="background:black !important;"></block> </block> </block> </div> #mainblock block block block { width:200px; height:200px; display:block; background: green !important; } Живой пример

Есть слайдер. Чтобы скрыть слайды, у блока lsbslider стоит overflow: hidden; У слайдера есть стрелки навигации. - .left хочу сместить стрелку левее от блока. т.е. чтобы стрелка была вот так: http://joxi.ru/BA0KBq0HMlxJq2 Вопрос как сделать ,чтобы она не пропадала. Сейчас стрелку не видно, так как у блока выше overflow:hidden <div class="lsbslider"> <a class="left" href="#" role="button"></a> </div> .lsbslider {width: 300px; position: fixed; left: 100px; height: 200px; background:coral; overflow: hidden; } .left { left:-30px; } .left { position: absolute; display: flex; width: 30px; height: 50px; background: black; } Живой пример

Задача - появление блока внизу экрана спустя определенное время. например для теста через 5 секунд, в течение 3х секунд всплытие .block { display:block; width:100%;max-height:340px; height:220px; position:fixed; background:coral; bottom: 0; max-width:900px; animation:anim 3s; animation-duration:anim 3s; -webkit-animation-delay: 5s; -moz-animation-delay: 5s; -o-animation-delay: 5s; animation-delay: 5s; } @keyframes anim { from {bottom:-100%;} to {bottom:0;} } Живой пример Если не добавлять задержку выезжает через 3 сек. если добавить - сразу появляется и задержки нет. разобрался с вопросом. Надо было изначально скрыть блок и в анимацию добавить появление: @keyframes show{ 0%{ opacity:1; } 100% { opacity:1; } from {bottom:-100%;} to {bottom:0;} }

https://codepen.io/nikki4/pen/BGLNOQ Как в указанном примере расположить слово "текст1" по длинный?

При наведении на пункт меню нужно, чтобы кружок становился так же с фоном с ссылкой: http://joxi.ru/4AkkNXoFyD0yyA пробовал вместо li a, делать структуру a li но тогда вообще пропадает кружок: http://joxi.ru/vAWNQEKc1ZB1d2 придумал способ, просто вставить span с кружком, но как ему задать стили, чтобы был по центру? когда задаю ему фонтсайз, то он поверху становится http://joxi.ru/Drl1JxocvDGKJm Придумал! top: 20px; position: relative; Но конечно это костыль. Может можно сделать чтобы к li применялся фон и цвет при наведении на li a?

Сейчас фото дивана обрезается https://mebelsort.ru/mebel-dlya-gostinoj/myagkaya-mebel-malajzii/divany-malajzii/divan-krovat-amerillo-amerillo-bezhevyj-36-34 Можно ли его целиком как-то отобразить? знаю есть для этого overflow - не срабатывает.

В исходном коде в шаблоне я прописал, чтобы было так: <div class="product-grid row"> <data data-bal="bal-elemen"></data> <div class="cols col-lg-4 col-md-4 col-sm-4 col-xs-4 zakonchilosvcat"> <div class="product zakonchilos"> Смотрю - а стиль на сайте к zakonchilosvcat не применяется. Вижу. а этого стиля попросту нет в инспекторе! Проверял в других браузерах аналогично. <div class="cols col-lg-4 col-md-4 col-sm-4 col-xs-4"> <div class="product zakonchilos"> При этом в исходном коде (ctrl-u) стиль этот есть. Я не понимаю, как это возможно, в чем дело? Пример

Слышал, что родительских селекторов верхнего уровня не существует, как тогда быть в такой ситуации: страница контактов, при наведении на адрес должна появляется картинка (карта) сверху с соответствующим адресом например при наведении на желтый, зеленый блок становился синим

У списка стоит list-style-position: inside; надо от кружочка сделать отступ. если пишу обычный паддинг к li, тогда отступ происходит не от кружка, вместе с кружком

Уменьшил размер текста в списке, а кружок по сравнению с текстом остался таким же. как и его уменьшить?

Спасибо. Но почему-то на сайте не работало. Скопировал код в кодпен - тоже не работает, но на jsfiddle работает. Не понимаю. От чего так?

Поиск на аяксе, как понимаю работаю при помощи этого файла, но я не пойму как его тестировать. пытаюсь всякие print_r, echo, die добавлять значения. Но тогда поиск перестает работать. Потому не могу выявить где хранится название и как его удалить. Подозреваю, что тут но как узнать что там... Вот думаю может как-то стилями можно. Раз нельзя удалять символами, видимо придется прятать за блоком псевдожлемента

Поставил форму поиска, там почему-то на конце после названия выводятся () Т.е. <span>Название1 ()</span> <span>Название2 ()</span> Можно ли как-то стилями скрыть все скобки в спанах, либо последние 3 символа? Если нет, то может как-то можно квадратиком фоновым на передний план поместить?

Страница: http://seositi.ru/ в мобильной версии разделы сайта должны быть во всю ширину. @media only screen and (max-width: 479px) { *** .site-categories ul li { float: left; display: table; width: 96%; margin: 0 1% 20px; padding: 10px 1%; // border-radius: 5px; height: 100px; max-height: 100px; } *** } в лисе и Яб-е, все ок. а в хроме почему-то не срабатывает @media only screen and (max-width: 479px) { и применяется прежний стиль, а именно only screen and (max-width: 991px) and (min-width: 768px) Попытался выяснить в чем дело: Полностью очистил файл responsive.css и style.css в style.css написал: body {background: red;} @media only screen and (max-width:784px) { body {background: blue;} } везде все работает - красный, при экране с заданным размером - голубой фон. стоит мне указать какое либо значение менее 784, например 783 body {background: red;} @media only screen and (max-width:783px) { body {background: blue;} } везде работает, а в хроме уже не работает и не применяется стиль Нашел решение. Оказалось в html было не прописано, прописал - стало все ок. <meta name="viewport" content="width=device-width,initial-scale=1">

да так и есть. файрбаг тоже показывает 100 высота. но мои глаза видят, что на самом деле тут пикселей больше именно в этих 2 браузерах. Делаю принскрин, вставляю в фотошоп и что видим? Вот я вижу, что браузеры увеличивают все на 20%.. но где это отключить, чтобы нормально все верстать.

Ну понятно что инспектором проверять надо, а не скринами. В то то и дело в css и инспекторе одно, а на экране другое. Я не поверил инспектору и решил проверить скринами. Вот, кстати закончил верстать ,чтобы более менее ок выглядело. https://goo.gl/K3F6AG Но на самом деле в хроме и лисе одно, а в яндексе другое. В яндексе нормальный размер, в ФФ и хроме - увеличено все примерно на 20%. Может у меня настройки браузера какие-то.. типа автоувеличение.. но жму масштаб 100%.. ничего не меняется. Но в любом случае из-за такого верстать не удобно.. может как-то отключить можно.

Открываю psd макет, беру линейку. Измеряю какой-либо элемент, например высоту шапки. Прописываю высоту в пикселях и т.д. Но все едет и кажется огромным. Делаю принтскрин, вставляю поверх psd макета, видно что высота стала гораздо больше, например шапка 400px а в принтскрине уже 500px. От чего так? Изображение браузера стоит 100%, пробовал менять браузер - всеравно крупнее на сайте, чем в макете, хотя высоту прописал точно как в макете. Проверял единицы измерения в фотошопе - все верно Может искажается при принскрине размеры? но проверил по ширине - вместо 1920 - 1900 за счетполосы прокрутки. Так что не могло прям на 100 пикселей пропасть, да и сам реально вижу, что все выглядит крупнее в браузерах. Ничего не понимаю.. ps: только что еще раз проверил в браузерах тестовый пример: яндексбраузер - ничего не увеличивает, выдает как надо хром и ФФ укрупняют на 20% или вот вставляю картинку шириной 1920px (мой экран 1920) в итоге картинка гораздо больше на экране и целиком не влезает в экран. Отправил файл с html+css У меня это отображается так: html+css: test.rar

Задача такая: есть слайдер. если включен первый слайд (первый блок owl-page с классом active), тогда все другие owl-page сделать одним цветом. Т.е. стили только для тех элементов которые идут после первого активного, так как если слайдер поменяется, то цвет изменится.

Вот наброски, пробовал с :nth-child не сработало

Всеравно что-то не понял с отступами, зато с флексом подвижки есть, однако слева откуда-то лишний отступ взялся/ да и всетаки делать фиксированно 25% каждобу блоку - так не правильно, надо чтобы маленький блок был меньше, а большой больше. (решил задачу присвоим ширину в процентов каждому пункту меню в отдельности)

Спасибо за ответ, поправил. Но не понял, что за пробелы между элементами списка? паддинги/маржины? но тогда это вручную под каждый экран нужно делать, а задача то, чтобы автоматически по ширине распределялось. пробовал ширину ставить, типа 20%. но тогда все съезжает при другом разрешении экрана, потому что для запеканки нужен больший блок, чем для других.

Сайт Нашел статью, пробовал вставить пример на сайт, но не вышло - просто обрезался край. А нужно чтобы во всю ширину меню были расположены пункты меню. Видимо какой-то из стилей перекрывает, но не понял что именно.