Очень просто. В таблице стилей пропи?ите для input и textarea следущее
input,
textarea {
outline:none;
}
Когда это может понадобиться? Дизайнеры любят перерисовывать системные контролы под дизайн, например такой красивый input, который должен тянуться на всю предоставляемую ему ?ирину
А теперь поместим курсор в поле ввода.
Пример из сделанной недавно верстки
Выглядит немного неаккуратно, неправда ли?
Это же свойство можно использовать, если надо избавиться от рамки вокруг ссылок при фокусе на них. Чтобы, например, не портить «красоту» меню.
Хотя убирать outline и неправильно. При навигации по сайту с помощью только клавиатуры эта рамочка помогает понять, на каком элементе сейчас фокус.
Кликните поочередно на ссылки или используйте клави?у TAB, чтобы навести фокус на них:
обводка есть / обводка убрана
Есть у ?Е6 такая особенность: если какому-либо блоку задать ?ирину, то ?Е6 воспринимает эту ?ирину, как минимально возможную и, если содержимое блока оказывается ?ире заданной ?ирины, то ?Е6 растягивает блок до размеров содержимого. Тогда как другие браузеры, в полном соответствии стандартам сохранят указанную ?ирину, а содержимое просто покажут выступающим за пределы блока (если не указано свойство overflow, отличное от значения visible (значение по умолчанию)).
Читать запись полностью »
Метки: верстка, азы css, азы верстки
Написано в CSS | 1 комментарий »
8 апреля 2009
Забавно, что поводы для написательства мне дает студия Лебедева: выходом в свет нового сайта, или же, как в это раз, новым рецептом в Техногрете.
Что же мне не понравилось в это раз? Ну, ни то, что не понравилось, но все же.
Приводится способ выравнивания блоков с картинками по центру родительского контейнера. Что ж, хоро?ий способ применения нечасто используемого свойства inline-block. Но…
Так это выглядит в браузере 
Рецепт основан на двойственной природе элемента INS. Как известно элементы INS и DEL могут быть как блочными (display: block), так и строчными (display: inline). При этом, будучи строчными, они могут быть контейнерами для блочных элементов, таких как DIV или P. Впервые подобный трюк я увидел около двух лет назад у Stuart Nicholls. Там была необходимость расположить по центру меню из табов при произвольной общей ?ирине меню. К сожалению, это пример был пересмотрен 24 января этого года)). Я сам использовал этот прием на своей народовской страничке (не смеяться!!!). Что забавно, в новом способе центрирования меню использован метод, который я впервые увидел у Лебедева. Но вернемся к на?им баранам.
Читать запись полностью »
Метки: верстка
Написано в CSS | 5 комментариев »
7 апреля 2009
Боремся с отсутствием со стороны Файрфокса 2 поддержки простого, но нужного свойства inline-block
Так случилось, что ФФ2 не поддерживает для свойства display значения inline-block. Взамен него в ФФ2 есть несколько нестандартных CSS-свойств, в частности -moz-inline-stack. ?з того, что я знаю, это свойство луч?е других подходит для повторения поведения, подобного inline-block. Но при его использовании надо учитывать несколько странностей. Для демонстрации этих странностей CSS-свойства буду прописывать инлайн, а для просмотра этих странностей вам понадобится браузер Файрфокс 2.
Читать запись полностью »
Написано в CSS | 7 комментариев »
1 апреля 2009
- inline-block
- При этом значении свойства
display элемент ведет себя как обычный строчный элемент (не вызывая перевода строки до и после себя, в отличие от блочных элементов), но при этом содержимое этого элемента форматируется как внутри элемента блочного. Элементу же можно будет задать свойства width и height, что невозможно для элементов строчных
Проще, чем долго и путано объяснять, показать на примерах. Для наглядности подкрасим на?и элементы и зададим им размеры и отступы
-
блочный элемент
еще блочный элемент
Как видите, каждый новый элемент располагается ниже следущего, даже если рядом с предыдущим есть место
- элемент со свойством
display: inline-block элемент со свойством inline-block элемент со свойством inline-block и vertical-align: middle, в отличие от предыдущих с выравниванием по базовой строке — эти элементы находятся на одной строке, но при этом «слу?аются» свойств width и height и контент внутри них ведет себя как и в обычном блочном элементе. ? они не теряют свойства строчных элементов выравниваться по высоте строки. Еще интересно, что переносятся эти элементы на новую строку целиком, в отличие от строчных элементов, которые «рвутся», если не помещаются на одной строке.
- элемент со свойством
display: inline еще строчный элемент — эти элементы простые строчные, и им не удастся задать размеры. ? попытка вызвать перевод строки внутри элемента с помощью BR приведет именно к переводу строки. элемент со свойством display: inline
и BR‘ом внутри
Написано в CSS | 1 комментарий »
