|
*** |
Кулинарные рецепты CSSCraig Saila, перевод Павла Филиппова Как убрать лишнее пространство вокруг формы? html cssЕсть два способа сделать это - с помощью хитрости и с помощью css. Хитрость: вставляем форму в таблицу, помещая её между открывающим и закрывающим тэгами:
Второй способ - с помощью css выставить отступы в ноль:
Почему элементы формы видны даже через перекрывающие их слои? cssЭто особенность отображения имеет место в IE и Opera под Windows и, к сожалению, ничего поделать с этим нельзя. Opera показывает все элементы формы, IE только select. Пример. Это происходит потому, что эти броузеры при отображении форм используют стандартные элементы интерфейса Windows, в то время как Netscape 6.x/Mozilla каждый раз отрисовывают их заново. Даже проблема возникает практически во всех новых броузерах при отображении плагинов и слоёв. На сайте DHTML Lab есть более подробная статья на эту тему. Thomas Brattli предлагает решение проблемы на JavaScript в своем скрипте CoolMenus. Как убрать полосу прокрутки? htmlПрежде всего, у вас должна быть действительно веская причина для этого. Отключение полосы прокрутки создает массу проблем с юзабилити и смущает пользователей. Если причина все же имеется, то достичь желаемого можно несколькими способами, но все они чрезвычайно опасны в неумелых руках. Отключить полосу прокрутки во фрейме элементарно, просто добавьте атрибут
Убрать её из основного окна несколько сложнее. Во-первых, можно открыть окно с помощью JavaScript без активирования прокрутки:
Во-вторых, в некоторых броузерах (IE под Windows пятой версии и старше, а также броузерах на базе Gecko) можно использовать нижеследующую декларацию:
Как можно контролировать размер текстового поля? html cssУвы, Netscape 4.x отображает элементы формы по иному алгоритму, нежели прочие броузеры (Internet Explorer, Opera, и на базе Gecko). Так как Netscape 4.x использует основной моноширинный шрифт для отображения текста в полях для ввода текстовой информации, а IE использует варьирующийся шрифт (обычно sans-serif) - лучше всего оптимизировать текстовое поле прежде всего для Netscape. После этого можно использовать декларацию css (которую старые версии Netscape проигнорируют) для подгонки поля под прочие броузеры. Примеры:
Могу ли я использовать выпадающее меню для навигации? ia/u gdКак и многое в веб-дизайне, целесообразность использования выпадающего меню зависит от аудитории. На обычных сайтах лучше от него отказаться. Впрочем, иногда бывает удобно собрать вместе несколько ссылок на ограниченном пространстве. Минусы использования выпадающих меню:
Еще на эту тему имеет смысл почитать Macintosh Human Interface Guidelines. Почему у картинок в таблицах появляется отступ внизу? html cssОсобенно это заметно в броузерах на базе Gecko (например, в Netscape 6.x) и некоторых версиях Mozilla. Скорее всего это происходит потому, что броузер интерпретирует <img> как строчный элемент. Проблема решается следующей декаларацией:
(подробное объяснение вы можете найти в статье "Tables, Images, and Mysterious Gaps".) После выхода Mozilla 1.0 в него был добавлен "почти стандартный" режим для исправления вышеописанной проблемы. Этот режим включается декларированием в DOCTYPE transistional HTML 4.01 (с системным идентификатором) или transistional XHTML 1.0 (на Mozilla.org есть полный список типов DOCTYPE). В старых броузерах отступ может появляться из-за пробелов между <img> и закрывающим <td>. Удалите лишние пробелы и проблема скорее всего решится. Как удалить рамку вокруг картинки-ссылки? html cssВ HTML (и старых броузерах) необходимо добавить атрибут border="0" к тэгу img. В CSS (и новых броузерах) достаточно добавить стилевую декларацию
Еще вы можете сделать рамку невидимой в Netscape 4.x с помощью css, меняя её цвет на цвет фона во внешнем блоке:
Но отступ примерно в две точки вокруг картинки все равно останется. Как установить отцентрировать таблицу с помощью CSS? cssКорректным способом установки блочных элементов (в том числе и таблиц) по центру является указание таких отступов:
или еще проще:
К сожалению, это не работает в IE версии старше 6 (да и в шестой работает странно). Чтобы справиться с этим, элементу body следует назначить атрибут text-align: center, но так как это отцентрирует весь текст на странице, то окончательный вариант будет такой:
Для подробного изучения данной проблемы рекомендуем статью "Centering Tables". Как сделать резиновую верстку с ограничением по ширине? cssПроще всего было бы использовать атрибут max-width. К несчастью, он не поддерживается большинством версий IE. Выход - в использовании атрибута width вместе с небольшим фрагментом кода на JavaScript, который будет определять ширину окна и при превышении пороговой величины зажимать её на определенном значении, иначе задавать её равной 100%.
Как задать стиль для hr? cssInternet Explorer и большая часть css-совместимых броузеров (например, на основе Gecko, Opera имеет одну странность, которую документировал Stefan M. Huber) работают с hr по-разному. Суть в том, что IE обрабатывает его как строчный элемент, а прочие - как блочный. Поэтому, для горизонтального разделителя красного цвета мы делаем: Internet Explorer: Прочие CSS-совместимые броузеры:
Тоже самое верно и для выравнивания: Internet Explorer: Прочие CSS-совместимые броузеры: Итак, достичь с помощью css того, что в html выглядит как
...вы можете следующим образом:
Для более подробной информации по этой теме читайте статью Marek Prokop "Styling <hr>". Как изменить отступ для элементов списка с помощью css? cssЕдинственного правильного пути не существует. Броузеры Gecko и Internet Explorer по-разному интерпретируют css в данном случае. Самый простой вариант для уменьшения отступа - очистить поля и отступы слева. Для увеличения же отступа можно сделать так:
или
(Те же правила применимы к ol и dl) Eric A. Meyer написал подробное объяснение по этой проблеме. Как можно добавить отступ между элементами списка? html cssЕсли элемент списка - текст, лучше всего оформить его как параграф:
В других случаях можно добавить два переноса строки в конце каждого элемента списка:
Для более аккуратного и эффективного решения проблемы следует использовать CSS, так как он не затрагивает структуру документа. Эта декларация даст тот же эффект, что и уже приведенные способы:
Внимание: установка line-height для списка приведет не только к увеличению расстояния между элементами, но добавит междустрочное расстояние для содержания каждого элемента. Почему текст в Netscape 4.* становится все меньше и меньше? html cssNetscape 4.* рассматривает следующие один за другим тэги <p> (даже корректно закрытые) как вложенные, и поэтому уменьшает размер текста. Проблема возникает оттого, что пары </p><p> в модели отображения Netscape 4.* взаимно уничтожаются. Добавьте пробел или любой другой символ между тэгами (например, так: </p> <p>) и проблема решится. Источник: http://www.webmascon.com/
| ||||||
| ||||||
Copyright © "Internet Zone", info@izcity.com |