Интерблог

Архив рубрики "XHTML"

Кроссбраузерный обтекающий список
Автор: Ognezmej. Опубликовано: 06 Июля 2009

Всем хороши списки.

Кроме одного - попробуйте разместить список в тексте, который обтекает картинку справа. В смысле текст со списком справа, картинка слева. Не спрашивайте у меня, куда уползли буллеты, спросите у Бога, как говорят обычно в таких случаях американские проповедники. Много пришлось перерыть информации, прежде чем что-то начало вырисовываться. Итак, в предлагаемом способе мы отказываемся от стандартных буллетов и заменяем их картинками. Возможно, с буллетами тоже что-то получится - пока не пробовал.

Собственно, вот такие стили работают. В эксплорере (6 и 7), мозилле и опере. В заголовке документа - XHTML 1.0 Strict. Валидолом не проверялось, стояла цель - адекватное отображение.

ul {zoom: 1; overflow: hidden; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;}

li {list-style: none; background: url(img/sector/ico.gif) no-repeat left 5px; padding: 0px 0px 0px 16px; margin: 0px 0px 0px 10px;}

Разумеется, адрес картинки и цифры, которые не 0, взяты из конкретного примера, вы можете туда любые свои добавлять. Здесь важны горизонтальные значения. Соответственно, вертикальные значения маржинов и паддингов можете писать, какие в голову взбредут.

Итак, если интересно поподробнее:
zoom: 1; overflow: hidden; - предназначены для того, чтобы буллеты не уплывали под картинку в фаерфоксе
margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; горизонтальные маржины и паддинги для ul лучше оставлять нулевые. Впрочем, можете поэкспериментировать - мне не понравилось
background: url(img/sector/ico.gif) no-repeat left 5px; - здесь всё понятно - эта хрень заменяет буллет. Вместо 5px вам нужно будет поставить вертикальную позицию этого как-бы-буллета. В среднем - половина высоты шрифта.
padding: 0px 0px 0px 16px; - здесь 16px - это отступ текста элемента списка ОТ ЛЕВОГО КРАЯ картинки-буллета. Соответственно, равен отступу текста от буллета плюс ширина буллета.
margin: 0px 0px 0px 10px; - здесь 10px - это отступ всего элемента списка от левого края.

Да, данные стили работают и с обычными списками в отсутствие обтекания.

 

Метки: XHTML, Кодинг

Нет комментариев

Буквицца
Автор: Ognezmej. Опубликовано: 11 Июня 2009

В общем, есть в CSS такой псевдокласс, как first-letter.
В стилях записывается так:

P:first-letter {}

Вместо тэга P можно использовать другие - не знаю, не пробовал. Заявляется стиль после определения самого элемента (в нашем случае P). Итак, задаём нашей буквице размер, шрифт, цвет, и наслаждаемся.

Захотел сделать обтекание, о чём пожалел. По разным браузерам расползлось как тараканы. Ставим line-height, причём в правильном формате (проценты или множитель), прописываем все маржины и паддинги, в результате получаем, что в эксплорере и опере буквица имеет некий необъяснимый отступ сверху, которого нет в фаерфоксе. В случае, если высота буквицы немного меньше, чем высота строки основного текста, помноженная на целое число, это не так страшно. В противном случае за счёт этого самого отступа вниз буквица может ещё строчку сожрать. И как с этим бороться, пока не поняли... Думаем-с

 

Метки: XHTML, Кодинг

1 комментарий

Выкрутасы Эксплорера VI.
Автор: Ognezmej. Опубликовано: 03 Мая 2009

Итак, задача: идёт последовательно несколько блоков, внутри каждого - картинка, обтекаемая текстом. Требуется - нормальное отображение.

Баг: в случае, если размер текста меньше высоты картинки, каждый последующий блок оказывается не внизу, а также справа от картинки. Во всех нормальных браузерах это лечится параметром clear:both;
Но не в шестёрке!
Под Шестым Эксплорером оказывается, что содержимое верхнего блока, за исключением обтекаемой картинки, просто не видно. Забавно, что прокрутка страницы за пределы этого блока и последующее возвращение делают текст вновь видимым.

Замечено: баг появляется для текста, которому не прописан float. Если прописать ему right, тогда возникает вопрос - кто кого обтекать будет. И, наконец, может быть заголовок, который на весь блок - куда его деть?

Замечено ещё: баг пропадает, если жёстко задать высоту блока. Но тогда во всех не-эксплорерах блоки начинают наползать друг на друга.

Итак, решение:
В параметрах блоков используем общеизвестный код для кроссбраузерной минимальной высоты:
clear: both; min-height: (высота картинки)px; height: auto ! important; height: (высота картинки)px;

Высоту картинки можно жёстко задать, если она одинакова для всех блоков, или вытащить средствами PHP.

Проверялось на IE6.0, IE7.0, Firefox 3.08, Opera 9.51

 

Метки: XHTML, Кодинг

Нет комментариев

Ошибки с картами изображений в XHTML 1.1
Автор: cyberacing. Опубликовано: 02 Февраля 2009

Недавно решил перейти со стандарта XHTML 1.0 Strict на XHTML 1.1. Это было не так сложно, так как различий между ними не так много. Но проверяя валидацию старых проектов, обнаружил, что слишком много ошибок возникает там, где в коде были использованы карты изображений (map и area). Я попытался устранить проблему в валидации согласно стандарту. После устранения ошибок карта изображений проходит валидацию, но... абсолютно не работает, ни в IE, ни в FF. Я решил выяснить, в чем может быть проблема.

Код, работающий корректно в XHTML 1.0 Strict, продолжает работать и в XHTML 1.1, но валидацию не проходит. Проверка возвращает следующие ошибки:

(1) There is no attribute "name".
(2) Character "#" is not allowed in the value of attribute "usemap".
(3) Non-existent ID "#mapName2".

Старый код под XHTML 1.0 Strict, который работает:

<map name="MapName2" id="MapName2">
<area shape="rect" coords="14,123,197,223" 
href="/contacts/" alt=""></area></map>
<img src="/img/imagemap.jpg" usemap="#mapName2" alt="image" />

Подсвечены области с ошибками. Посмотрим, что нам предлагают стандарты. XHTML 1.0 (Strict) DTD представляет нам следующее: 

<!ELEMENT img EMPTY>
<!ATTLIST img
  %attrs;
  src         %URI;          #REQUIRED
  alt         %Text;         #REQUIRED
  longdesc    %URI;          #IMPLIED
  height      %Length;       #IMPLIED
  width       %Length;       #IMPLIED
  usemap      %URI;          #IMPLIED
  ismap       (ismap)        #IMPLIED
>

<!ELEMENT map ((%block; | form | %misc;)+ | area+)>
<!ATTLIST map
  %i18n;
  %events;
  id          ID             #REQUIRED
  class       CDATA          #IMPLIED
  style       %StyleSheet    #IMPLIED
  title       %Text;         #IMPLIED
  name        NMTOKEN        #IMPLIED
>

Для элемента "img", как вы заметили, "usemap" определяется как %URI. Это означает, что знак # может быть использован, как указатель на фрагмент страницы. А для элемента "map" атрибут "id" должен быть обязательно, а для "name" указано, что он может быть использован по желанию. Что мы и делаем. 

Теперь обратимся к стандарту XHTML 1.1: 

<!ATTLIST %input.qname;
      usemap      IDREF                    #IMPLIED
><!ENTITY % map.attlist "INCLUDE" >
<![%map.attlist;[
<!ATTLIST %map.qname;
      %XHTML.xmlns.attrib;
      id         ID                        #REQUIRED
      %class.attrib;
      %title.attrib;
      %Core.extra.attrib;
      %I18n.attrib;
      %Events.attrib;
>

Заметьте, атрибут "usemap" элемента "map" в XHTML 1.1 DTD теперь определяется как IDREF, а не URI. Это означает, что значение "должно быть таким же, как и для ID других элементов". Вот почему # дает ошибку и почему она не может быть ссылкой на ID (т.к. ID не содержат #). Кроме того, элемент "map" больше не поддерживает атрибут "name". 

Теперь мы знаем правила и попробуем изменить наш код: 

<map id = "MapName2">
<area shape="rect" coords="14,123,197,223" 
href="/contacts/" alt=""></area></map>
<img src="/img/imagemap.jpg" usemap="mapName2" alt="image" />

После этого мне полегчало. Код соответствует стандартам и проходит валидацию. НО... эта конструкция отказывается работать в современных браузерах. Все дело в том, что браузеры не на 100% поддерживают рекомендации W3C по XHTML 1.1. Поэтому, если вы хотите, чтобы карты изображений функционировали, вы должны использовать нестандартный XHTML 1.1 и не обращать внимания на ошибки валидации. Вот такие дела.

 

Метки: XHTML, Кодинг

Нет комментариев

Яндекс.Метрика