Comments 99
я часто задумываюсь, что кроме программирования хорошо бы подучить и основы верстки, но честно говоря — после этого топика мне кажется что мне это не дано.
автор — вы молодец, а проделанная работа мне кажется чем-то сродни микрохирургии.

ЗЫ имхо, не надо про Друпал, лучше еще про верстку!
у примера пока доменного имени нет, увы, и именно поэтому я не стала размещать линк в основном посте. Так же — 174.132.129.154/~ndn/
Нет! Outline необходим для работы с клавиатуры. Зачем намеренно ухудшать accessibility?
В таком случае, accessibility можно сохранить с помощью a:focus. В посте указывалось, что клиент акцентировался на дизайне.
Опера 10 alpha:

Опера 9.63:


Странности слева, у первого таба несовпадение цвета, на «Земельные участки» активный таб слишком далеко заехал.
В IE7 и Safari 3.2.2 тоже несовпадение цвета и проблема с «Земельные участки».
Сложно всё-таки заставить отрисовываться везде одинаково. Но думаю, поправимо.
хм, проверяйте ещё раз — пофиксено (хотя в опере 9.63 под Линуксом у меня вниз ничего не уползает). Ох, чую, сурово придётся пост апдейтить, но, в любом случае, благодарю за багрепорты :)
В 9.63 под Win всё-равно уползло вниз.

А проблемы с третим табом пропали.
о как. Уже второй человек в комментах жалуется на 3.0.6 — честно говоря, я не в курсе, неужели там чем-то кардинально отличается рендеринговый движок?
За выполненную работу +1 :). А с заказчиком я согласен кстате, задача ставится все таки не из того, как удобнее сделать — иначе вообще просто синие ссылки бы стояли :). Тут для заказчика главное чтобы это возможно было сделать, и за приемлемые сроки, тогда может требовать.
Всё больше понимаю, что необходимо Хабру намного больше вводных статей :)
Mac OS X 10.4.11 Firefox 3.0.6 — всё ужасно. Все табы разъехались. Особенно последний («Версия для печати») — в Сафари посмотрел, как он должен быть на самом деле, — он в Сафари ниже всех табов, в Фаерфоксе этот таб на одном со всеми уровне.
это как так? в FF3 всё тестировано. То ли лыжи не едут, то ли я чего-то не понимаю…
Ещё раз: Mac OS X 10.4.11 Firefox 3.0.6 — полная лажа, смотрите картинку — www.k2fx.com/share/ScreenSnapz.png

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

Так что или дальше с бубном танцуйте, или вернитесь назад в свой работе к тому месту, с которого пришлось браться за бубен. IMHO.
browsershots.org/screenshots/1e39ab90687e0dbbce68bb2131c58e38/ — вот Макось и Сафари
browsershots.org/screenshots/33f6cda1f4f043c61cf3cfb100aa3f90/ — вот Макось и Лисичка.

А что касается масштабируемости — всё понимаю, но тут уже — хозяин-барин, увы. Я о фиксированной вёрстке и подобных проблемах честно предупреждала.
по поводу 1 и 3 — сорри, так было нарисовано. По поводу 3 — что за браузер?
значит, дело в рендеринге шрифтов. Я попробую разобраться. Сенькс за багрепорт.
сделала небольшой фикс — господа хромоюзеры, проверьте, плз. Если работает — проапдейчу пост.
про п.1 знаю, но так было в макете, и исправление этого бага будет сплошным пииии… пиксель-артом %) Хотя, раз оно уж вот так вот бросается в глаза — надо будет попробовать. С п.2 ещё поразбираюсь (просто у меня Линукс, под него нет Хрома — а browsershots почему-то иногда не выдаёт всей информации). В любом случае — благодарю за замечания :)
я только добавлю, что все картинки стоило засунуть в один файл и использовать технику css спрайтов
окей, на будущее — учту. Почитала про это дело — действительно, интересная технология, благодарю за информацию.
UFO landed and left these words here
Я подобное меню делал однажды гораздо проще — просто утягивал каждый пункт направо отрицательным полем. Но там тоже было извращение — то ли пришлось порядок пунктов менять, то ли каждому z-index выставлять руками.

В вашем случае это сложнее, ибо захлёст перекрывает надпись.
Я также использовал z-index:; и отрицательный margin для реализации подобного меню: marow.ru/site/unora/

Первоначально меню реагировало на наведение мыши, а надписи на тикетах были текстом, но заказчик очень попросил упростить макет)

На мой взгляд, у автора топика неординарное мышление. Респект!
> Сразу оговорю, что под «осликом IE» имею в виду седьмую версию — ибо ввиду > массового распространения Висты и третьего сервиспака под WinXP шестой уже > сдаёт свои позиции

Ну это вы поторопились. Хоть глобально в рунете сейчас у IE6 только 15% (что тоже немало, кстати), но на обычных негиковских сайтах его доля запросто достигает 30%.
Всегда было интересно при скольких процентах популярности ИЕ6 вебмастера начнут отказываться от него?
не знаю как, я статистике такой не верю и в первую очередь проверяю все на ИЕ6

так как по моим личным наблюдениям — доля эта гораздо больше 30ти.
все зависит от ресурса, у меня 40% — Опера, 34% — Ослик, из них 6 уже меньше, чем 7.
>при скольких процентах популярности ИЕ6 вебмастера начнут отказываться от него
Веб-мастера могут начать отказываться хоть сейчас. А вот заказчик сначала просчитает процент недополученной прибыли, и если этот процент будет заметен, он погонит такого «веб-мастера» куда подальше. И правильно сделает.
Веб-мастер тоже своего рода предприниматель и также может считать свою прибыль (в основном). Поэтому мой вопрос можно отнести и к заказчику и к исполнителю. В конечном счёте однажды от него откажутся все. Вот меня и интересует это «критическое» значение.
О чем вы? В цивилизованном мире процент пользователей Оперы/Cафари/Хрома намного меньше процента пользователей ie6. Но ведь никому в голову не придет обсуждать нужно ли поддерживать ли эти броузер. И какова критическая планка.
См. цифры:
www.w3schools.com/browsers/browsers_stats.asp
www.thecounter.com/stats/2009/February/browser.php
www.w3counter.com/globalstats.php
en.wikipedia.org/wiki/Usage_share_of_web_browsers

Нет никакой планки. А если она есть то она определяется только требованиями бизнеса. Одна десятая процента оборота какого-нибудь интернет-магазина типа ебай-ком стоят того, чтобы трахаться с ie5 и не петюкать.
Спасибо за ответ! Теперь мне совершенно ясно, ebay.com будет работать с пятёркой даже при его рейтинге равном 0.1% ))

Поясню свою мысль более наглядно.
Если во время юстиниановой чумы погибло несколько десятков человек, все это назвали эпидемией.
В настоящее время от чумы погибает около 2,5 тысяч, но при этом об эпидемии речи не идёт.

Майкрософт давно перестал поддерживать ие5, но реальное положение дел зависит не от гигантов, а от рядовых пользователей, которые и создают картинку рейтинга браузеров.

Даже если через 1000 лет ebay.com всё ещё будет поддерживать ие5, это ровным счётом ни на что не влияет. В мире ничего никогда не бывает на 100%. Это тоже понятно.
Я же хочу узнать сколь низким должен быть процент рейтинга этого недобраузера, чтобы веб-мастера (по крайней мере их большая часть) с чистой совестью отказалась от поддержки этого программного продукта.
> этого недобраузера,
недобраузер он только для недоучек :)
Спасибо, но вы не расстраивайтесь. Таких как вы — полхабра.
это делается с помощью 1 изображения и, возможно, jquery если надо :hover
Занятно. А можно исходничек в PSD? Очень хочется самому поиграться :)
По идее главный минус в том, что ссылки при наведении никак не реагируют. Да и подчеркивание в таком меню считаю лишнимю

Убирание подчеркивания тут немного нелогичным выглядело бы, а вот подсчечивание реализовать сложно и грамоздко.

Не все продумали.
При попытке применить данные настройки к такому же списку, но без указания width каждого li элемента, получил список как будто с display:block. При этом display: inline ни при каких условиях работать как от него требовалось не собирался.

Немного поискав наткнулся на следующее решение — вместо display: inline использовать float: left,
т.е. будет вот так:

div#topnav ul.menu li {
      float: left;
}


Мою проблему такая замена решила полностью.

За статью спасибо.
сайт_дуры.JPG - image uploaded to Picamatic

chrome 1.0.154.48, все то же + все равно видны несовпадения цветов
блин простите за название скрина))) все время привык сохранят скриншоты под дебильными но понятными мне названиями, не думал что пикаматик его сохранит, это название
Никтобы не заметил, еслиб не написали. Наверное не заметил.
p.s.
Надо в ТЗ указывать в каких броузерах и в каких ОС должно работать.
Подгонять под все броузеры мира не дело — потому что их воз и маленькая тележка.
у меня стояла задача на IE, FF и Оперу, но я попутно протестила ещё в Konqueror. Честно говоря, да, чую, пока я под всё подгоню — офигею, тот проект столько не стоит :) А что такое «Амайя»?
IE 7 — присмотритесь к промежутку между 1 и 2рой вкладкой.
особенно несостыковка видна при открытой второй вкладке
у меня нет IE. Вообще. Чтобы проверить в нём страницу, я пользуюсь сервисом browsershots :) Но на слово верю, щас ещё пиксель прибавлю :)
Дизайнера приговорить к году кроссбраузерной, семантичной вёрстки!
несовпадения цветов у PNG должны вылечиться после удаления всех чанков
у меня на странице
174.132.129.154/~ndn/business
в IE7, Chrome, Fx3, Opera10 у земельныз участков правое загругление вправо немного уехали. Причем в Fx чуть меньше, чем в остальных
спасибо, но в Fx3 теперь на 1 пиксель ближе, чем должно быть. Наверное, придется хак использовать…
а вот это уже ИМХО не очень заметно — честно говоря, даже если не удастся сделать хак, то меня вряд ли побьют :)
да, но ведь заметят профессионалы типа Вадима :) а это, ИМХО, гораздо важнее :)
пара мелочей, не важных правда:
вместо

div#topnav ul.menu li a#apartments
div#topnav ul.menu li.active-trail a#apartments

(и аналогичных) можно, по идее, просто

#apartments
.active-trail #apartments

и я бы еще вынес background: top left no-repeat; в какое-нибудь правило «повыше», а для отдельных ссылок менял бы только background-image.

Хотя все это — уже дело вкуса, кому как нравится.
А если меню фиксированное…
Может, просто сделать 4 картинки и всё?
И поверх текстовые ссылки?
Действительно. Если на увеличение шрифта не расчитано, то не было смысла так извращаться. Я подобную проблему решил таблицами, не побрезговал.
Тоже сразу так подумал, удивился, что никто не предложил раньше.
Возможно, тут дело не столько в результате, сколько в вёрстке ради вёрстки.
пришлось бы всё равно извращаться, меняя бэкграунд в зависимости от текущей вкладки. А задача эта ни разу не банальная, учитывая, что вкладка должна быть активной и при выборе дочернего в ней элемента.
Опишите как Вы все это на Drupal натянули :-).
Я сам частенько такими извращениями занимаюсь.
Жуть… При таком варианте нужен флеш «без вариантов». Тут уже не до семантики…
PS: Но за код респект.
Only those users with full accounts are able to leave comments. Log in, please.