Часть первая, вступительная
Почти пять лет оформление дневников ограничивалось выбором шрифта и пары цветов.
С появлением сервиса 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: 790 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: 790 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: 790 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: 790 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%;}
*Размер шрифта (в процентах) подбирается индивидуально