» Вопросы по CSS

Цитата:

не вижу таких проблем в IE7

а у меня они есть
выкладываю видео

anutti


Цитата:

но если вставить туда поля формы то они не видны

На вскидку (если еще актуально )... попробуйте форме задать:
position:absolute;
z-index:1000; #или меньше, если позволят уровни предыдущих слоев

Кто может подсказать, как в CSS сделать границу того же блока картинкой, сверху и снизу? Просмотрел разные сайты, но везде в основном не то, что нужно. Для примера, как здесь, в виде гребёнки.

WONDROUS
вставляете 2 дива с абсолютным позиционированием и нужным вам фоном.
один размещаете внизу, другой вверху.
можно только один, для второй границы использовать оригинальный див.

ps: пример - http://jsfiddle.net/x2b0m63u/1/


Код: #centerblock {
position: relative;
}

div.border-top, div.border-bottom {
position: absolute;
height: 10px;
left: 0px;
right: 0px;
}

div.border-top {
top: 0px;
background: url(http://oi58.tinypic.com/2d6sf8j.jpg);
}

div.border-bottom {
bottom: 0px;
background: url(http://oi61.tinypic.com/rc1rhc.jpg);
}

WONDROUS


Код:
<div class="block">
<div class="bg-top">
<div class="bg-bottom">
Текст
</div>
</div>
</div>

на градиентах http://habrahabr.ru/post/176591/

Mavrikii
OLEX
Спасибо за ответ! Попробовал оба варианта, правда, немного на другом файле, но всё равно, в обоих вариантах получается отступ. Данная ширина отступа из кода Mavrikii.

А если здесь убрать padding, то этого бордюрчика вообще не видно:

Код: .bg-bottom {background: url(http://i.imgur.com/Y2yllgy.png) bottom repeat-x; padding: 30px 15px;}

Вроде получилось кое-как. В html выглядит таким образом, нижний бордюр-картинку в самый низ вставил (ecFadeBottom1), после текста.

Почему-то в Firefox не работает этот код, в остальных браузерах работает.

Код: border: 3px dotted;

WONDROUS
все работает - https://jsfiddle.net/kv3yeo7o/

WONDROUS
у меня работает: http://i.imgur.com/WZiflfw.png

Живой пример - http://jsfiddle.net/olex/gffecq2q/

Mavrikii
OLEX
В версии 24.8.0, не знаю, как в последних версиях, показывается так. Может, не так что делаю? Вот так в Сафари.

Добавлено:
Хотя для квадрата стиль работает, хоть пунктиром, хоть точками.

WONDROUS

Цитата:

В версии 24.8.0

https://bugzilla.mozilla.org/show_bug.cgi?id=382721

Mavrikii
Спасибо за ссылку. Насколько понял по последнему сообщению на той странице, ни в одном из последующих обновлений они так и не исправили данный баг.

WONDROUS
а чего ж 24, если уже 37 ??

OLEX
Версия 24 ESR устраивает, если в ней что-то косячит, то и в 37й версии часто то же самое. Да и новый интерфейс/тема не нравится, хоть и можно её настроить с помощью расширения.

Я так понимаю, что лучше стили для круглых картинок не делать вообще? или не обращать внимание на пользователей Фокса?

Цитата:

не обращать внимание на пользователей Фокса

ну это процентов 20 юзверей

Добавлено:
15% - http://gs.statcounter.com/#browser-RU-monthly-201501-201505-bar

Добавлено:
И тенденция к уменьшению

приветствую,
есть пара вопросов - ваяю сайтик вот на этом шаблона
вылазит пара косяков со стилями, один в демо очень хорошо виден.
При выборе альтернативной темы - оранжевой или синей - меню shop-template blue - template orange -
не фиксируется панель навигации при скролле. При дефолтной красной теме, либо зеленой - все норм.
Не могу найти, где это спрятано, использую синюю тему, ну и надо устранить.
Второй косяк при простом рассмотрении не виден - связан с респонсивной версткой.
При просмотре ряда планшетных размеров экрана (можно просто уменьшить окно браузера, или использовать сервисы типа http://quirktools.com/screenfly/) - ряд стилей в альтернативных темах заменяются на дефоолтные.
Точнее могу сказать, что в слайдере на главной странице наблюдается такое при просмотре в режимах (на примере http://quirktools.com/screenfly) начиная от google nexus 7 - 603x966 - до Kinde fire hd7 - 533x853
все размеры что больше или меньше отображаются корректно.
Понимаю так, что где-то в стилях для данных @media не правильно прописаны или не прописаны вовсе, и потому заменяются на дефолт, опять же, пока не могу отловить, где конкретною...

Кто может подсказать, как правильно прописать фиксацию верхнего блока с меню? Вопрос в том, что блоки, идущие ниже и у которых задан отступ (padding), отступают не от этого верхнего блока, а от верха страницы.

WONDROUS

Цитата:

Кто может подсказать, как правильно прописать фиксацию верхнего блока с меню? Вопрос в том, что блоки, идущие ниже и у которых задан отступ (padding), отступают не от этого верхнего блока, а от верха страницы.

нужно показывать что есть и что хочется.

Weinaum

Цитата:

Не могу найти, где это спрятано, использую синюю тему, ну и надо устранить.

Цитата:

div#head-row.nofixed #t3-mainnav {
position: relative !important;
}

строка 2706 в template.css убивает position:fixed;

Mavrikii
Ссылка на архив. В меню одна кнопка, ведущая вниз страницы, так вот у того блока отступ не от меню, а от верха страницы. Не пойму, как сделать, чтобы от зафиксированного блока с меню отступ был.

WONDROUS
я все равно не могу понять чего вы хотите добиться. на пальцах объясните.
от зафиксированного отступ никак не может быть, потому что при position:fixed элемент становится прямым потомком body (точнее становится полностью независимым) и остальные не могут падиться от него.

Mavrikii
Понятно тогда. Это и надо было, чтобы отступ (padding) был от зафиксированного верхнего блока с меню.

Mavrikii
спасибо, нашел

Цитата:

div#head-row.nofixed #t3-mainnav {
position: relative !important;
}

вопрос чисто теоретический: есть ли вообще возможность в css отменить стиль в оверрайд-файле?
Т.е. переписать его нет проблем, но например в данном конкретном случае если я напишу position:fixed -
то получу совсем не то, что требуется. Т.е. данное правило нужно закомментировать или удалить.
Как бы сейчас я сделал это в исходном css, но дело в том, что при обновлении шаблона все возвращается...
поэтому по возможности стараюсь все изменения вностить в новый файл, чтобы потом по новай не ковырять кучу уже переписаных стилей..

Weinaum
http://stackoverflow.com/questions/11178673/how-to-override-important

Mavrikii
спасибо

А вот еще один непонятный момент:
есть шаблон лендинга - вот его демо
При просмотре в chrome ряд h2 получают italic стиль шрифта, тогда как в firefox все ровно - вижу в хроме такое:

Код: injected stylesheet
h2 {
font-style: italic;
}

Weinaum

Цитата:

вижу в хроме такое:

у меня нет, видимо какая то примочка к браузеру у вас такое делает.

Mavrikii
Да, действительно, ложная тревога, сорри - на 2 браузерах на разных машинах одинаковое дополнение, нашел и обезвредил )

Weinaum

Цитата:

разных машинах одинаковое дополнение

фраза
Цитата:

injected stylesheet

об этом и говорит, что что то встроило свой стиль в браузер.