С Новым Годом и обновлением!

Всех с наступившим Новым Годом! Желаю всем начать его с правой ноги и провести его наилучшим образом. По случаю нового года я решила обновить на сайте дизайн. Точнее, сам дизайн остался прежним, но я его апгрейднула до новой версии. Напомню, что предыдущую версию я скачала с сайта Тайлера. Он был сверстан на одних <div>’ах, что мне очень не нравилось, точнее, не нравилось визуальному редактору uCoz’a, который имеет обыкновение эти <div>’ы не закрывать. Я обыскала инет в поисках оригинала этого дизайна, чтобы сверстать его самой, но тщетно. Не было ни одной зацепки, которая вывела бы меня дизайнера. Незадолго до Нового года я совершенно нежданно и негаданно наткнулась на оригинал этого шаблона в списке шаблонов Smashing Magazine. Я искала там приятный дизайн для blogger’а одному человеку и внезапно нашла вот что:

Одного момолетного взгляда на этот шаблон мне хватило, чтобы определить, что создал его тот же самый дизайнер, который создал и мой. Я перешла на сайт этого дизайнера, которого зовут Evan Eckard, и сразу же нашла то, что так долго искала - дизайн моего блога!

Называется этот дизайн NotePad Chaos, что переводится примерно как «хаос в блокноте». (А предыдущий красный шаблон называется Desktop Chaos, то есть «хаос на десктопе». Кстати, даже не знаю, как «десктоп» по-русски. Заглянула в словарь, а там «рабочий стол» о_О") В общем, этот шаблон изначально предназначался для WordPress’а, но он стал настолько популярным, что люди уже переделали его под Blogger и Drupal и выложили переделки прямо в его блоге. Ну, мне роднее всего WordPress, поэтому я скачала оригинальную версию. Что еще приятнее, Эван создал вторую версию шаблона, где сделал дополнительный блок под виджеты и даже закачал PSD, с обеими версиями шаблона *_* За PSD ему отдельное громадное спасибо, поскольку оригинальная верстка, где динамические элементы являются частью фона, меня ну никак не устраивала. Вот так в оригинале выглядят первая и вторая версии дизайна:

NotePad Chaos v1 → ← NotePad Chaos v2

Я скачала PSD обеих версий, скрестила их и получила гибрид:

Сама таблица с контентом расширилась до размеров второй версии, но при этом сохранила двухколоночную структуру первой. Кроме того, из первой версии остались три висящие под поиском кнопки (ух, как же я с ними намучилась) а также кнопка Smashing Magazines.

Во второй версии она тоже есть, но там она менее интересная (без всплеска). Думаете это JavaScript? Нет, простой CSS. Я в дизайне страницы вообще никакие скрипты не использовала, чтобы страница корректно отображалась даже у тех, кто скрипты отключает.

Кстати, я пофиксила все баги с дизайном в Internet Explorer! Оказалось, что звезды рейтинга расползались из-за размера шрифта заголовка, которые они наследуют о_О" Внутри этих звезд рейтинга есть текстовые цифры о_О Так вот из-за их величины в эксплорере эти звезды и разъехались. Я долго в это врубалась, поскольку эти цифры невидимые. Но большие… Но невидимые… Короче, пофиксила баг с рейтингом. Везде ввела статическую табличную конструкцию, так что дизайн теперь надежный, прочный и при случайно незакрытом <div>’е никуда не уедет.

Но после введения табличной конструкции декоративные закладки с датами страниц сместились, поскольку не могли выходить за пределы статической таблицы. В стилях было прописано positition: absolute и закреплено на текстом краткого описания, у которого тоже было прописано position: absolute. Если объект absolute вложить внутрь другого объекта absolute, то вложенный объект получает position:relative относительно внешнего absolute о_О Но поскольку все позиционированные <div>’ы я убрала, то пришлось ивратиться и ввести в вид материалов пустой элемент absolute, в который уже и вложен бокс с датой. Он нормально отображается во всех браузерах, которые я тестила. А в тех браузерах, где объект absolute не считается relative относительно родительского absolute, эти боксы с датами отобразятся на минус сто пиксилей от начала координат, то есть от области экрана. Проще говоря, они отобразятся за пределами экрана, поэтому владелец нестандартого браузера их просто не увидит. Ну и фиг с ним. Главное, что мой сайт отображается теперь корректно во всех стандартных браузерах, включая IE! Ура, товарищи!