Разделы Сайта АниДо

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

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

Desktop Chaos

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

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

NotePad Chaos v1 → NotePad Chaos v1 NotePad Chaos v2 ← NotePad Chaos v2

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

NotePad Chaos v1.5

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

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

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

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

Просмотров: 3496 | Автор: Shizuku | Рейтинг: 4.5/4
Теги: Smashing Magazine, Desktop Chaos, Шаблон, дизайн, wordpress, NotePad Chaos, Design, Evan Eckard, PSD, блог


Комментарии:

0 good bad
no avatar Psydaydoopema | unanvaniumuth@gmail.com | 24.09.12 12:59
Спасибо за интересный пост. Да и в целом хочу отметить что у вас весьма интересный блог. Но не понятно почему вы на нем не зарабатываете? Пишите интересные статьи, но совсем нет рекламы. Просто я тоже веду несколько блогов и очень советую вам попробовать вот эту партнерку для блогеров.

0 good bad
no avatar annalustikova | annalustikova@gmail.com | 16.11.11 04:28
Спасибо автору это на по моему мнению тоже необходимо познавать.

0 good bad
no avatar Aliya | alia_083@mail.ru | 11.04.11 21:08
привет как называется это песня ? заранее спасибо ))) очень классная песня: вот ссылка

http://hapyto.ucoz.ru/index/8-84718


Имя:
E-mail:
Сайт:
Текст:
Каптча:
0

Новые Посты АниДо
0

Аниме Наруто ModBlackmoon Design 7 Floor

В этом блоге публикуются полезные заметки о
программировании, дизайне и сайтостроении, а также
переводы манги, видео и электронных книг на русский.
Все права на текстовый контент принадлежат хозяйке сайта. При копировании материалов с этого сайта обязательна активная ссылка на источник!
Google · Автор дизайна Evan Eckard, а Хостинг от uCoz