Как стать автором
Обновить

Комментарии 99

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

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

Опера 9.63:


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

А проблемы с третим табом пропали.
Вот я про это же
ФФ 3.0.6, Линукс с родными шрифтами:
img413.imageshack.us/img413/4821/screenshot16.png

но это уже привычная картина на перегруженных графикой сайтах
о как. Уже второй человек в комментах жалуется на 3.0.6 — честно говоря, я не в курсе, неужели там чем-то кардинально отличается рендеринговый движок?
тем более, что не только на сабжевом сайте такое…
Ещё бы ссылочку на живой пример ;-)
см. выше — закинула
За выполненную работу +1 :). А с заказчиком я согласен кстате, задача ставится все таки не из того, как удобнее сделать — иначе вообще просто синие ссылки бы стояли :). Тут для заказчика главное чтобы это возможно было сделать, и за приемлемые сроки, тогда может требовать.
Кунг-фу CSS настоящее.
Фаталити, я бы сказал :))
Всё больше понимаю, что необходимо Хабру намного больше вводных статей :)
Mac OS X 10.4.11 Firefox 3.0.6 — всё ужасно. Все табы разъехались. Особенно последний («Версия для печати») — в Сафари посмотрел, как он должен быть на самом деле, — он в Сафари ниже всех табов, в Фаерфоксе этот таб на одном со всеми уровне.
Mac OS X 10.5.6 скриншоты комментом ниже. ФФ и WebKit.
oops — картинка — www.k2fx.com/share/ScreenSnapz.png — для меня тег, увы, здесь запрещен.
это как так? в 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 — что за браузер?
упс… по поводу п.2, в смысле :)
Mac OS X, Webkit, Safari, Firefox 3
значит, дело в рендеринге шрифтов. Я попробую разобраться. Сенькс за багрепорт.
хм, чуть поправила — лучше?
mac os x, safari — баг остался

В Chrome 2.0.164 \ Win7 появляются странные линии.
под W7 не тестировалось… в других осях в Хроме та же проблема?
XP, Chrome 2.0.164.0 — так же
сделала небольшой фикс — господа хромоюзеры, проверьте, плз. Если работает — проапдейчу пост.
про п.1 знаю, но так было в макете, и исправление этого бага будет сплошным пииии… пиксель-артом %) Хотя, раз оно уж вот так вот бросается в глаза — надо будет попробовать. С п.2 ещё поразбираюсь (просто у меня Линукс, под него нет Хрома — а browsershots почему-то иногда не выдаёт всей информации). В любом случае — благодарю за замечания :)
Пишите ещё, потестим :-)
по идее — fixed
chrome 1.0.154.48\Win7 линия в 4 пункте
xp xp2 chrome 1.0.154.48 аналогично
я только добавлю, что все картинки стоило засунуть в один файл и использовать технику css спрайтов
окей, на будущее — учту. Почитала про это дело — действительно, интересная технология, благодарю за информацию.
Ещё бы ссылочку на живой пример ;-)
НЛО прилетело и опубликовало эту надпись здесь
Я подобное меню делал однажды гораздо проще — просто утягивал каждый пункт направо отрицательным полем. Но там тоже было извращение — то ли пришлось порядок пунктов менять, то ли каждому 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
а вот font-size: 0 это ктуто, неужели работает?
Занятно. А можно исходничек в 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.
p.s.
Надо в ТЗ указывать в каких броузерах и в каких ОС должно работать.
Подгонять под все броузеры мира не дело — потому что их воз и маленькая тележка.
у меня стояла задача на IE, FF и Оперу, но я попутно протестила ещё в Konqueror. Честно говоря, да, чую, пока я под всё подгоню — офигею, тот проект столько не стоит :) А что такое «Амайя»?
Амайя — это W3C браузер )
www.w3.org/Amaya/
IE 7 — присмотритесь к промежутку между 1 и 2рой вкладкой.
особенно несостыковка видна при открытой второй вкладке
fixed
не все, переключись на вкладку дома и дачи — баг в том же месте ;)
у меня нет 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: Но за код респект.
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.