Viper

Сразу отмечу, что сделано хорошо, но есть еще что можно улучшить) 1. Параметры: при вводе вручную минусовое значение, порции отмечаются. Не хватает валидации по всей форме. Зачем в span.txt-title - cursor: pointer? 2. Бокали: Всплывающие хинты к бокалам лучше(и уже можно) делать без js. Хинт должен убираться, если мышка выходит за пределы изображения. По заданию нужна была возможность выбора только 1-го бокала? 3. отсутствуют <h2> и <h1>. 4. зачем на #ingredients .sign-decor - cursor: pointer? И хинт сделан не лучшим образом. 5. на кнопке "Загрузить" присутствует неприятный переход между типами курсоров... 6. <header> бессмысленно использовать как контейнер только для логотипа, ИМХО. 7. Хинты в полях ввода, по моим соображениям, лучше делать через title или placeholder, ИМХО.

Это решать тебе, всем не угодишь) П.С. Лично я, закрываю все теги.

Ты уверен, что тебе это нужно?

1. <section> не предназначен(семантически) для использования в качестве врапов или визуального разбития сайта на секции, как у вас. Для этих целей существует <div>. 2. бессмысленно использовать <header> в качестве контейнера для одного лишь логотипа. 3. Бессмысленно и не семантично использовать <a> без href в качестве кнопочек. Как, например, у вас сделанны кнопки навигации в слайдере. 4. <menu> использовано не по назначению - _http://forum.htmlbook.ru/index.php?showtopic=36592 5. абсолютно не понятная логика использования вами тега - <article> 6. сомнительное использование <footer> Допустим, ну хоть синтаксическую ошибку(";") там исправьте. Или удалите, они-то(стили) у вас даже не работают)

5-й вариант лучший из всех(15-ти). Но с цветами нужно немного поиграться... В нем я вижу идеальную для вас идею, которую стоит взять за основу, ИМХО. Во втором еще что-то есть... Но его явно нужно улучшить/доработать... ИМХО.

Эм... а какая разница между 7, 8, 9? Градиент разный что-ли? Понравился стиль первой, но если бы его еще доработать: больше идейности добавить, например, какую-то "изюминку"...

Воссоздайте нормально(со всем необходимым) этот проблемный код, например, тут: _http://jsfiddle.net/

_http://www.jimcarrey.com/ - этот? Да, на флеше. , а где на этом сайте вы увидели хотя бы одну "необычную идею"? 1. Бездумное(мягко говоря, не логичное) применение семантических тегов, ИМХО. 2. отсутствие на некоторых страницах <h1> 3. CSS файл написан отвратительно, как будто бы начинающий верстальщик на быструю руку клепал прототип, ИМХО. Или у меня, просто, завышенные требования... 4. зачем была использована библиотека jQueryUI? Не смог найти в ней необходимости... 5. Жукто неудобен... ИМХО, конечно же. 6. Скопировал с исходного кода: ... <menu id="about-nav" style="position: fixed !important margin: -20px 0 0 0;"> ... <header> <a href="/"><img src="/images/logo.png" alt="Anastasia Barashkova" title="На главную страницу"></a> </header> <header> <a href="/"><img src="/images/logo.png" alt="Anastasia Barashkova" title="На главную страницу"></a> </header> и тд... П.С. Не понравилось... Сделано "понтово", но не качественно(ИМХО)...

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

Разницы по обработке, на сколько я знаю, нету, но думаю - незначительно второй(группировка). Ну и естественно, что второй способ удобнее и компактнее.

Лучше, например, так: .apa-div{} .apa-span{} .apa-strong{} Советую ознакомиться с "Верстка независимыми блоками". Используя глобально каркас стилей, верстка у тебя получается не "гибкая", усложняется поддержка и ре-дизайн, замедляется обработка(и применение) таблиц стилей. Да, CSS кешируется - одна из причин, почему вес стилей не столь существенный фактор: загрузиться он N раз, а обрабатываться будет постоянно.

Их просто немерено... Плагины: Yslow, Page Speed, в Firebuge закладка - Сеть, различные Profiles(для js) и Timelines и тд... Онлайн тесты, например: _http://womtec.ru/2010/09/web-site-speed-check-tools/ Меньше каскада в CSS - больше скорость. Но каждый сайт нужно анализировать отдельно, а не бросаться бездумно в минимализм... П.С. "Скорость рендеринга страниц: исследования, замеры, автоматизация": _http://video.yandex.ua/users/ya-events/view/275/?cauthor=ie6-exe&cid=1

Под "графикой" я подразумевал более обширное понятие) - "Но графика - это не только картинки. Это: изображения, фото-галереи, графики, диаграммы, таблицы(графические), анимационные картинки, видио-галереи и тд... " Хотя, да, вы правы, с утверждением - "Только" я погорячился) и термин "графика" не сильно подходит под описание назначения этого тега, просто чаще всего это именно "графика" и код.

Делать каждое определение через отдельный <dl> можно(по другому - идей нету...), но "правильно" ли это будет, решать тебе. У семантике нету чётких аксиом. Я бы не делал это через <dl>, "термин-значение" не очень подходит под определение данной ситуации, ИМХО. Как я бы, наверное, поступил в данной ситуации: <article class="content clearfix"> <h1 class="title">форекс c альфа-банком</h1> <section class="grid_4 alpha"> <h2>работайте где угодно</h2> <p>Свобода и независимость: торговля на валютном рынке дает Вам возможность работать там, где Вам удобно. Вам лишь нужен выход в интернет.</p> </section> <section class="grid_4"> <h2>работайте когда угодно</h2> <p>Удобство и прозрачность: Вы можете торговать в любое удобное для Вас время. Рынок открыт для вас 24 часа в сутки, с понедельника по пятницу.</p> </section> <section class="grid_4 omega"> <h2>столько, сколько нужно</h2> <p>Новые возможности: Ваш торговый счет и объем вашей прибыли ограничен только Вашими знаниями и следованию правилам управления капиталом.</p> </section> </article>

"термин-описание" - это <dl>/<dt>/<dd> ) <figure> Только для графики. Но графика - это не только картинки. Это: изображения, фото-галереи, графики, диаграммы, таблицы(графические), анимационные картинки, видио-галереи и тд...

1. отсутствуют hover на ссылках 2. нужно задавать предел в width, у тебя на определенном этапе уменьшения ширины экрана, элементы налазят... 3. ссылка "перейти на сайт альфа-форекс" является заголовком? Заголовком чего? 4. тег <section> не предназначен разбивать сайт на секции, как можно было бы подумать, для этих целей есть <div>. 5. какую логическую составляющую несет в твоем случае <figure> и <figcaption>? графики внутри я не наблюдаю... 6. section.content на этой странице логичнее сделать <article>

Попробуй так: -moz-box-shadow: 0px 0px 10px #999, inset 0px 0px 50px #ddd; -webkit-box-shadow: 0px 0px 10px #999, inset 0px 0px 50px #ddd; box-shadow: 0px 0px 10px #999, inset 0px 0px 50px #ddd; П.С. Стили без префиксов необходимо(лучше) писать последними.

Это тень(box-shadow) от блока, а не от изображения, если я правильно тебя понял) Эт я так "игрался", эксперементировал Немного переделал(убрал тень и увеличил размеры круга): _http://jsfiddle.net/webviper/PWLsv/6/

Разве js свойство - tagName не работает в IE?

вариант без js: _http://jsfiddle.net/webviper/PWLsv/4/ (update) П.С. Transform есть смысл оставлять только для webkit - в других тормозит) Для адекватной работы(без анимации) в IE нужно немного изменить размеры. А вообще, интересная задачка, поэкспериментировал...)

за такую цену, очень даже неплохо... ИМХО. Да - "небольшой мусорник" с js сделали и да - мелкие "недо-баги" есть, но, опять же, за такую цену сложно найди адекватное "качество"(как здесь), по крайней мере, среди, например, киевских веб-студий. Могу предположить, что это случилось из-за отсутствия ТЗ, ИМХО.

1. не везде есть hover у ссылок 2. жуткие названия у class'ов 3. ошибки валидации 4. бессмысленный доктайп и устаревшие методы верстки: как минимум округлять углы уже давно выгодней(и нужно) с помощью border-radius. 5. Title Меню и текст "вход" на кнопке - изображения 6. у кнопки type="image", а должен быть "submit" 7. цвет текста в форме ввода авторизации и в футере - "смерть дальтоникам" 8. отсутствие <h1> 9. ссылки в форме авторизации "прыгают" при наведении.

Жесть... ) А русскоязычный наставник тебе не нужен?) Только по этой причине я добавил Макеева)

Наставник тебя не сможет научить тому, чему сможет научить работа(в своем идеале) - не фриланс, ИМХО. Из всего выше сказанного, как мне кажется, тебе нужен только аналитический, систематический подход к изучению материала - а это и есть профессиональный подход, который обязывает...ИМХО. Возможно, тебе просто не хватает терпения идти "шаг за шагом", а не хвататься за все сразу), что и приводит к подобным размышлениям...?

Да, нужно <ul> - семантичнее. <menu> - для веб-приложений. Может и имеет... но я не вижу в этом смысла, так как текст внутри <figcaption> не будет непосредственно касаться соответствующего изображения. Не нужно везде, где вы видите графику на сайте, питаться "вписать" ее в <figure>: этот тег служит для группировки графики и связи ее с поясняющим текстом. В данном случае, даже если бы текст и относился непосредственно к изображению, в <figure> не было бы пользы, так как все ее содержимое - статья(на данной странице), и это может вызвать "семантический конфликт", как при использовании, например, WAI-ARIA атрибутов в структурных тегах.