Рубрика: Рабочие заметки
Профессиональные заметки верстальщика. Советы и байки из реальной жизни. Премудрости html и css и самая малость о web-дизайне.
5 декабря 2010. Рубрики: Рабочие заметки; автор — Княгиня.
Апдейт к оформлению кнопок.
Неудобным местом в оформлении кнопки является одинаковое имя у всех элементов форм: 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. Рубрики: Рабочие заметки; автор — Княгиня.
Мой любимый рецепт, которым я пользуюсь, как бы не соврать, лет пять. Абсолютно кроссбраузерный. Краткое изложение рецепта: (далее…)
12 сентября 2010. Рубрики: Рабочие заметки; автор — Княгиня.
Ie7 озадачил меня новым глюком. Похоже, что он в странных отношениях со свойством min-height. На сей раз глюк вылез при обтекании картинки текстом, состоящим из абзацев — в ie7 первый абзац стоял столбом и обтекать картинку не желал:
Методом последовательного исключения обнаружилось, что глюк вызывает правило, задающее минимальную высоту абзацам:
#content p{
min-height:1.2em;
}
(Зачем? Чтобы пустые строки не схлопывались. Мне не нужно, заказчику нужно).
Пришлось специально для седьмого ие сделать min-height:auto, остальное пусть будет на совести его разработчиков. Абзацы встали на место:
Старый полуслепой ИЕ6 таких фортелей не выкидывал. Он был инвалидом, но у его глюков была человеческая логика.
11 апреля 2010. Рубрики: Рабочие заметки; автор — Княгиня.
6. Твой CSS начинается со строчек * {padding:0; margin:0;}
«16 признаков крутого верстальщика», Максим Покровский
Символ * в css называется универсальным селектором (universal selector). Универсальность состоит в том, что он означает любой элемент: правило, которое начинается с этого селектора, относится ко всем элементам страницы.
Какие объявления стоит и какие не стоит указывать в этом правиле? Например, полезны те, которые приведены в эпиграфе:
*{
margin:0;
padding:0;
}
Такое правило обнуляет поля и отступы у всех элементов на странице. Полезное правило: у элемента могут быть ненулевые дефолтовые значения, создающие в дальнейшем путаницу. Кстати, они могут быть разными у разных браузеров. (далее…)
28 февраля 2010. Рубрики: Рабочие заметки; автор — Княгиня.
IE7 «порадовал» меня необъяснимым глюком. Без видимой причины вдруг пункты в нумерованном списке (ol) стали нумероваться одним и тем же первым номером. Видимой причины такого поведения не было, пришлось искать методом исключения. Причина нашлась, и выглядела она так:
li{
min-height:1.2em;
}
Это правило потребовалось для Фаерфокса, который «схлопывает» пустые строки в списке (только номера друг на друга наезжают). Предполагалось, что администратор сайта имеет право делать в списке пустые пункты, значит, должны быть пустые строки. С номерами. Пустые строки появились, а седьмой ИЕ перестал нумеровать список. Пришлось написать хак специально для него, родимого:
li{
min-height:auto;
}
Надо сказать, что шестой и восьмой ИЕ глюк своего собрата не разделяют. А я так и не поняла, какую связь он нашёл между высотой строки и её номером в списке.
13 декабря 2009. Рубрики: Рабочие заметки; автор — Княгиня.
Продолжение
Примеры кода, с помощью которого можно настроить под себя известные сайты. (далее…)
6 декабря 2009. Рубрики: Рабочие заметки; автор — Княгиня.
Продолжение
Индивидуальные настройки Фаерфокса позволяют изменить «под себя» внешний вид часто посещаемых сайтов — разумеется, в сторону улучшения и удобства пользования. (далее…)
29 ноября 2009. Рубрики: Рабочие заметки; автор — Княгиня.
Итак, что можно сделать собственными стилями браузера Фаерфоркс? Поскольку Фаерфокс понимает селекторы атрибутов, сделать можно много. Например. (далее…)
22 ноября 2009. Рубрики: Интернет, Рабочие заметки; автор — Княгиня.
Немного о настройках браузера Фаерфокс (Mozilla Firefox). О том, как подключить пользовательские скрипты к браузеру Мозилла Фаерфокс я писала, теперь о подключении к нему же пользовательских стилей.
Что можно сделать пользовательскими стилями? Например:
- Настроить отображение содержания сайтов, в том числе убрать рекламные баннеры.
- Настроить под себя внешний вид часто посещаемых сайтов.
Настроить вид самого Фаерфокса.
Собственные стили Фаерфокса находятся в файлах chrome/userContent.css и chrome/userChrome.css. Папка chrome располагается в профиле браузера (по умолчанию для Windows XP это /Documents and Settings/Имя_пользователя/Application Data/Mozilla/Firefox/Profiles/Название_профиля). В папке обычно находятся файлы userChrome-example.css и userContent-example.css, которые можно переименовать и использовать для создания своих стилей. Первый предназначен для работы с оформлением браузера, а второй — для стилей сайтов.
Иногда можно встретить рекомендацию размещать пользовательские стили в файлы /Program Files/Mozilla Firefox/res/*.css, но лучше этого не делать: при обновлении браузера эти файлы перезаписываются, и всё персональные настройки пропадают.
Правила css, добавленные в chrome/userContent.css и chrome/userChrome.css, вступают в силу после перезагрузки браузера.
Продолжение
25 октября 2009. Рубрики: Рабочие заметки; автор — Княгиня.
Небольшая шпаргалка, как оформить кнопку в виде картинки. Вообще-то для этого есть <input type="image" />, но бывает, что код кнопки находится в недоступном для редактирования файле. И тогда в ход идёт ловкость рук и css. (далее…)
|
