Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 99
я часто задумываюсь, что кроме программирования хорошо бы подучить и основы верстки, но честно говоря — после этого топика мне кажется что мне это не дано.
автор — вы молодец, а проделанная работа мне кажется чем-то сродни микрохирургии.
ЗЫ имхо, не надо про Друпал, лучше еще про верстку!
автор — вы молодец, а проделанная работа мне кажется чем-то сродни микрохирургии.
ЗЫ имхо, не надо про Друпал, лучше еще про верстку!
Для полноты пример можно бы было выложить в Сети.
у примера пока доменного имени нет, увы, и именно поэтому я не стала размещать линк в основном посте. Так же — 174.132.129.154/~ndn/
Неплохо. Для Firefox к ссылкам добавьте outline: none;
в опере в правой части макете несходится в паре мест
какая версия оперы?
Опера 10 alpha:
Опера 9.63:
Странности слева, у первого таба несовпадение цвета, на «Земельные участки» активный таб слишком далеко заехал.
Опера 9.63:
Странности слева, у первого таба несовпадение цвета, на «Земельные участки» активный таб слишком далеко заехал.
В IE7 и Safari 3.2.2 тоже несовпадение цвета и проблема с «Земельные участки».
Сложно всё-таки заставить отрисовываться везде одинаково. Но думаю, поправимо.
Сложно всё-таки заставить отрисовываться везде одинаково. Но думаю, поправимо.
хм, проверяйте ещё раз — пофиксено (хотя в опере 9.63 под Линуксом у меня вниз ничего не уползает). Ох, чую, сурово придётся пост апдейтить, но, в любом случае, благодарю за багрепорты :)
У меня — 9,63, и тоже справа не все в порядке.
ФФ 3.0.6, Линукс с родными шрифтами:
img413.imageshack.us/img413/4821/screenshot16.png
но это уже привычная картина на перегруженных графикой сайтах
img413.imageshack.us/img413/4821/screenshot16.png
но это уже привычная картина на перегруженных графикой сайтах
Ещё бы ссылочку на живой пример ;-)
За выполненную работу +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.
Если какому-нибудь пользователю размер шрифтов увеличить захочется или если у него выставлены ограничения на минимальный размер шрифтов, то все ваши героические усилия приводят к обратному результату.
Так что или дальше с бубном танцуйте, или вернитесь назад в свой работе к тому месту, с которого пришлось браться за бубен. IMHO.
browsershots.org/screenshots/1e39ab90687e0dbbce68bb2131c58e38/ — вот Макось и Сафари
browsershots.org/screenshots/33f6cda1f4f043c61cf3cfb100aa3f90/ — вот Макось и Лисичка.
А что касается масштабируемости — всё понимаю, но тут уже — хозяин-барин, увы. Я о фиксированной вёрстке и подобных проблемах честно предупреждала.
browsershots.org/screenshots/33f6cda1f4f043c61cf3cfb100aa3f90/ — вот Макось и Лисичка.
А что касается масштабируемости — всё понимаю, но тут уже — хозяин-барин, увы. Я о фиксированной вёрстке и подобных проблемах честно предупреждала.
Не все так идеально, но в принципе хорошо.
В Chrome 2.0.164 \ Win7 появляются странные линии.
под W7 не тестировалось… в других осях в Хроме та же проблема?
XP, Chrome 2.0.164.0 — так же
сделала небольшой фикс — господа хромоюзеры, проверьте, плз. Если работает — проапдейчу пост.
про п.1 знаю, но так было в макете, и исправление этого бага будет сплошным пииии… пиксель-артом %) Хотя, раз оно уж вот так вот бросается в глаза — надо будет попробовать. С п.2 ещё поразбираюсь (просто у меня Линукс, под него нет Хрома — а browsershots почему-то иногда не выдаёт всей информации). В любом случае — благодарю за замечания :)
xp xp2 chrome 1.0.154.48 аналогично
я только добавлю, что все картинки стоило засунуть в один файл и использовать технику css спрайтов
Ещё бы ссылочку на живой пример ;-)
Я подобное меню делал однажды гораздо проще — просто утягивал каждый пункт направо отрицательным полем. Но там тоже было извращение — то ли пришлось порядок пунктов менять, то ли каждому z-index выставлять руками.
В вашем случае это сложнее, ибо захлёст перекрывает надпись.
В вашем случае это сложнее, ибо захлёст перекрывает надпись.
Я также использовал z-index:; и отрицательный margin для реализации подобного меню: marow.ru/site/unora/
Первоначально меню реагировало на наведение мыши, а надписи на тикетах были текстом, но заказчик очень попросил упростить макет)
На мой взгляд, у автора топика неординарное мышление. Респект!
Первоначально меню реагировало на наведение мыши, а надписи на тикетах были текстом, но заказчик очень попросил упростить макет)
На мой взгляд, у автора топика неординарное мышление. Респект!
> Сразу оговорю, что под «осликом IE» имею в виду седьмую версию — ибо ввиду > массового распространения Висты и третьего сервиспака под WinXP шестой уже > сдаёт свои позиции
Ну это вы поторопились. Хоть глобально в рунете сейчас у IE6 только 15% (что тоже немало, кстати), но на обычных негиковских сайтах его доля запросто достигает 30%.
Ну это вы поторопились. Хоть глобально в рунете сейчас у IE6 только 15% (что тоже немало, кстати), но на обычных негиковских сайтах его доля запросто достигает 30%.
Всегда было интересно при скольких процентах популярности ИЕ6 вебмастера начнут отказываться от него?
не знаю как, я статистике такой не верю и в первую очередь проверяю все на ИЕ6
так как по моим личным наблюдениям — доля эта гораздо больше 30ти.
так как по моим личным наблюдениям — доля эта гораздо больше 30ти.
>при скольких процентах популярности ИЕ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 и не петюкать.
См. цифры:
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%. Это тоже понятно.
Я же хочу узнать сколь низким должен быть процент рейтинга этого недобраузера, чтобы веб-мастера (по крайней мере их большая часть) с чистой совестью отказалась от поддержки этого программного продукта.
Поясню свою мысль более наглядно.
Если во время юстиниановой чумы погибло несколько десятков человек, все это назвали эпидемией.
В настоящее время от чумы погибает около 2,5 тысяч, но при этом об эпидемии речи не идёт.
Майкрософт давно перестал поддерживать ие5, но реальное положение дел зависит не от гигантов, а от рядовых пользователей, которые и создают картинку рейтинга браузеров.
Даже если через 1000 лет ebay.com всё ещё будет поддерживать ие5, это ровным счётом ни на что не влияет. В мире ничего никогда не бывает на 100%. Это тоже понятно.
Я же хочу узнать сколь низким должен быть процент рейтинга этого недобраузера, чтобы веб-мастера (по крайней мере их большая часть) с чистой совестью отказалась от поддержки этого программного продукта.
это делается с помощью 1 изображения и, возможно, jquery если надо :hover
Занятно. А можно исходничек в PSD? Очень хочется самому поиграться :)
По идее главный минус в том, что ссылки при наведении никак не реагируют. Да и подчеркивание в таком меню считаю лишнимю
Убирание подчеркивания тут немного нелогичным выглядело бы, а вот подсчечивание реализовать сложно и грамоздко.
Не все продумали.
Убирание подчеркивания тут немного нелогичным выглядело бы, а вот подсчечивание реализовать сложно и грамоздко.
Не все продумали.
Спасибо.
При попытке применить данные настройки к такому же списку, но без указания width каждого li элемента, получил список как будто с display:block. При этом display: inline ни при каких условиях работать как от него требовалось не собирался.
Немного поискав наткнулся на следующее решение — вместо display: inline использовать float: left,
т.е. будет вот так:
Мою проблему такая замена решила полностью.
За статью спасибо.
Немного поискав наткнулся на следующее решение — вместо display: inline использовать float: left,
т.е. будет вот так:
div#topnav ul.menu li {
float: left;
}
Мою проблему такая замена решила полностью.
За статью спасибо.
chrome 1.0.154.48, все то же + все равно видны несовпадения цветов
У меня Амайя смотрится ужасно.
p.s.
p.s.
p.s.
Надо в ТЗ указывать в каких броузерах и в каких ОС должно работать.
Подгонять под все броузеры мира не дело — потому что их воз и маленькая тележка.
Надо в ТЗ указывать в каких броузерах и в каких ОС должно работать.
Подгонять под все броузеры мира не дело — потому что их воз и маленькая тележка.
у меня стояла задача на IE, FF и Оперу, но я попутно протестила ещё в Konqueror. Честно говоря, да, чую, пока я под всё подгоню — офигею, тот проект столько не стоит :) А что такое «Амайя»?
Амайя — это W3C браузер )
www.w3.org/Amaya/
www.w3.org/Amaya/
IE 7 — присмотритесь к промежутку между 1 и 2рой вкладкой.
особенно несостыковка видна при открытой второй вкладке
особенно несостыковка видна при открытой второй вкладке
Дизайнера приговорить к году кроссбраузерной, семантичной вёрстки!
несовпадения цветов у PNG должны вылечиться после удаления всех чанков
у меня на странице
174.132.129.154/~ndn/business
в IE7, Chrome, Fx3, Opera10 у земельныз участков правое загругление вправо немного уехали. Причем в Fx чуть меньше, чем в остальных
у меня на странице
174.132.129.154/~ndn/business
в IE7, Chrome, Fx3, Opera10 у земельныз участков правое загругление вправо немного уехали. Причем в Fx чуть меньше, чем в остальных
пара мелочей, не важных правда:
вместо
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.
Хотя все это — уже дело вкуса, кому как нравится.
вместо
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 картинки и всё?
И поверх текстовые ссылки?
Может, просто сделать 4 картинки и всё?
И поверх текстовые ссылки?
Действительно. Если на увеличение шрифта не расчитано, то не было смысла так извращаться. Я подобную проблему решил таблицами, не побрезговал.
Тоже сразу так подумал, удивился, что никто не предложил раньше.
Возможно, тут дело не столько в результате, сколько в вёрстке ради вёрстки.
Возможно, тут дело не столько в результате, сколько в вёрстке ради вёрстки.
пришлось бы всё равно извращаться, меняя бэкграунд в зависимости от текущей вкладки. А задача эта ни разу не банальная, учитывая, что вкладка должна быть активной и при выборе дочернего в ней элемента.
Опишите как Вы все это на Drupal натянули :-).
Я сам частенько такими извращениями занимаюсь.
Я сам частенько такими извращениями занимаюсь.
Пожалуйста: habrahabr.ru/blogs/drupal/52601/ :)
Жуть… При таком варианте нужен флеш «без вариантов». Тут уже не до семантики…
PS: Но за код респект.
PS: Но за код респект.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Танцы с бубном для блондинок, или о tabbed menus и хитрой работе с графикой