Подписка на блог

РСС — лучше всего

Ещё есть автоматические трансляции в Тумблере и Же-же. Если что-то не работает, напишите мне: ilyabirman@ilyabirman.ru.

Как я верстал C-Airlaid

Описание существующих проблем браузеров интересно, описание решений этих проблем интересно вдвойне, крики «маздай» ничего кроме зевоты не вызывают.
Данил Иванов, imfo.ru, вот здесь

Попробую для разнообразия последовать этому принципу и написать вдвойне интересную заметку. Расскажу-ка я о том, как я верстал airlaid.ru и с какими проблемами столкнулся. (Чёрт возьми, не могу не заметить, что с этими проблемами я не столкнулся в Опере.)

Вот такую штуку мне надо было получить:

Результат

Думаю, очевидно, что имеется в виду вёрстка в три колонки, т. е. ширина главного меню (и нижней плашки под копирайты) составляет 1/3 ширины окна; выравнивается и то, и другое посередене. Для простоты я решил делать колонки шириной 33%, 34% и 33% соответственно. Всякая шелуха вокруг нас интересует мало, поэтому рассмотрим упрощённый вариант задачи:

Упрощённый вариант

Итак, нам нужно сделать просто трёхколоночную вёрстку. Сложность здесь представляет (как оказалось) задача скругления краёв у синих плашек. Для начала я нарисовал 4 вот таких вот уголка для разных мест, антиалиаснутых на нужном синем фоне (восьмикратное увеличение by Photoshop):

Такой вот уголок

Думаю, что вы в курсе, что клетки, закрашенные в шахматном порядке — это прозрачность?

Эти уголки были расставлены в нужные места вот так:

#main-menu  {
  position: relative; 
  left: 33%;  top: 0;  width: 34%;  height: 170px;
  background: #189CC0;
}
#menu-lc  {  position: absolute;  left: 0;  bottom: 0;  }
#menu-rc  {  position: absolute;  right: 0;  bottom: 0;  }

<div id="main-menu">
<img id="menu-lc" src="menu-lc.gif" alt="" />
<img id="menu-rc" src="menu-rc.gif" alt="" />
</div>


Аналогично была сделана и нижняя плашка. Несмотря на то, что вроде бы всё в порядке (всё же в порядке, да?), это не захотело правильно работать в IE и Gecko-браузерах. А именно: при некоторых значениях ширины окна браузера получались вот такие глюки:

Глюк в IE 6 при 1024 и 1600 пикселях

Internet Explorer 6.0, при 1024 и 1600 пикселях

Глюк в Firefox 0.9.2 при 800 и 1024 пикселях

Mozilla Firefox 0.9.2, при 800 и 1024 пикселях

Забавно, что при ширине окна 800 пикселей IE показывал всё правильно, а FF отлично справлялся с вариантами 1152 и 1600. Целенаправленно я проверял только более-менее вероятные ширины окон, однако в обоих браузерах наблюдался такой эффект: при плавном изменении горизонтальных размеров окна глюк то появлялся, то исчезал в совершенно хаотичном порядке.

Я специально повторил эту вёрстку для «упрощенной задачи», причём вотнул стили прямо в HTML, чтобы интересующиеся могли не сильно напрягаясь посмотреть, что да как. Откройте это с помощью IE и/или Mozilla, поизменяйте размеры окна.

Открыть!

Первая приходящая на ум вероятная причина глюка: проценты в разных местах округляются по разным правилам — где-то в сторону меньшего, а где-то — в сторону большего. Однако такое объяснению проходит только в случае с IE; обратите внимание, когда изменяешь ширину его окна, он то показываёт всё правильно, то показывает уголок на один пиксель левее, чем нужно. В Mozilla же происходит намного более интересный эффект: она иногда показывает всё правильно, иногда показывает уголок на один пиксель правее чем нужно, а иногда — на один пиксель левее. Чтобы не быть голословным, приведу конкретные цифры: при ширине 800 пикселей уголок сдвинут вправо (как на рисунке выше), при 814 всё отображается правильно, а при 828 пикселях уголок сдвинут влево (как на рисунке про IE). Объяснения такому глюку я уже придумать не смог.

Начал я пытаться эту проблему решать. Сначала я попробовал запихать оба нижних уголка меню в таблицу, сделать её шириной 100%, поместить в левую колонку левый уголок, написать там align="left", а правую — в правый и написать align="right". Но в результате получил ровно тот же самый эффект (вроде бы, в обоих браузерах). Тогда у меня появилась сумасшедшая мысль: позиционировать уголок в нужные места javaScript’ом. Вариация на эту тему: подставлять в right: иногда -1px, иногда 0, иногда 1px, в зависимости от резрешения и браузера. Так можно было бы сделать, чтобы в стандартных разрешениях всё работало OK. Но этого я даже не пытался делать — слишком уж уродливое решение.

В конце концов я придумал вариант, при котором задача решается, а уродливость её решения, скажем так, остаётся на допустимом уровне. Я сделал вот что:

#menu-rc  {  position: absolute;  right: -1px;  bottom: 0;  }

И нарисовал для этого места специальный вариант уголка (посмотреть на специальный вариант уголка). Аналогичный спецуголок был нарисован и для нижней плашки. Результаты вы можете увидеть на сайте airlaid.ru.

Внимательные товарищи заметят, что под Gecko глюк немножко остался, но это уже совсем мелочи. Причина этого глюка частично в том, что у Gecko, как я уже сказал, не два, а три варианта расположения уголка (-1px, 0 и 1px), а моё решение 100% лечит только от варианта с двумя расположениями, т. е. как IE.

В общем, такие дела.
Подписаться на блог
Поделиться
Отправить
8 комментариев
blib
а как насчет в #main-menu сделать

background: #189CC0 url(menu-rc.gif) no-repeat bottom right;

и не парится?
Илья Бирман
Посмотрите внимательно на задачу до упрощения. Там у плашек и так background есть.

А вообще идея хорошая, мне в голову не пришла. Спасибо.
Spectator
Бирман! Ты в RSS принципиально кривые пути до картинок выдаешь?
slach
Очень полезная статья и принцип правильный выбран ;)
Именно из-за этого я люблю imfo.ru и очень горевал когда он чуть было не закрылся

Я очень рад, что ты стал руководствоваться принципом «описания путей решения» вместо банального «мастдай».
Это действительно интересно, даже если и не представляет ничего нового для  кого либо лично 
Захар
У меня IE выдаёт только первый глюк, а FF — и первый, и второй.
Вывод ясен — FF маздай =)
BOLK
Илья, а зачем? Почему бы это не одной картинкой херакнуть?
Илья Бирман
Не понял. Что — «это»?
BOLK
Уголочки я имею ввиду. Уголочки вместе с картинкой.
Илья Бирман
Дак, а как ты их картинкой нарисуешь-то? Это ж резиновая картинка.

Ты на сайт заходил? Поизменяй размер окна браузера. Или я чё-то не понимаю?
BOLK
Нет, не заходил, думал заметка самодостаточная :)

Теперь понял. Бакграунд у таблицы, таблица три столбца, две строки, в крайних нижних (в нижней картинки — верхних) ячейках — уголки.
Илья Бирман
Заметка самодостаточная, там всё про «вёрстку в три колонки» и про проценты написано! :-)
CAESAR
Была такая же проблема... в свое время провозился два дня. Ничего лучше -1 не нашел...

Пользовательский интерфейс
Доступен первый раздел
электронного учебника

Популярное