Все посты с меткой «Css» (0)
Css
Position:fixed и его практическое применение
20 марта 2011. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.
Сразу оговорюсь, что всё нижесказанное — сугубо личное мнение из сугубо личного опыта. Кому-то, может быть, удобней иначе.
По мере ухода со сцены IE6 появляется возможность использовать продвинутые свойства css. Position:fixed — из их числа. Фиксированное позиционирование отличается от других видов позиционирования тем, что прилепляет позиционированный блок к видимой части страницы (визуально — к окну браузера). То есть, при пролистывании страницы блок с этим свойством всегда остаётся видимым.
Казалось бы, очень интересное свойство, но на его применение нашлись ограничения: (далее…)
Графическое оформление кнопок — 2
5 декабря 2010. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.
Апдейт к оформлению кнопок.
Неудобным местом в оформлении кнопки является одинаковое имя у всех элементов форм: input
. Чтобы отличить текстовые поля от кнопок, а также флажков (чекбоксов) и переключателей (радиобаттонов), приходится снабжать их классами или придумывать обёртки (а при такой возможности проще использовать обычный графический <input type="image" />).
Однако по мере ухода со сцены IE6 появилась возможность обойтись без этих ухищрений. Теперь проблему решает селектор атрибута (иначе — селектор по атрибуту). Выглядит он так:
input[type="submit"]{ … }
Теперь оформление кнопки (на том же примере, что и в прошлый раз) будет выглядеть так:
<form action=""> <fieldset> <legend>Пример кнопки <input type="text"/> <input type="submit" value="Отправить" /> </fieldset> </form> <style type="text/css"> input[type="submit"]{ width:30px;/*Ширина картинки*/ height:21px;/*Высота картинки*/ padding:0 0 0 30px; /*Выталкивает надпись с картинки в ИЕ*/ overflow:hidden; /*Обрезает кнопку до указанных размеров*/ cursor:pointer; border:none; background:url('button.gif') no-repeat; /*Положить картинку фоном*/ color:transparent; /*Надпись на кнопке прозрачна в ФФ и Опере*/ } fieldset{ padding:50px; border:2px solid #3a5777; } </style>
И вот результат: Пример. Не работает в IE6, но понимается современными браузерами.
Как прижать футер к низу страницы (руководство к действию)
26 сентября 2010. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.
Мой любимый рецепт, которым я пользуюсь, как бы не соврать, лет пять. Абсолютно кроссбраузерный. Краткое изложение рецепта: (далее…)
Глюки и хаки: ie7 (2)
12 сентября 2010. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.
Ie7 озадачил меня новым глюком. Похоже, что он в странных отношениях со свойством min-height. На сей раз глюк вылез при обтекании картинки текстом, состоящим из абзацев — в ie7 первый абзац стоял столбом и обтекать картинку не желал:
Методом последовательного исключения обнаружилось, что глюк вызывает правило, задающее минимальную высоту абзацам:
#content p{ min-height:1.2em; }
(Зачем? Чтобы пустые строки не схлопывались. Мне не нужно, заказчику нужно).
Пришлось специально для седьмого ие сделать min-height:auto, остальное пусть будет на совести его разработчиков. Абзацы встали на место:
Старый полуслепой ИЕ6 таких фортелей не выкидывал. Он был инвалидом, но у его глюков была человеческая логика.
Универсальный селектор
11 апреля 2010. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.
6. Твой CSS начинается со строчек * {padding:0; margin:0;}
«16 признаков крутого верстальщика», Максим Покровский
Символ * в css называется универсальным селектором (universal selector). Универсальность состоит в том, что он означает любой элемент: правило, которое начинается с этого селектора, относится ко всем элементам страницы.
Какие объявления стоит и какие не стоит указывать в этом правиле? Например, полезны те, которые приведены в эпиграфе:
*{ margin:0; padding:0; }
Такое правило обнуляет поля и отступы у всех элементов на странице. Полезное правило: у элемента могут быть ненулевые дефолтовые значения, создающие в дальнейшем путаницу. Кстати, они могут быть разными у разных браузеров. (далее…)
Глюки и хаки: ie7
28 февраля 2010. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.
IE7 «порадовал» меня необъяснимым глюком. Без видимой причины вдруг пункты в нумерованном списке (ol) стали нумероваться одним и тем же первым номером. Видимой причины такого поведения не было, пришлось искать методом исключения. Причина нашлась, и выглядела она так:
li{ min-height:1.2em; }
Это правило потребовалось для Фаерфокса, который «схлопывает» пустые строки в списке (только номера друг на друга наезжают). Предполагалось, что администратор сайта имеет право делать в списке пустые пункты, значит, должны быть пустые строки. С номерами. Пустые строки появились, а седьмой ИЕ перестал нумеровать список. Пришлось написать хак специально для него, родимого:
li{ min-height:auto; }
Надо сказать, что шестой и восьмой ИЕ глюк своего собрата не разделяют. А я так и не поняла, какую связь он нашёл между высотой строки и её номером в списке.
Настройка стилей для Mozilla Firefox (3, дополнение)
13 декабря 2009. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.
Продолжение
Примеры кода, с помощью которого можно настроить под себя известные сайты. (далее…)