Xpoint
   [напомнить пароль]

Интернет::HTML-верстка::CSS - F.A.Q.

Как сделать однаковую ширину поля ввода для NN и IE?
Самый простой способ - установить
style="font-family: monospace
Либо воспользоваться следующим алгоритмом:
  • Пишем <input type=text style="font:8pt Verdana">
  • Подбираем size до получения требуемого в NC.
  • Добавляем <input type=text style="font:8pt Verdana">нужный size
  • Добавляем в стиль width: [сколько надо]px; для IE.
  • Получаем что-то в духе <input type=text size="4" style="font:8pt Verdana;width:10px">
Background таблицы в IE и NN

Если фоновое изображение копируется во все ячейки в HH, то решается проблема так: в тех ячейках, где фон не нужен, ставиться принудительно background="".
Если же нужен литой фон у всей таблицы, без повторения в каждой ячейке, то надо воспользоваться вложенными таблицами:
<table>
<tr><td background="xxx.gif">

<table background="">
<tr><td></td></tr>
....

</table>

</td></tr>
</table>

Методы установки цвета ячейки_таблицы/фона

Каждый верстальщик должен помнить: на одной странице (сайте) нужно, по возможности, использовать лишь один из двух методов.
А) весь цвет устанавливается графикой (т.е. в качестве фона задаётся картинка - пусть даже одноцветная гиф-планшетка, этот же фоновый цвет сохраняется на всех непрямоугольных рисунках /и надписях/, вырезаемых вместе с частями фона.
Б) весь цвет, где возможно, устанавливается в HTML: в фоновой картинке, если таковая есть, преимущественно прозрачный фон, и цвет фона определяется параметром в <body>, фоновый цвет у картинок вытравляется и замещается прозрачными пикселями (кроме каёмки antialiasing-а) и проч.

Речь идёт не о всех цветах вообще, а о каждом конкретном цвете, занимающем большую площадь. Т.е. вполне возможно задавать, например, цвет #xxyyzz только в HTML, а цвет #aabbcc - в графике. Но нельзя, например, прописывать фоновый цвет #xxyyzz в теге <body> и сохранять тот же цвет в лежащих на этом фоне картинках - его обязательно надо вытравить, заменив прозрачными пикселями, или в тег <body>, параллельно с указанием цвета, ввести адрес фоновой картинки, каковой в данном случае должна быть монохроматическая планшетка цвета #xxyyzz.

А теперь - зачем всё это нужно? А вот затем: на мониторах очень многих пользователей установлен режим High Color - т.е. режим 2 байта/пиксель (точнее, 15 бит/пиксель), и вместо ~16 млн. цветов монитор воспроизводит только ~65 тыс.. Это само по себе очень хорошее качество, но проблема в том, что броузер вынужден приводить 3-байтовую палитру RGB к 2-байтовой. При этом происходит конвертирование цветов 3-байтовой палитры к ближайшим цветам 2-байтовой. Как ни печально, но это конвертирование броузеры выполняют по-разному в отношении цветов, заданных графикой, и цветов, заданных в HTML. Причём разные броузеры ведут себя в разных случаях по-разному. Иногда результаты совпадают в одном и различаются в другом (в ИЕ совпадают чаще, чем в НН, но порой наблюдается совпадение в НН и расхождение в ИЕ). Так или иначе, когда расхождение имеет место, на стыке графики и области, залитой (по идее, тем же самым!) HTML-цветом, наблюдается резкий цветовой переход. Конечно, он обычно малоконтрастен, но человеческий глаз очень чувствителен к разнице цветов (в отличие от их абсолютных значений), и поэтому этот переход весьма заметен и бросается в глаза.

Быстрое изменение ширины ячеек таблицы

Итак, у вас сложная табличная вёрстка в четыре или три колонки, в которой вдруг надо поменять ширины столбцов. (я сказал "вдруг" — например, начальство новый рекламный баннер приволокло, который не помещается в ваши габариты, а деньги за рекламу уже уплочены, и хоть убейся, а сделай) Проблема в том что эта вёрстка у вас весит 60КБ кода, и каждая из колонок — минимум 10-12КБ из этих шестидесяти, и там много вложенных таблиц (минимум по одной в каждой колонке). Искать нужные параметры, конечно, не сложно, просто нудно ведь видеть постоянно пролистывающиеся экраны разметки.

Решение есть одно, очень милое и простое. Вы создаёте вверху или внизу этой таблицы ещё одну строку, в которой полностью расписываете ширину каждого из столбцов, и полностью убираете соответствующие значения из столбцов с контентом.

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

Более того, когда у вас всё форматирование таблицы лежит в одном <tr>, то при изменении других страниц такую конструкцию можно запросто поменять через один (!) find/replace (при использовании хомсайта (http://www,allaire.com/), конечно). Для сравнения: если параметры ширины будут раскиданы по столбцам, содержащим в себе вложенные таблицы, вам придётся как-то идентифицировать нужные <td>, и даже в этом случае придётся выполнить операций по количеству изменённых столбцов (в обычном случае от двух до трёх операций для четырёх колонок, потому что один-два столбца в таких вариантах вёрстки бывают одинаковой ширины).

Далее. Кроме простоты, быстроты и наглядности, есть такой параметр, как гибкость. Если вы делаете жёсткую вёрстку, вместо ширин в ячейках (или в добавление к ним) можно прописать в сами пустые ячейки гифы-распорки, которые идеально лягут, и будут поддерживать каркас таблицы просто замечательным образом. Традиционно сложилось так, что, например, Нетскейп навигатор 4.хх вообще требует обязательного и явного указания ширины всех столбцов, цифрами или распорками, в противном случае он будет глючить при выводе таблиц, и портить жизнь кодеру. Поэтому техника дополнительного, "сервисного <tr>" далеко не нова.

А если внешняя таблица работает основой для внутренних, и создаёт им обрамление из тонких линий (cellspacing/cellpadding=1), и добавление строки привело к появлению двойной полосы, достаточно перенести определение цвета (или указание на стилевой класс, если использованы css) из самой таблицы (тэг <table>) в ячейку(ячейки) (<td>) с контентом, который нуждается в этом тонком обрамлении. Исчезнет ненужная полоса снизу, а если таких контент-ячеек у вас несколько, вы сможете индивидуально менять цвет их обрамления.

Способы создания распорок

Метод первый: Гиф-распорка.
Чем он плох. Такой гиф-распорка может применяться для жёсткого построения страницы, и активно участвовать везде, где это возможно.
Прекрасно, теперь переключились в не-графический режим, выключили картинки... И... откуда! Зачем остались place-holder'ы повсюду? Не нравится? Решается запросто:
<img src="img/0.gif" width="1" height="1" alt="" border="0" style="visibility:hidden">
То есть добавили style="visibility:hidden". Таким образом, ни плейсхолдеров, ни самих распорок видно не будет, даже если выделить всю страницу (это можно легко увидеть в эксплорере). Старые броузеры видят нормальную распорку и забивают на стилевой атрибут.

Метод второй, не менее элегантный.
<span style="width:15px;height:31px;"><spacer type="block" height="31" width="15"></span>
Эсплорер довольствуется <span>'ом, а нетскейп радуется своему, родному спейсеру!
Строка занимает 99 байт. Почти ровно в два раза больше однопиксельного гифа (ббез учёта html-кода на вставку этого гифа).

Таким образом у вас, господа разработчики, всё же есть реальная, красивая альтернатива между двумя принципиально разными, но одинаково элегантными способами устройства (одно-)пиксельных распорок.

Добавление:
Ещё один любопытный вариант использования однопиксельного прозрачного гифа в качестве распорки:

<img src=empty.gif border=0 width=0 height=0 hspace=10 
vspace=20 alt=""> 

(распорка 20x40; если надо 21x41, то width=1 height=1) Проверен в IE, N4, O5.
Преимущества этого метода в том, что распорки практически не видны при выделении страницы, а при отключении графики не видны заменители.

В таблице неправильно работает ширина (высота) ячеек (рядов, таблиц). Что делать?

На самом деле, атрибуты width и height задают ширину и высоту, которые воспринимаются браузерами, как рекомендуемые. То есть ширина и высота ячеек (рядов и таблиц) в большей степени зависят от своего содержимого и от содержимого соседних ячеек, чем от этих атрибутов.

Размер ячейки не может быть меньше содержимого (то есть, содержимое ячейки «растягивает» её). Исключение — при использовании стилей возможно сохранение рекомендуемой высоты ячейки в ущерб содержимому:

<table width="100" height="100" border="1">
<tr>
<td valign="top" width="50%">a<br>b<br>c<br>d<br>e<br></td>
<td width="50%">
<ilayer clip="0, 0, 15, 100">
<layer>
<div style="position:relative; overflow:hidden; height:100px;">a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br>i<br>k</div>
</layer>
</ilayer>
</td>
</tr>
</table>

Этот код (пример Владислава Пустынского) позволяет «обрезать» содержимое, если оно не помещается по высоте в ячейку. Следует также отметить, что работающий в ИЕ параметр overflow: scroll, создающий скроллинг для просмотра непоместившегося в ячейку содержимого, не работает в НН, поэтому его использование нежелательно!

Если содержимое ячейки меньше рекомендуемой ширины, соседняя ячейка может повлиять на неё, если в этой ячейке содержимое больше рекомендуемой ширины или рекомендуемая ширина этой ячейки превышает «разумную» ширину (то есть, когда у вас таблица шириной в 200 пикселей, первая ячейка шириной в 100 пикселей, а вторая в 1000000 пикселей или в 100%).

Что делать обязательно и чего делать не стоит?

  • Не следует использовать для ячеек в одной таблице процентные и пиксельные значения для ширины и высоты (при этом можно таблице задавать пиксельные величины, а ячейкам процентные);
  • для создания таблиц, в которых какие-то ячейки имеют фиксированную ширину, а другие процентную, используйте или распорки, или вложенные таблицы;
  • для установления минимальной ширины ячейки используйте «распорки» — если вы вставите в ячейку распорку шириной 200 пикселей, то её ширина и ширина ячеек, находящихся под и над ячейкой с распоркой не будет меньше 200 пикселей;
  • для установления максимальной ширины ячейки используйте распорки в соседних ячейках.

Не забывайте, что:

  • Cодержимое, способное повлиять на ширину ячейки — это либо картинка с заданной шириной, либо длинное слово, либо несколько слов, между которыми стоят не обычные, а неразрывные пробелы, либо несколько слов, заключённых в контейнер <nobr></nobr>;
  • обычный текст также может влиять на ширину ячеек, если они не заданы явно в таблице, ширина которой задана;
  • атрибуты width и height являются рекомендуемыми, и действуют до тех пор, пока на ширину и высоту ячейки (таблицы или ряда) не начинают влиять содержимое или соседние ячейки.
Как сделать, чтобы всегда загружалась актуальная версия html странички (а не из кэша)?

1) Выдавать адрес страницы как index.html?n=347121248242574, где случайное число генерируется клиентским скриптом.
Для любого броузера (прокси, Web-ускорителя) страница с изменившимся адресом - это новая страница, и нет никаких оснований брать ее из кэша.
Кстати, дописывание случайных строк в конец URL - это заодно удобный способ проверить истинное содержимое Internet-страницы, если возникает сомнение, не связана ли какая-нибудь ошибка с глюками кэширования в прокси или броузере. Почти ко всем Web-адресам можно совершенно безболезненно дописать что-нибудь вроде "?183472" - или "&kwekke1=3", если вопросительный знак в адресе уже имеется. Тогда гарантированно никакой кэш задействован не будет.

2) Выдача http-заголовков
      Pragma: no-cache
      Cache-Control: no-cache
серверным скриптом или настройкой сервера. http-заголовок - это специальный блок данных, автоматически выдаваемый Web-сервером броузеру перед телом HTML-страницы; поля http-заголовка зависят от настроек сервера.

3) Тэги типа <meta HTTP-EQUIV=...>
а/ <meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
Выдает броузеру http-заголовок "Pragma: no-cache" или "Cache-Control: no-cache" при reload.
б/ <meta HTTP-EQUIV="Expires" CONTENT="Mon, 22 Aug 1978 23:59:59 GMT">
Броузер не должен кешировать ее после указанной даты, в частности если эта дата указывает на прошлое время или просто указана нулевой, броузер должен всегда выдавать новый материал (не из кеша).

Такие указания существуют на случай, если настройка сервера почему-либо неудобна - или у разработчика не хватает на это квалификации :-) Известные броузеры обычно реагируют на такой тэг точно так же, как и на эквивалентный http-заголовок. Но тут возможны нюансы, особенно при использовании кэширующих прокси. В отличие от броузеров, прокси запросто могут реагировать (в плане управления кэшированием) только на http-заголовок и игнорировать любые тэги внутри страницы. Так что страница с тэгом <meta HTTP-EQUIV="Pragma" CONTENT="no-cache">, хотя и не будет кэшироваться собственно броузером, запросто может скэшироваться в прокси. Если даже страница объявлена как некэшируемая или "изначально устаревшая" (Expires), броузер все же может взять ее из кэша, скажем, при нажатии кнопки Back - "для скорости". И даже если броузер следует всем нужным стандартам, какая-нибудь утилита - ускоритель Internet, занимающаяся дополнительным кэшированием страниц на клиенте для избежания лишних обращений к сети, вполне может нарушить стандарты и скэшировать страницу, когда не надо. Вполне вероятно, что это будет "с согласия пользователя", в соответствии с пользовательскими настройками - типа "обновлять любые HTML-файлы не чаще, чем раз в час".

(Авторы: Даниил Алиевский, Сергей Круглов)

Вышележащий слой не накрывает <select>. Как это побороть?
<select> - это "оконный" элемент и имеет бесконечный z-index; накрыть его можно только другим оконным элементом.
Если речь идет о том, чтобы накрыть <select> "обычным" слоем (а не оконным элементом), то единственным решением такой проблемы будет прятать нижний слой с <select>-ом при его пересечении с верхним слоем.
Если слой должен накрывать <select> не полностью, решение задачи становится громоздким и неестественным, поэтому зачастую проще изменить структуру дизайна, чем добиваться решения данной проблемы любой ценой.

Обсуждение проблемы можно найти в архиве, в частности:
http://xpoint.ru/archive/topic3/49/9899.html
Как установить пользователю свой шрифт?

Для IE и Netscape технологии отличаются.

1) Для IE:

<STYLE>
<!--
@font-face {font-family:Mistral;src:url(MISTRAL.eot);}
-->
</STYLE>

Для создания файла шрифта (.eot) используется программа MS WEFT

2) Для Netscape: http://developer.netscape.com/docs/manuals/communicator/dynhtml/webfont3.htm

Алексей Рюмин aka Dwarf

Можно ли применить стилевые свойства border-style и border-color к элементу формы <select>, например, для того, чтобы сделать его вид плоским?
Нет, нельзя.
Обсуждение этого вопроса вы можете найти в архиве:
http://www.xpoint.ru/archive/topic3/30/6025.html
http://www.xpoint.ru/archive/topic2/21/4362.html
http://www.xpoint.ru/archive/topic3/39/7962.html
Как расположить DHTML-слой над Flash-роликом?

Описание проблемы:

На DHTML странице с несколькими слоями флеш-ролик всегда будет размещен поверх всех слоев, вне зависимости от порядка расположения и значений z-index этих слоев.

Причина:

Большинство броузеров помещают встроенные плагины, такие как флеш-ролик или Java апплет, на самом верхнем слое. Поэтому, любая попытка разместить DHTML слой поверх слоя с флеш роликом обречена на неудачу.

Решение для IE5.5+:

Следует использовать параметр объекта wmode.

Иллюстрирующий пример Диониса Сантина

WMODE = Window | Opaque | Transparent

This tag works only in Windows with the Flash Player ActiveX control.

  • Window — plays the movie in its own rectangular window on a Web page.
  • Opaque — makes the movie hide everything behind it on the page.
  • Transparent — makes the background of the HTML page show through all the transparent portions of the movie, and may slow animation performance.

Перевод:

Термины:

  • фон — область фильма, не закрытая никакими объектами.
  • фоновый_цвет — цвет, назначенный во флеш как фоновый для фильма и, возможно, переопределенный параметром BGCOLOR тега OBJECT.
  • слой — html объект c позиционированием absolute или relative

Толкование:

  • Window — фильм лежит выше всех слоев. Фон имеет фоновый_цвет.
  • Opaque — фильм ведет себя как изображение. Если он лежит в body, то слои будут его закрывать, если в слое - то он закрывает нижние (по z-index) слои и закрывается верхними. Фон имеет фоновый_цвет.
  • Transparent — то же самое, что Opaque, но фон прозрачный. Т.е. фильм ведет себя как гиф с альфа-каналом.
Как с помощью CSS создать таблицу с однопиксельным border?
table {border-collapse:collapse}
td {border:1px solid red;}
(Поддерживается браузерами IE5.0+, Opera 7+, Netscape 6+, Mozilla 1+)
Powered by POEM™ Engine Copyright © 2002-2005