Кулинарные рецепты CSS
СОДЕРЖАНИЕ: Как убрать лишнее пространство вокруг формы. Почему элементы формы видны даже через перекрывающие их слои. Как убрать полосу прокрутки.Кулинарные рецепты CSS
CraigSaila
Как убрать лишнее пространство вокруг формы? htmlcss
Есть два способа сделать это - с помощью хитрости и с помощью css. Хитрость: вставляем форму в таблицу, помещая её между открывающим и закрывающим тэгами:
table
form
tr.../tr
/form
Второй способ - с помощью css выставить отступы в ноль:
form style=margin-top: 0; margin-bottom: 0;
Почему элементы формы видны даже через перекрывающие их слои? css
Это особенность отображения имеет место в IE и Opera под Windows и, к сожалению, ничего поделать с этим нельзя.
Opera показывает все элементы формы, IE только select. Пример.
Это происходит потому, что эти броузеры при отображении форм используют стандартные элементы интерфейса Windows, в то время как Netscape 6.x/Mozilla каждый раз отрисовывают их заново.
Даже проблема возникает практически во всех новых броузерах при отображении плагинов и слоёв.
На сайте DHTMLLab есть более подробная статья на эту тему. ThomasBrattli предлагает решение проблемы на JavaScript в своем скрипте CoolMenus.
Как убрать полосу прокрутки? html
Прежде всего, у вас должна быть действительно веская причина для этого. Отключение полосы прокрутки создает массу проблем с юзабилити и смущает пользователей. Если причина все же имеется, то достичь желаемого можно несколькими способами, но все они чрезвычайно опасны в неумелых руках.
Отключить полосу прокрутки во фрейме элементарно, просто добавьте атрибут
scrolling=no
Убрать её из основного окна несколько сложнее. Во-первых, можно открыть окно с помощью JavaScript без активирования прокрутки:
window.open(this.href,newWindow,scrollbars=no);
Во-вторых, в некоторых броузерах (IE под Windows пятой версии и старше, а также броузерах на базе Gecko) можно использовать нижеследующую декларацию:
HTML, BODY { style=overflow: hidden; }
Как можно контролировать размер текстового поля? htmlcss
Увы, Netscape 4.x отображает элементы формы по иному алгоритму, нежели прочие броузеры (InternetExplorer, Opera, и на базе Gecko).
Так как Netscape 4.x использует основной моноширинный шрифт для отображения текста в полях для ввода текстовой информации, а IE использует варьирующийся шрифт (обычно sans-serif) - лучше всего оптимизировать текстовое поле прежде всего для Netscape.
После этого можно использовать декларацию css (которую старые версии Netscape проигнорируют) для подгонки поля под прочие броузеры.
Примеры:
 |
Обычноеполедлявводав Netscape 4.7:input type=text value=netscape size=8 |
 |
Поле для ввода в IE 5.5, подогнанное под размер поля в Netscape (отступы добавлены для вертикального выравнивания текста)input type=text value=ie size=8 style=width: 90px; height: 27px; padding-top: 3px; |
 |
Поле для ввода в IE 5.5, подогнанное под размер и внешний вид поля в Netscape (имитация достигается за счет рамки и шрифта)input type=text value=ie size=8 style=font: 16px courier new; width: 90px; height: 27px; border: 3px inset #DDD; |
Могу ли я использовать выпадающее меню для навигации? ia/ugd
Как и многое в веб-дизайне, целесообразность использования выпадающего меню зависит от аудитории. На обычных сайтах лучше от него отказаться. Впрочем, иногда бывает удобно собрать вместе несколько ссылок на ограниченном пространстве.
Минусы использования выпадающих меню:
длинный текст делает меню чрезмерно широким
трудности доступа к опциям в текстовых и речевых броузерах
невозможно увидеть сразу все доступные варианты
некоторые пользователи не догадываются о наличии скрытых опций
оперирование выпадающими меню может представлять трудности для некоторых пользователей (Я не понял, что надо нажать перейти)
различный внешний вид в различных броузерах
требует небольшого, но все же программирования (на стороне клиента или сервера)
Еще на эту тему имеет смысл почитать MacintoshHumanInterfaceGuidelines.
Почему у картинок в таблицах появляется отступ внизу? htmlcss
Особенно это заметно в броузерах на базе Gecko (например, в Netscape 6.x) и некоторых версиях Mozilla. Скорее всего это происходит потому, что броузер интерпретирует img как строчный элемент. Проблема решается следующей декаларацией:
TDIMG { display: block; }
(подробное объяснение вы можете найти в статье Tables, Images, andMysteriousGaps.)
После выхода Mozilla 1.0 в него был добавлен почти стандартный режим для исправления вышеописанной проблемы. Этот режим включается декларированием в DOCTYPEtransistionalHTML 4.01 (с системным идентификатором) или transistionalXHTML 1.0 (на Mozilla.org есть полный список типов DOCTYPE).
В старых броузерах отступ может появляться из-за пробелов между img и закрывающим td. Удалите лишние пробелы и проблема скорее всего решится.
Как удалить рамку вокруг картинки-ссылки? htmlcss
В HTML (и старых броузерах) необходимо добавить атрибут border=0 к тэгу img.
В CSS (и новых броузерах) достаточно добавить стилевую декларацию
AIMG { 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, но так как это отцентрирует весь текст на странице, то окончательный вариант будет такой:
body { text-align: center; }
#centerItem { text-align: left; margin: auto; }
Для подробного изучения данной проблемы рекомендуем статью CenteringTables.
Как сделать резиновую верстку с ограничением по ширине? css
Проще всего было бы использовать атрибут max-width. К несчастью, он не поддерживается большинством версий IE.
Выход - в использовании атрибута width вместе с небольшим фрагментом кода на JavaScript, который будет определять ширину окна и при превышении пороговой величины зажимать её на определенном значении, иначе задавать её равной 100%.
function resizeBox(){
sObj = d.getElementById(container).style
if(d.body.clientWidth) (d.body.clientWidth800) ? sObj.width = 800px : sObj.width = 100%
}
Пример.
Как задать стиль для hr? css
InternetExplorer и большая часть css-совместимых броузеров (например, на основе Gecko, Opera имеет одну странность, которую документировал StefanM. Huber) работают с hr по-разному. Суть в том, что IE обрабатывает его как строчный элемент, а прочие - как блочный. Поэтому, для горизонтального разделителя красного цвета мы делаем:
InternetExplorer:
HR { color: #F00; }
Прочие CSS-совместимые броузеры: HR { background-color: #F00; }
Тоже самое верно и для выравнивания:
Internet Explorer:
HR { text-align: right; }
Прочие CSS-совместимые броузеры:
HR { margin-right: 0; }
Итак, достичь с помощью css того, что в html выглядит как
hr align=right width=30% size=2 color=#000F00 noshade
...вы можете следующим образом:
HR { text-align: right; width: 30%; height: 2px; color: #F00; border: none; } /* Для IE */
HTMLBODY HR { margin-right: 0; width: 30%; height: 2px; background-color: #F00; border: none; } /* Для броузеров на базе Gecko */
HTMLBODY HR { margin-right: 0; width: 30%; height: 2px; background-color: #F00; border: 0px solid #F00; } /* Для Оперы и броузеров на базе Gecko */
Для более подробной информации по этой теме читайте статью MarekProkop Styling hr.
Как изменить отступ для элементов списка с помощью css? css
Единственного правильного пути не существует. Броузеры Gecko и InternetExplorer по-разному интерпретируют css в данном случае. Самый простой вариант для уменьшения отступа - очистить поля и отступы слева. Для увеличения же отступа можно сделать так:
ul { margin-left: 0; padding-left: 20px; }
или
ul { margin-left: 20px; padding-left: 0; }
(Те же правила применимы к ol и dl)
EricA. Meyer написал подробное объяснение по этой проблеме.
Как можно добавить отступ между элементами списка? htmlcss
Если элемент списка - текст, лучше всего оформить его как параграф:
lipa list item/p/li
В других случаях можно добавить два переноса строки в конце каждого элемента списка:
lia list itembrbr/li
Для более аккуратного и эффективного решения проблемы следует использовать CSS, так как он не затрагивает структуру документа. Эта декларация даст тот же эффект, что и уже приведенные способы:
li { margin-top: 1em; }
Внимание: установка line-height для списка приведет не только к увеличению расстояния между элементами, но добавит междустрочное расстояние для содержания каждого элемента.
Почему текст в Netscape 4.* становится все меньше и меньше? htmlcss
Netscape 4.* рассматривает следующие один за другим тэги p (даже корректно закрытые) как вложенные, и поэтому уменьшает размер текста.
Проблема возникает оттого, что пары /pp в модели отображения Netscape 4.* взаимно уничтожаются. Добавьте пробел или любой другой символ между тэгами (например, так: /p p) и проблема решится.