Кулинарные рецепты CSS - Вёрстка - Webmascon

| WEBMASCON - журнал для веб-мастеров обновление |12.09.2003

| Вёрстка

Начало
Темы
Архив
Daily
Персоналии
Форумы
Отзывы
О сайте

все статьи на тему Вёрстка

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

Web Building Tips
© Copyright 2002 © 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.

Выход - в использовании атрибута 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 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>) и проблема решится.

- Скриншот страницы с проблемой
- Скриншот страницы с решенной проблемой

Ссылки по теме
Эта статья на английском языке | англ.. Другие статьи с этого сайта | англ.. назад к списку статей

Рекомендую

Михаил Дубаков
Веб-мастеринг средствами CSS
на http://www.ozon.ru/?context=detail&id=1099692&partner=webmascon
на http://www.books.ru/shop/books/27425?partner=webmascon
Почитайте Главу 5
Отзывы о книге

Начало | Темы | Архив | Daily | Персоналии | Форумы | Отзывы | О сайте

|  | Автор и администратор ресурса - Александр Качанов Webmascon Project открыт в 1999 году
© 1999-2002, переводы, Александр Качанов © 1999-2002, Webmascon © дизайн | matepuana.com |  |