Leaderboard

Здравствуйте. Прошу оценить качество верстки. Сделала задание №1 из http://divhack.com/node/60. Проверяла в IE7+, Safari, Chrome, FF, Opera последних версий. Правда, размеры шрифтов для Arial специально не подбирала, а оставила, какие были оригинале. Вот сама верстка макета Макет.jpg В первую очередь интересует семантика, грамотность выбора свойств, явные ошибки. Буду признательна за любую конструктивную критику! Спасибо!

.hackcss — любой элемент с классом "hackcss" * + *.hackcss (эквивалентно * + .hackcss, звездочка специфичности не меняет) — любой элемент с классом "hackcss", непосредственно следующий за любым элементом (т.е. не первый ребенок у своего родителя). * ~ *.hackcss (эквивалентно * ~ .hackcss, звездочка специфичности не меняет) — любой элемент с классом "hackcss", идущий после любого элемента (т.е. тоже не первый ребенок у своего родителя). Если первый див является первым ребенком родителя, к нему применяется только правило для .hackcss. Если перед ним идет <br> — он уже не первый ребенок, поэтому к нему применются оба правила. Второй див всегда не первый ребенок, поэтому к нему всегда применяются оба правила. IE6 соседских селекторов тупо не понимает. IE7-8, по идее, понимает +, но не должен понимать ~ (насколько мне известно). По-моему, всё логично

Точно? http://jsfiddle.net/6NKb5/2/

1) нужно глянуть на сам шаблон (к стати, чем по вашему отличается шаблон от макета? ). 2) с чего это вы решили что "мы" с радостью возьмемся за задание? 3) цена вытекает из объема работы, а его не видно..., вобщем см. пункт №1.

/telepathy mode on Проблема именно в верстке. Уберите часть текста из футера. /telepathy mode off Но если быть точнее, то проблема в том, что текст выше футера. Он вылезает снизу футера и создает полосу прокрутки. Поэтому футеру надо поставить "overflow: hidden". Но без html-кода этого нельзя было узнать. Правда?

Плохие примеры — с выключенным сглаживанием, в IE сглаживание своё, независимое от ОС. Если включить сглаживание в ОС (clear-type), будет везде примерно как в IE. По-другому не лечится (не считая архиизвратных костылей с text-shadow). Имхо, XP и так вымирает, а доля XP без сглаживания падает еще быстрее (я вообще не понимаю, откуда эти XP без сглаживания берутся — сколько сам ставил, у меня всегда сглаживание по умолчанию было включено!), так что можно особо этим не заморачиваться. Конечно, если именно такая XP у Самого Главного Заказчика — тогда хуже...

По-моему, все хорошо. Не нашел каких-то ошибок. Единственное замечание - стоило задать max-width контейнеру, чтобы страница растягивалась не на всю ширину(при этом фон все-равно должен быть на всю ширину). На моем разрешении 1600х900 страница не очень хорошо смотрится из-за растянутости. Да, и макет слишком простой. Если вы уже знаете, что такое кроссбраузерность, то не стоит тратить время на такие макеты. Ищите интересные, сложные и непонятные Вам макеты. Только верстая их, Вы сможете научиться новому.

О Бог мой! Еще кто-то под ИЕ6 верстает!

Да!!!!

1. По разметке — Чак Муссиано и Билл Кеннеди "HTML и XHTML. Подробное руководство". Сам не читал, html в основном учил по книге а-ля "для чайников/блондинок" (Эрик Фримен, Элизабет Фримен "Изучаем html, xhtml и css" — только для новичков, многих нюансов нет, но зато позволяет лекго и быстро въехать в азы) + htmlbook + w3c + блоги. 2. По css лучшей считается Эрик Мейер "CSS. Каскадные таблицы стилей. Подробное руководство", но именно в качестве учебника она не очень хороша, больше как справочник. 3. Для освоения CSS на практике — Дэвид Макфарланд "Большая книга CSS". Есть по CSS3, но в целом автор предпочитает "не выпендриваться", а использовать действующие стандарты, поддерживаемые максимальным кол-вом браузеров. Как раз такая книга, которая превращают новичка, "немного знакомого с html и css", в верстальщика)) 4. Кристофер Шмидт "CSS. Рецепты программирования" — справочник по основным часто необходимым техникам + некоторые довольно продвинутые техники. Довольно много есть по html5 и css3, есть также раздел по взаимодействию с JS (почти всё по jQuery). 5. Дэн Седерхольм "CSS ручной работы". Для оттачивания некоторых продвинутых техник, стоит читать тогда, когда уже сможешь довольно легко верстать с макетов, хотя бы с относительно простых. Как раз много по CSS3. У меня лежит недочитанная, "на закуску", когда буду действительно хорошо знать вёрстку. P.S. Книги, позволяющей выучиться с "нуля" до хорошего верстальщика, где одинаково полно рассмтриваются и html4 + css 2.1, и новые html5+css3, просто нет =) Если предпочтительно именно изучение по книгам, то понадобится минимум две-три. Сам думаю о покупке, но понимаю, что будет много повторения, учитывая уже прочитанное. Согласен, как справочник — идеально. Но по книгам интереснее. И в начале учиться по ним легче, меньше опасений, что упустил что-то важное.

Насколько я понял, вы пытаетесь реализовать то, что люди триста лет назад реализовали в таких скриптах как SlimBox, LightBox Технология там немного другая. Каждой картинке добавляется некий rel="uniqueID", по которому срабатывает действие скрипта.

странно что файл не в домене может просто файл не находит..

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

Svatov, за ИЕ6 заказчик должен душу мне продать!)

Одной оберткой, имхо, не отбиться. Кратность высоты контента высоте орнамента же не гарантирована, а сдвинутый орнамент у нижней границы - безобразие. И это не считая нетривиальностей при стыковке углов... Я бы посоветовал как раз взять border-image для нормальных браузеров, а старью оставить деградацию до обычного бордера (solid, dotted или double - по вкусу, я бы выбрал последнее).

Совместными усилиями с Илюхой (а на самом деле одним Илюхой) удалось соорудить кросс решение. Через SVG в base64. Хром подвёл зараза, но удалось кое-что и там починить. В общем два решения выношу на обозрение. 1) http://jsfiddle.net/bj7Jk/17/ (Хром подвёл) 2) http://jsfiddle.net/bj7Jk/21/ (Кросс)

впервые вижу человека, который буквально с полуслова все понял и сказал в точку! В большинстве своем, оптимизация - это развод и лохотрон. Вы только представьте себе, туристический сайт только открывается и ему оптимизатор говорит мол: мы выведем ваш сайт (при чем по ключевому запросу, который считается самым конкурентным) в десятку лидеров! Я не один раз присутствовал при подобных речах.

Текст макета читабелен?...А на вашем сайте?..из-за чего? наверное из-за неправильного background у боди, там блик только по центру вверху а не на весь макет. Потом, если уменьшали масштаб то сделали бы пропорциональные отступы...вы нарушили восприятие самой задумки дизайнера. Картинку-лого вырезали не правильно..вам глаз не режет? Во второй колонке должны быть три абзаца..но то такое...эрунда. Рейтинги Кинопоиск и ИМДБ сделаны полностью картинкой...как думаете каждый раз будет меняться вся картинка или только числа?...это часть того что бросается в глаза не смотря даже в код. Хотя решение в футере мне больше понравилось чем мое.

Привет, други! Как поставил мне задачу заказчик. Все фикс. Абсолютно все блоки фиксированной шириной и длиной. Справа белые кнопки - ссылки. Блок под хедером - тоже со ссылками(двумя, картинка и текст). В описании фильма есть оценки - 6.0 и 6.1. Т.е. слева от них блок к которому они относятся. Слайдер листает сразу по 5 фотографий. Обратите внимание на "ухи" слайдера - они одного фона с блоком. Скролл-бар справа от комментариев я не верстал, т.к. отпала необходимость у заказчика, но для тренировки можете сверстать В футере стрелочки - это якорь наверх. Еще есть один маленький косячок. Дизайнер немного на рассчитал размер и сделал мин. ширину в 1055пк. В общем смотрите сами, но я все подогнал под 1024 без скролла. p.s. так как все фикс, то можно вставлять блоки прямо картинками, но так не интересно, так что юзайте css3 И будьте внимательны к детальками p.p.s. в портфолио размещать работу не рекомендуется, т.к. это будет реальный сайт(ну заказчик попросил).

Кого это волнует?