Часть первая, вступительная



Почти пять лет оформление дневников ограничивалось выбором шрифта и пары цветов.

С появлением сервиса CSS стало возможно всё.



Это платный сервис, но, пока идёт отладка и тестирование, подключить и пользоваться им можно совершенно бесплатно.

Для этого идем в Настройки › Профиль, внизу в поле «счёт» вводим какую-нибудь сумму, например, 999. Затем Настройки › Набор сервисов, здесь выбираем любой пакет включающий CSS. Жмем Посмотреть счёт, затем Оплатить.



О переходе на реальную оплату администрация обещала сообщить заранее.



После подключения (возможна небольшая задержка) в разделе настроек «Оформление дневника» появляется большое поле для ввода инструкций CSS (его трудно незаметить). Именно в это поле мы будем вписывать код из второй части урока.



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





Часть вторая, научно-практическая



Сегодня, я расскажу как с помощью CSS можно создать дневник фиксированной ширины и разместить его по центру страницы.



Для этого нам потребуется: идея, знание основ математики и немного терпения.

Мы будем модифицировать CSS для трех слоев: wrapper, side и page-c



Во-первых, определяемся: какой ширины мы хотели бы сделать наш дневник.

При выборе ширины дневника наиболее значимую роль играют 2 фактора: разрешение экрана и максимально допустимая ширина изображения на дневниках (сейчас это 700 пикселей)



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



По статистике, подавляющее большинство пользователей рунета смотрят на мир в разрешении 1024х768 и более.

Из 1024 px примерно 24 px занмает полоса вертикальной прокрутки страницы.

То есть на всё про всё у нас остается 1000 px, в которые мы можем поместить дневник, не опасаясь за его здоровье.



Минимально возможная ширина дизайна складывается следующм образом:

ширина колонки меню + величина отступа + ширина зоны контента (ширина изображения 700px + величина отступа + ширина блока аватара на странице комментариев) + оступы для всего дневника



Продолжаем разговор

Модификацции подвергаются 3 блока с id:

wrapper - основной блок дневника, именно в него помещаются все остальные блоки

side - блок меню

page-c - блок контента



Рассмотрим универсальный пример для блочного дизайна:

Код c классом .left для дневников с левым расположением меню, .right - с правым: .left #wrapper {width: 790px; margin: 0 0 0 -395px !important; padding: 0 !important; position: relative; left: 50%;} .left #side {width: 180px !important; margin: 0 !important;} .left #page-c {width: 600px !important; padding: 0 !important;} body.left {padding-left: 10px !important;} .right #wrapper {width: 790px; margin: 0 0 0 -395px !important; padding: 0 !important; position: relative; left: 50%;} .right #side {width: 180px !important; margin: 0 !important;} .right #page-c {width: 600px !important; padding: 0 !important;} .right #page-t {margin: 0 !important;}

Пример без цетрования (блоки будут слева на странице)

Код c классом .left для дневников с левым расположением меню, .right - с правым: .left #wrapper {width: 790px; margin: 10px !important; padding: 0 !important;} .left #side {width: 180px !important; margin: 0 !important;} .left #page-c {width: 600px !important; padding: 0 !important;} body.left {padding-left: 10px !important;} .right #wrapper {width: 790px; margin: 10px !important; padding: 0 !important;} .right #side {width: 180px !important; margin: 0 !important;} .right #page-c {width: 600px !important; padding: 0 !important;} .right #page-t {margin: 0 !important;}

Где: width - ширина блока, margin - величина внешнего отступа от границ блока, padding - величина внутреннего отступа от границ блока, position - определение типа позиционирования блока, left - величина отступа от левого края окна броаузера при данном типе позиционироания. Подробнее - позже...



Откуда цифры и как считать?

Для начала вам необходимо рассчитать 4 параметра, назовем их X, Y, Z, K (в скобках приводятся цифры из Примера 1)



X- ваша ширина блока текста (600px)

Y- ваша ширина блока меню (180px)

Z=X+Y+ваш отступ между меню и текстовой зоной (790px=600px+180px+10px)

K= (Z/2) то есть (790px/2)= 395px



Подставьте в код получившиеся значения X, Y, Z, K.

Не забывайте указывать единицы измерения px для подставляемых значений, значение K в коде должно быть отрицательным.

Код c классом .left для дневников с левым расположением меню, .right - с правым: .left #wrapper {width: Z; margin: 0 0 0 -K !important; padding: 0 !important; position: relative; left: 50%;} .left #side {width: Y !important; margin: 0 !important;} .left #page-c {width: X !important; padding: 0 !important;} body.left {padding-left: 10px !important;} .right #wrapper {width: Z; margin: 0 0 0 -K !important; padding: 0 !important;position: relative; left: 50%;} .right #side {width: Y !important; margin: 0 !important;} .right #page-c {width: X !important; padding: 0 !important;} .right #page-t {margin: 0 !important; }

Автоматический калькулятор - генератор кода

Благодаря  bokonist'у на свет появился замечательный генератор кода, которй автоматически рассчитает все за вас, на основе описанного в уроке алгоритма.

Вводите 3 цифры - на выходе получаете готовый к работе css код.



Важно!

Прежде чем использовать дизайн дневника с фиксированной шириной настоятельно рекомендую включить в настройках Просмотра дневника опцию "большие изображения отображаются с локальным горизонтальным скроллбаром (аналогично тегу [simg]..[/simg ])" и уменьшить размер шрифта до 8px (затем, размер подбирается экспериментально, в зависимости от выбранного типа шрифта).



Вот и всё. Замечания и предложения в комментарии



PS. Часто и очень часто задаваемые вопросы



1. Памагите! Меню уехало вниз! Верните все на место!

- Проверьте, включили ли вы в настройках Просмотра дневника опцию "большие изображения отображаются с локальным горизонтальным скроллбаром (аналогично тегу [simg]..[/simg ])"?



2. У меня на странице комментариев меню сместилось вниз, горизонтальный скролл для картинок включен. Что делать?

- Попробуйте уменьшить размер шрифта в блоке добавленя комментария - добавьте в css строку:

.formcontainer {font-size: 75%;}

*Размер шрифта (в процентах) подбирается индивидуально