![[logo]](/site/images/logo.jpg){kind=logo}
Интернет::HTML-верстка::CSS - F.A.Q.
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">
Если фоновое изображение копируется во все ячейки в 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являются рекомендуемыми, и действуют до тех пор, пока на ширину и высоту ячейки (таблицы или ряда) не начинают влиять содержимое или соседние ячейки.
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>-ом при его пересечении с верхним слоем.
Если слой должен накрывать <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
Обсуждение этого вопроса вы можете найти в архиве:
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 странице с несколькими слоями флеш-ролик всегда будет размещен поверх всех слоев, вне зависимости от порядка расположения и значений 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, но фон прозрачный. Т.е. фильм ведет себя как гиф с альфа-каналом.