Vlad

Если только не сильно, то могут. Но зелёный должен зелёным остаться.

border-box не всеми браузерами поддерживается, учтите это. А вообще и тот и другой вариант можно использовать, они равнозначны, но с padding более распространен в силу универсальности.

Как на картинке. Блок тянется по ширине и, соответственно, по высоте, уголки фиксированного размера.

Это связано с тем, что padding суммируется с заданной высотой height. Вот здесь почитайте, как это можно обойти. Речь идёт про ширину, но к высоте так же относится. http://htmlbook.ru/blog/shirina-bloka

Вам не кажется, что здесь работает порочный круг? Вы видите, что кто-то этими браузерами пользуется, начинаете использовать их сами, другой в то же время видит, что другие их тоже использует, значит... ну и так далее. В такой ситуации правильнее остановиться и сказать, хватит использовать это старьё. Тогда они уйдут гораздо быстрее.

vertical-align не работает для блочных элементов, только для строчных. Можете сделать таблицей, установить padding сверху, использовать line-height. Что больше нравится?

Задания для конкурса http://forum.htmlbook.ru/index.php?showtopic=27837 Решения сюда выкладываем http://forum.htmlbook.ru/index.php?showtopic=27839

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

В эту тему выкладываются решения задач. Задачи должны быть предварительно выложены на сайт http://jsfiddle.net здесь же указывается только ссылка на них в следующем виде. [ hide ] http://jsfiddle.net/EhDWR/ http://jsfiddle.net/EhDWR/2/ http://jsfiddle.net/EhDWR/3/ [ /hide ] BB-коды пишутся без пробелов. Этот блок скрывает от просмотра ссылки и виден только мне и автору. После завершения времени конкурса все скрытые блоки открываются для всеобщего просмотра. Напоминаю важные правила Запрещено редактировать своё сообщение, в противном случае оно удаляется и решения в конкурсе не участвуют. Если вам требуется внести правки в ссылку или в решение, создайте новое сообщение. Все решения должны сдаваться одновременно, т.е. три ссылки сразу. Если вы не успеваете решить какую-то задачу в срок, тогда выкладывайте имеющиеся. Если возникают вопросы по поводу выкладывания результатов, задавать их в этой теме. Удачного выступления!

Задание 1. Эскиз Уголки фиксированного размера, ширина и высота уголков одинакова, задаётся в пикселах. Задание 2. Блок с тенью Содержит скругления в заголовке и внизу блока. Вокруг блока тёмно-зелёная рамка и тень. Длина заголовка может меняться, соответственно, должна изменяться и ширина блока под ним, но при этом не превышать 250px. Задание 3. Блок с градиентом Полупрозрачная градиентная рамка вокруг блока с градиентным фоном под заголовком и небольшим треугольником. Фон на странице приведён лишь для наглядности эффекта полупрозрачности. Вы можете указать свою картинку или использовать ту, что в примере по адресу http://htmlbook.ru/example/images/redline.png Минимальная высота блока составляет 100px. Скриншоты сделаны в Google Chrome 12. Для всех заданий необходимо выполнить следующие условия. Валидная вёрстка на HTML5. Валидность CSS не важна. Таблицы и их имитация через стили не применяются. JavaScript для решения не требуется. Блоки делаются без внешних изображений. Корректное отображение в браузерах IE9, Opera 11.10+, Firefox 5, Safari 5.0.5, Chrome 12+. Допустимы незначительные отклонения от макета при отображении в разных браузерах. Блоки «резиновые», т.е. тянутся по ширине окна браузера. Результаты выкладывать в специально созданной для этого теме На решение трёх задач отводится три часа времени. Дамы и господа, мальчики и девочки, желаю вам все удачи и побед!

Насчёт <b> спорный момент, для SEO наоборот, стараются ключевые слова выделять жирным, поисковики так лучше повышают "вес" подобных слов. Для вёрстки удобнее через стили жирность задавать, в любой момент можно её убрать, цвет изменить или другие параметры. Для семантики лучше <strong> использовать, чтобы какие-нибудь речевые браузеры осмысленно диктовали этот текст. Как видите, вариантов несколько и каждый будет на себя одеяло тянуть, поскольку смотрит со своей колокольни. Чтобы вам не растеряться в такой ситуации, пока придерживайтесь какого-то одного решения. Потом уже, как ознакомитесь с другими направлениями, вам будет понятнее, что в какой ситуации оправданнее.

Совсем уж олдскульный конкурс можно не делать, но вот усложнить задачи было легко, достаточно добавить IE7, какую-нибудь Оперу 10 и всё, задачи уже не решаются с прежними условиями. Кстати, список браузеров считайте подсказкой к тому, что придётся использовать. Мне кажется, что некоторым участникам придётся тяжело из-за определённого склада мышления. Я конечно не вас, Оксана, имею в виду, а людей, которые мыслят старыми браузерами, потому что в задачах потребуется знание как раз браузеров новых.

Градиенты лучше сохранять в PNG, будет небольшой объём файла и цвета останутся исходными. Но здесь искажения, пожалуй, по любому будут, пусть и не очень заметные, потому что фотография в JPEG, а он цвета "портит", что довольно заметно становится при наложении одного изображения на другой.

Некоторые критерии я уже определил, завтра с утра их опубликую. Большинство ваших пунктов не актуально в силу специфичности задач. Никаких рисунков, никакого JS в задачах не потребуется. HTML-код в принципе тоже минимален, не страницу ведь целиком надо сверстать, а всего лишь один блок. У меня своё мнение по поводу перечисленных вами браузеров, ничего этого не надо. Верстать под следующие браузеры: IE9, Opera 11.10, Firefox 5, Safari 5 (5.0.5), Chrome 12.

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

Ваш вопрос гипотетический или для вас это реальная проблема? Мне непонятно, чем продиктовано расширение xhtml, им довольно редко пользуются.

Зачем верстальщику обязательное высшее образование?

Расширение может не иметь отношения к содержанию, это уже как настроен сервер зависит. Так что если вам требуется расширение xhtml, можете его оставить.

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

Ни JS, ни PHP в задании не применяется.

Нет.

Вот ещё одна мифическая проблема которую себе сами создают веб-разработчики. Скажите что у вас превосходный дизайн, удобная навигация на сайте, интересный контент, множество интересных фишек, посещаемость зашкаливает за все мыслимые пределы. Только вот одно мешает считать сайт идеальным — проблема с полосой прокрутки, не так ли?

У вас несколько неправильно свёрстан блок header, из-за него и возникают отступы. Часть текст располагается ниже блока, а вы этот текст сдвигаете вверх, но пустое место под ними остаётся. Сделайте так. Установите для header относительное позиционирование, а для внутренних элементов абсолютное. Тогда вы сможете задавать им точные координаты относительно родителя header.

У вас несколько неправильно свёрстан блок header, из-за него и возникают отступы. Часть текст располагается ниже блока, а вы этот текст сдвигаете вверх, но пустое место под ними остаётся. Сделайте так. Установите для header относительное позиционирование, а для внутренних элементов абсолютное. Тогда вы сможете задавать им точные координаты относительно родителя header.

Начните с доктайпа и строгого режима. Не знаете что это, тогда прочитайте этот материал. http://htmlbook.ru/samlayout/rezhimy-brauzerov/