Кулинарные рецепты CSS

Как убрать лишнее пространство вокруг формы? 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:
	Поле для ввода в IE 5.5, подогнанное под размер поля в Netscape (отступы добавлены для вертикального выравнивания текста)
	Поле для ввода в IE 5.5, подогнанное под размер и внешний вид поля в Netscape (имитация достигается за счет рамки и шрифта)

Могу ли я использовать выпадающее меню для навигации? 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, но так как это отцентрирует весь  текст на странице, то окончательный вариант будет такой:

body { text-align: center; }
  #centerItem { text-align: left; margin: auto; }

Для подробного изучения данной проблемы рекомендуем статью "Centering Tables".

Как сделать резиновую верстку с ограничением по ширине? css

Проще всего было бы использовать атрибут max-width. К несчастью, он не поддерживается большинством версий IE.

Выход - в использовании атрибута width вместе с небольшим  фрагментом кода на JavaScript, который будет определять ширину окна и  при превышении пороговой величины зажимать её на определенном значении,  иначе задавать её равной 100%.

function resizeBox(){
  sObj = d.getElementById("container").style
  if(d.body.clientWidth) (d.body.clientWidth>800) ? sObj.width = "800px" : sObj.width = "100%"
  }

Пример.

Как задать стиль для hr? css

Internet Explorer и большая часть css-совместимых броузеров  (например, на основе Gecko, Opera имеет одну странность, которую  документировал Stefan M. Huber) работают с hr по-разному. Суть в том,  что IE обрабатывает его как строчный элемент, а прочие - как блочный.  Поэтому, для горизонтального разделителя красного цвета мы делаем:

Internet Explorer:
  HR { color: #F00; }

Прочие CSS-совместимые броузеры: HR { background-color: #F00; }

Тоже самое верно и для выравнивания:

Internet Explorer:
  HR { text-align: right; }

Прочие CSS-совместимые броузеры:
  HR { margin-right: 0; }

Итак, достичь с помощью css того, что в html выглядит как

...вы можете следующим образом:

HR { text-align: right; width: 30%; height: 2px; color: #F00; border: none; } /* Для IE */

HTML>BODY HR { margin-right: 0; width: 30%; height: 2px;  background-color: #F00; border: none; } /* Для броузеров на базе Gecko  */

HTML>BODY HR { margin-right: 0; width: 30%; height: 2px;  background-color: #F00; border: 0px solid #F00; } /* Для Оперы и  броузеров на базе Gecko */

Как изменить отступ для элементов списка с помощью css? css

Единственного правильного пути не существует. Броузеры Gecko и  Internet Explorer по-разному интерпретируют css в данном случае. Самый  простой вариант для уменьшения отступа - очистить поля и отступы слева.  Для увеличения же отступа можно сделать так:

ul { margin-left: 0; padding-left: 20px; }

или

ul { margin-left: 20px; padding-left: 0; }

(Те же правила применимы к ol и dl)

Eric A. Meyer написал подробное объяснение по этой проблеме.

Как можно добавить отступ между элементами списка? html css

Если элемент списка - текст, лучше всего оформить его как параграф:

• a list item

    

В других случаях можно добавить два переноса строки в конце каждого элемента списка:

Для более аккуратного и эффективного решения проблемы следует  использовать CSS, так как он не затрагивает структуру документа. Эта  декларация даст тот же эффект, что и уже приведенные способы:

li { margin-top: 1em; }

Внимание: установка line-height для списка приведет не только к  увеличению расстояния между элементами, но добавит междустрочное  расстояние для содержания каждого элемента.

Почему текст в Netscape 4.* становится все меньше и меньше? html css

Netscape 4.* рассматривает следующие один за другим тэги

(даже корректно закрытые) как вложенные, и поэтому уменьшает размер текста.

Проблема возникает оттого, что пары

в модели отображения Netscape 4.* взаимно уничтожаются. Добавьте пробел или любой другой символ между тэгами (например, так:

) и проблема решится.

По материалам сайта: http://karman.com.ua/