Ниже расположен блок #extra, в котором находятся интересные звездочки. Во-первых, рейтинг очень легко выводить из скрипта (нужно лишь вывести <div class="rating r0"></div>, где число, выделенное полужирным шрифтом, принимает значение от 0 до 5 и показывает количество звездочек). Звездочки хранятся в одном фоновом изображении, поэтому никаких подгрузок не надо.
Кроме того, внутри блока #extra расположено 5 ссылок, позволяющих поставить оценку статье. В финальной версии на них будут навешены какие-то настоящие URLы, либо AJAX-запросы. Пока же ни в коем случае не нажимайте на звездочки — это может привести к форматированию жесткого диска на низком уровне и запуску программы самоуничтожения, встроенной в каждый x86-совместимый процессор!
Для каждой из звездочек-ссылок также выводится всплывающая подсказка, если на пару секунд перестать дергать курсором.
Как видно, баннер 728x90 не влезает. На всякий случай я сделал так, чтобы все, что не попадает в ширину контейнера (657 пикселей), обрезалось. Мало ли, картинка какая широкая попадется… Иначе верстка будет "разъезжаться", а это намного хуже, чем отсутствие части изображения.
Зато такой же отлично влез между шапкой и контентом. По-моему, даже смотрится неплохо.
Баннер размером 160x600 пикселей отлично влазит в блок #sidebar справа, предназначенный специально для рекламы.
Как видно, ширина макета зафиксирована. Сбоку добавлены полоски, справа — кубик. Красота, одним словом!
Все элементы на странице сверстаны таким образом, что прекрасно реагируют на всяческие непредвиденные ситуации — непомерное увеличение количества текста во всех блоках (в том числе в боковых — высота до 4000 пикслей), добавление новых пунктов меню (в разумных пределах).
Я всячески постарался сохранить разметку страницы понятной и простой, где каждый элемент несет какую-то определенную нагрузку, а всяческие «заглушки» и прочие <br style="clear: both" /> исключены.
Разумеется, макет выглядит одинаково в Mozilla Firefox (Windows/Linux), Opera (Windows/Linux) и IE6 и старше (о да, дорогие пользователи Windows 2000, почему вы еще не сдохли обновили свой древний IE5.5 на что-нибудь поновее?!) — я всегда верстаю с оглядкой как на стандарты, так и на используемые браузеры.
Разумеется, сверстано все по стандартам W3C — используются xHTML 1.0 и CSS 2.1.
Шапка получилась, пожалуй, самой трудной частью работы.
Интересно то, что я сверстал ее слоями. Сначала выводится закругленный бордюрчик, потом облака, и только потом кубик. Причем в верстке нету лишних блоков, и семантика абсолютно не пострадала!
Пожалуйста, не пробуйте нажимать на кнопку поиска наверху!
