Кулинарные рецепты CSS
Кулинарные рецепты CSS
Craig Saila
Как
убрать лишнее пространство вокруг формы? html css
Есть
два способа сделать это - с помощью хитрости и с помощью 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 каждый раз отрисовывают
их заново.
Даже
проблема возникает практически во всех новых броузерах при отображении плагинов
и слоёв.
На
сайте 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:<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/u gd
Как
и многое в веб-дизайне, целесообразность использования выпадающего меню зависит
от аудитории. На обычных сайтах лучше от него отказаться. Впрочем, иногда
бывает удобно собрать вместе несколько ссылок на ограниченном пространстве.
Минусы
использования выпадающих меню:
длинный
текст делает меню чрезмерно широким
трудности
доступа к опциям в текстовых и речевых броузерах
невозможно
увидеть сразу все доступные варианты
некоторые
пользователи не догадываются о наличии скрытых опций
оперирование
выпадающими меню может представлять трудности для некоторых пользователей
("Я не понял, что надо нажать 'перейти'")
различный
внешний вид в различных броузерах
требует
небольшого, но все же программирования (на стороне клиента или сервера)
Еще
на эту тему имеет смысл почитать Macintosh Human Interface Guidelines.
Почему
у картинок в таблицах появляется отступ внизу? html css
Особенно
это заметно в броузерах на базе Gecko (например, в Netscape 6.x) и некоторых версиях Mozilla. Скорее всего это происходит потому, что броузер
интерпретирует <img> как строчный элемент. Проблема
решается следующей декаларацией:
TD>IMG { display: block; }
(подробное
объяснение вы можете найти в статье "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 (и новых броузерах) достаточно добавить стилевую
декларацию
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.
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
: #
F
00; }
Прочие
CSS-совместимые броузеры: HR
{
background
-
color
: #
F
00; }
Тоже
самое верно и для выравнивания:
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 */
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 */
Для
более подробной информации по этой теме читайте статью Marek Prokop "Styling
<hr>".
Как
изменить отступ для элементов списка с помощью 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
Если
элемент списка - текст, лучше всего оформить его как параграф:
<li><p>a list item</p></li>
В
других случаях можно добавить два переноса строки в конце каждого элемента
списка:
<li>a list item<br><br></li>
Для
более аккуратного и эффективного решения проблемы следует использовать CSS, так как он не затрагивает структуру документа. Эта
декларация даст тот же эффект, что и уже приведенные способы:
li { margin-top: 1em; }
Внимание:
установка line-height для списка
приведет не только к увеличению расстояния между элементами, но добавит
междустрочное расстояние для содержания каждого элемента.
Почему
текст в Netscape 4.* становится все меньше и меньше? html css
Netscape 4.* рассматривает следующие один за другим тэги <p> (даже корректно закрытые) как вложенные, и поэтому
уменьшает размер текста.
Проблема
возникает оттого, что пары </p><p>
в модели отображения Netscape 4.* взаимно уничтожаются.
Добавьте пробел или любой другой символ между тэгами (например, так: </p> <p>) и проблема решится.
Список литературы
Для
подготовки данной работы были использованы материалы с сайта http://www.webmascon.com