Кулинарные рецепты CSS
Информация - Компьютеры, программирование
Другие материалы по предмету Компьютеры, программирование
Кулинарные рецепты CSS
Craig Saila
Как убрать лишнее пространство вокруг формы? html css
Есть два способа сделать это - с помощью хитрости и с помощью css. Хитрость: вставляем форму в таблицу, помещая её между открывающим и закрывающим тэгами:
Второй способ - с помощью css выставить отступы в ноль:
Почему элементы формы видны даже через перекрывающие их слои? css
Это особенность отображения имеет место в IE и Opera под Windows и, к сожалению, ничего поделать с этим нельзя.
Opera показывает все элементы формы, IE только select. Пример.
Это происходит потому, что эти броузеры при отображении форм используют стандартные элементы интерфейса Windows, в то время как Netscape 6.x/Mozilla каждый раз отрисовывают их заново.
Даже проблема возникает практически во всех новых броузерах при отображении плагинов и слоёв.
На сайте DHTML Lab есть более подробная статья на эту тему. Thomas Brattli предлагает решение проблемы на JavaScript в своем скрипте CoolMenus.
Как убрать полосу прокрутки? html
Прежде всего, у вас должна быть действительно веская причина для этого. Отключение полосы прокрутки создает массу проблем с юзабилити и смущает пользователей. Если причина все же имеется, то достичь желаемого можно несколькими способами, но все они чрезвычайно опасны в неумелых руках.
Отключить полосу прокрутки во фрейме элементарно, просто добавьте атрибут
scrolling="no"
Убрать её из основного окна несколько сложнее. Во-первых, можно открыть окно с помощью JavaScript без активирования прокрутки:
window.open(this.href,newWindow,scrollbars=no);
Во-вторых, в некоторых броузерах (IE под Windows пятой версии и старше, а также броузерах на базе Gecko) можно использовать нижеследующую декларацию:
HTML, BODY { style="overflow: hidden; }
Как можно контролировать размер текстового поля? html css
Увы, Netscape 4.x отображает элементы формы по иному алгоритму, нежели прочие броузеры (Internet Explorer, Opera, и на базе Gecko).
Так как Netscape 4.x использует основной моноширинный шрифт для отображения текста в полях для ввода текстовой информации, а IE использует варьирующийся шрифт (обычно sans-serif) - лучше всего оптимизировать текстовое поле прежде всего для Netscape.
После этого можно использовать декларацию css (которую старые версии Netscape проигнорируют) для подгонки поля под прочие броузеры.
Примеры:
Обычное поле для ввода в Netscape 4.7: Могу ли я использовать выпадающее меню для навигации? ia/u gd
Как и многое в веб-дизайне, целесообразность использования выпадающего меню зависит от аудитории. На обычных сайтах лучше от него отказаться. Впрочем, иногда бывает удобно собрать вместе несколько ссылок на ограниченном пространстве.
Минусы использования выпадающих меню:
длинный текст делает меню чрезмерно широким
трудности доступа к опциям в текстовых и речевых броузерах
невозможно увидеть сразу все доступные варианты
некоторые пользователи не догадываются о наличии скрытых опций
оперирование выпадающими меню может представлять трудности для некоторых пользователей ("Я не понял, что надо нажать перейти")
различный внешний вид в различных броузерах
требует небольшого, но все же программирования (на стороне клиента или сервера)
Еще на эту тему имеет смысл почитать Macintosh Human Interface Guidelines.
Почему у картинок в таблицах появляется отступ внизу? html css
Особенно это заметно в броузерах на базе Gecko (например, в Netscape 6.x) и некоторых версиях Mozilla. Скорее всего это происходит потому, что броузер интерпретирует как строчный элемент. Проблема решается следующей декаларацией:
TD>IMG { display: block; }
(подробное объяснение вы можете найти в статье "Tables, Images, and Mysterious Gaps".)
После выхода Mozilla 1.0 в него был добавлен "почти стандартный" режим для исправления вышеописанной проблемы. Этот режим включается декларированием в DOCTYPE transistional HTML 4.01 (с системным идентификатором) или transistional XHTML 1.0 (на Mozilla.org есть полный список типов DOCTYPE).
В старых броузерах отступ может появляться из-за пробелов между . Удалите лишние пробелы и проблема скорее всего решится.
Как удалить рамку вокруг картинки-ссылки? html css
В HTML (и старых броузерах) необходимо добавить атрибут border="0" к тэгу img.
В CSS (и новых броузерах) достаточно добавить стилевую декларацию
A IMG { border: none; }
Еще вы можете сделать рамку невидимой в Netscape 4.x с помощью css, меняя её цвет на цвет фона во внешнем блоке:
A IMG { border: none; border-color: [цвет фона]; color: [цвет фона] }
Но отступ примерно в две точки вокруг картинки все равно останется.
Как установить отцентрировать таблицу с помощью CSS? css
Корректным способом установки блочных элементов (в том числе и таблиц) по центру является указание таких отступов:
margin-left: auto; margin-right: auto;
или еще проще:
margin: auto;
К сожалению, это не работает в IE версии старше 6 (да и в шестой работает странно). Чтобы справиться с этим, элементу body следует назначить атрибут text-align: center, но так как это отцентрирует весь текст на стра?/p>