Неисправимый оптимист
Часть первая, вступительная :)



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

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



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

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



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



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



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





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



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



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

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



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

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



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



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

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

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



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

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




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

@темы: CSS, @дневники, Дизайн

Комментарии
08.08.2007 в 12:57

Неисправимый оптимист
Смотря какой отступ. Если расскажешь подробнее - попробую помочь
08.08.2007 в 20:11

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


09.08.2007 в 10:13

Неисправимый оптимист
Надо добавить параметр padding:10px; в набор свойств того блока, у которого задан полосатый фон
09.08.2007 в 15:22

извините, что я говорю, когда вы перебиваете
Tex

спасибо, спасибо, спасибо!!!!! )))) :jump2:
12.08.2007 в 16:14

[: SolnyWko :]
вот хоть убей, а лучше дай молотком по голове. не понимаю я кужа вы всё это пихаете?? ну ламер я , ну и что блин делать-то теперь?? я читаю, читаю, а понять нифига не могу. куда эти коды пихать и вообще
17.08.2007 в 00:50

У меня есть вопрос - картинка в эпиграфе держится слева. Как сделать так, чтобы она находилась посередине?
17.08.2007 в 01:57

По трафаретам слов играй со мной в любовь...
Меню съезжает вниз.
Всё зделала, что сказано.
body.left{padding-left:10px !important;}
.left #wrapper{width:700px;margin: 0 0 0 -395px !important;padding:0 !important;position:relative;left:50%;//left:49.5%;}
.left #side{width:180px !important;margin:0 !important;}
.left #page-c{width:600px !important;padding:0 !important;}

21.08.2007 в 10:17

Неисправимый оптимист
[: SolnyWko :]? для тебя часть первая, вступительная. Сделаешь как там написано - сможешь использовать css.

X__ScReAm сейчас, к сожалению, нет времени разбираться. Напиши в сообщество diaryCSS

По прозвищу Снейп, после вставки изображения в эпиграф выровняйте его по центру (а вообще - в справке по визуальному редактору всё написано - кнопка "?")
22.08.2007 в 11:51

навсегда ничей
здравствуйте,
у меня вот тоже с одной стороны как у всех, а с другой - не совсем как у всех проблема.
у меня вроде бы во всех случаех все четко и ровно. а в некоторых - меню аж под комменты слева встает ::idiot2
вот мой код:

.right #wrapper{margin:0px auto; width:700px;}
.right #side{width:130px !important; margin:0 !important;}
.right #page-c{width:620px !important; padding:0 !important;}
.right #page-t{margin:0 !important;}

я только начинаю в этом разбираться, поэтому и не могу понять в чем же проблема. бьюсь сутки где-то. прочитал все комменты до конца. все выставлено чтобы избежать частво встречающихся проблем - верно. вот скрины (и дневник тоже открыт если что)
static.diary.ru/userdir/4/3/4/4/43449/23530947.... - коммент с ушедшим влево меню
static.diary.ru/userdir/4/3/4/4/43449/23530927.... - коммент нормальный
static.diary.ru/userdir/4/3/4/4/43449/23530907.... - нормальный вид дневника
22.08.2007 в 11:54

навсегда ничей
и это, там вовсе не 700px в первой строке кода, а 750px! не знаю почему 700 написалось и не изменяется даже (уже пробовал) ::confused
(если первую строчку написать как

.right #wrapper{width:700px; margin: 0 0 0 -395px !important; padding:0; position:relative; left:50%;//left:49.5%;}

все равно ничего не изменяется)
22.08.2007 в 12:06

Неисправимый оптимист
Нужно увеличить ширину основного блока или уменьшить ширину блока контента - ты используешь рамки, но никак не учитываешь их ширины в ширине блоков
22.08.2007 в 12:14

навсегда ничей
::ogo
все так просто?
/после того, как я поменял (уменьшил) ширину блока контента - в тех комментах где было хорошо - так и осталось все хорошо, а в тех комментах, где меню смещалось - меню наместо встало, но между блоками с комментами и меню появлось расстояние ::confused
может тогда рамки нафик убрать?

24.08.2007 в 12:06

Неисправимый оптимист
Lord Haart, нужно просто проситать размеры с учетом ширины рамок
01.09.2007 в 12:52

сталин в юбке
вставляю код из калькулятора, даже не меняя размеры, симг включен и в эксплорере меню всё равно падает вниз =(

static.diary.ru/userdir/2/8/3/2/283255/22943206...
01.09.2007 в 17:05

Неисправимый оптимист
zuss, не увидел проблемы в IE7
09.09.2007 в 15:03

A kid from The Ural's
Доброго времени суток!Спасибо за замечательный урок.

Но у меня возникла такая вот проблема. В IE все отображается как надо, а вот в других браузерах колонка с меню пропадает. Не подскажете как это исправить? Спасибо

Код:
body.left{padding-left:10px !important;}
.left #wrapper{width:700px;margin: 0 0 0 -400px !important;padding:0 !important;position:relative;left:50%;//left:49.5%;}
.left #side{width:140px !important;margin:300px 0 0 0; !important;}
.left #page-c{width:650px !important;padding:0 !important; margin:300px 0 0 0;}

09.09.2007 в 20:00

Неисправимый оптимист
Kevin McLean, воспользуйся генератором кода
11.09.2007 в 16:22

Помойму все очень просто, спасибо, калькуль оч помог)))
12.09.2007 в 12:10

A kid from The Ural's
Tex

Вообще-то я им и пользовался :) Не отображалось. Но потом вручную поиграл с margin, и все получилось
13.09.2007 в 08:32

Неисправимый оптимист
Kevin McLean, именно в играх с margin и была проблема. Проверь свои цифры по формулам в этой записи.
21.09.2007 в 21:16

счастье-это когда все дома. особенно у вас
Здраствуйте,у меня уже обычная ситуация - меню ушло вниз,настройки все проверила,комментарии исправить удалось с помощью данного вами кода - .formcontainer {font-size: 75%;},а на что надо изменить выделенное чтобы при переходе в избранное меню не уезжало?
25.09.2007 в 20:57

АД!!! Я блондинка...
27.10.2007 в 14:06

I will never let you down
извините пожалуйста за беспокойство..

.right #wrapper{width:700px;margin: 0 0 0 -395px !important;padding:0 !important;position:relative;left:50%;}
.right #side{width:180px !important;margin:0 !important;float:right}
.right #page-c{width:600px !important;padding:0 !important;}
.right #page-t {margin:0 !important;}

не могли бы Вы подсказать чтоо тут неправильного?
вставялю код.дизайн остается прежним..
цифры пробовала менять. все равно все по-прежнему..
27.10.2007 в 21:54

Неисправимый оптимист
MeLaNto, попробуй удалить все лишнее из css и оставить только приведенные в твоем посте строки - много лишнего в твоем текущем коде.
27.10.2007 в 23:36

I will never let you down
огроменное спасибо)) с меня бутылка нарзана ессентуки4)
30.10.2007 в 15:06

Same As It Never Was
Tex, а как поместить меню перед записями? (как у тебя)
12.11.2007 в 19:38

Сияй, как солнце; сияй ярче солнца...
Tex , у меня никак не хочет грузиться это большое окно... я все вроде сделала по инструкции...((( че делать? это долго может продолжаться??
12.11.2007 в 20:43

Неисправимый оптимист
Solniffko, понятия не имею :) С такими вопросами лучше в сообщество  diarycss
12.11.2007 в 21:02

Сияй, как солнце; сияй ярче солнца...
Tex да, и еще одно... у меня после применения кода из колонки управления пропало очень многое... например, новая запись, настройки и другое... как это исправить. если такое возможно?
12.11.2007 в 21:12

Неисправимый оптимист
Solniffko, причина не в css. Разбирайся.
И еще раз повторяю - со всеми вопросами не по теме записи - шагом марш в специальное сообщество  diarycss

Расширенная форма

Редактировать

Подписаться на новые комментарии
Получать уведомления о новых комментариях на E-mail