пятница, 09 февраля 2007
13:03

Уроки diaryCSS: Дневник фиксированной ширины по центру страницы

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



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

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



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

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



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



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



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





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



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



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

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



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

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



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



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

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

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



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

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



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

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

URL
Комментарии
15.02.2007 в 17:04

Zarrie
аааа! спасибо огромное!! всё получилось.=))) сама бы никогда не разобралась.. ты - гений!!))
URL
15.02.2007 в 17:13

relish
the darkest night is just before the dawn.
Tex давно включено.

иначе я не задавала бы вопросов...
URL
15.02.2007 в 17:37

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

вот мои коды, может, что неправильно..

.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;}
URL
15.02.2007 в 20:35

Tex
Неисправимый оптимист
relish, Zarrie, уточните еще раз, пожалуйста, что не получается с описанием проблемы и конкрентной ссылкой или скриншотом.

URL
17.02.2007 в 12:14

bokonist
fail better
Забавно, уже неделю работает мой «калькулятор», а никто не сказал, что он выдаёт нерабочий код :) Теперь всё правильно + пара небольших улучшений.
URL
17.02.2007 в 14:22

Tex
Неисправимый оптимист
bokonist, а что не рботало?
URL
17.02.2007 в 14:39

bokonist
fail better
Tex, не было указано «px» в восьми местах.
URL
17.02.2007 в 15:47

end
Умереть — это ничего; ужасно не жить.
ах да.. вот что я давно хотела спросить. Зачем расставлять !important? Дайри не распознает сам, что важнее, а что нет? =_= Извините, если вопрос тупой )
URL
17.02.2007 в 16:34

bokonist
fail better
end, первая буква CSS обозначает Cascading — Каскадные. Каждый селектор имеет свой вес: универсальный селектор (*) весит 0, селектор тега весит 1, селектор класса 10, селектор id весит 100. Например в ситуации

#side .menuSection{color:red}

#side div{color:red}

цвет у блока будет красный. Постфикс !important выносит правило на уровень выше любого селектора без этого постфикса:

div{color:red !important}

#side #lastComments{color:red}

опять победит первое правило. Мы используем его чтобы не обращать внимания на то, что написано в базовом шаблоне.
URL
17.02.2007 в 16:43

end
Умереть — это ничего; ужасно не жить.
то есть, к примеру, вставленный мною .side {color:red;} не будет действовать, если в базовых стилях дайри прописано #side {color: Black;}?
URL
17.02.2007 в 16:54

bokonist
fail better
end, да, потому что селектор #side сильнее. Только в html-шаблоне дневников нет блока с таким классом (обозначается точечкой в стилях и class="side" в html), только с id (# в стилях и id="side" в html).



Но при этом, если в первом правиле есть ещё, например, определение отступа, которого нет во втором, — оно сработает.
URL
17.02.2007 в 17:39

end
Умереть — это ничего; ужасно не жить.
если в первом правиле есть ещё, например, определение отступа, которого нет во втором, — оно сработает.

это и так понятно. -)



ладно, спасибо. Я почему-то решила, что стили будут заменяться автоматически каким-нибудь скриптом. -)
URL
18.02.2007 в 19:33

Tex
Неисправимый оптимист
:)
URL
21.02.2007 в 09:40

My-Diary
Все что было то пройдёт, все что будет то уйдет...
Tex у меня такая же проблема как и у SOLE . куда жать чтобы карнтинки с каким то там горизонтальным скролингом смотреть?
URL
21.02.2007 в 12:28

Tex
Неисправимый оптимист
Duches, нужно включить в настройках Просмотра дневника опцию: "большие изображения отображаются с локальным горизонтальным скроллбаром (аналогично тегу [simg]..[/simg ])"
URL
22.02.2007 в 16:44

molly?!
she was a good girl and it felt great to be a liar.
ураааа xD

щастье то какое, я справилась.

*после 16 попытки*



спасибо)
URL
23.02.2007 в 11:25

~tequila~
И тогда я решила - я стану куклой. Немного застенчивой,немного глупой. Пластмассой холодной. Не чувствовать боли. И быть безразличной ко всему - словно море. Забыть, что такое ЛЮБОВЬ и РАЗЛУКА. Я стану БАРБИ - стервой и сукой...
Я разбираться особо не стала - слишком тупая)), просто скопировала первый вариант, но хотелось бы чуточку по-шире. Как это сделать?
URL
23.02.2007 в 11:25

~tequila~
И тогда я решила - я стану куклой. Немного застенчивой,немного глупой. Пластмассой холодной. Не чувствовать боли. И быть безразличной ко всему - словно море. Забыть, что такое ЛЮБОВЬ и РАЗЛУКА. Я стану БАРБИ - стервой и сукой...
хотя нет, не слишком, разобралась...
URL
24.02.2007 в 17:31

small_mouse
Друзья утверждают, что я параноик... но я им не верю!!! (:
Tex большое спасибо за урок :)

Можно попросить тебя написать еще как сделать расстояние наверху, между блоками и верней границей самого окна.

И еще как можно сделать катринку на фоне. не замостить ее, а разместить на определенном месте на фоне :)

нашла уроки, но там все так плохо прописано :( непонятно

http://www.edu.severodvinsk.ru/afte...ema/pages/5.htm

Заранее спасибо :)
URL
24.02.2007 в 19:45

Tex
Неисправимый оптимист
small_mouse, ну во-первых строка body.top{pading-top:10px !important;} в вашем css не имеет вообще никакого значения - удалите ее.



Отсуп сверху регулируется c помощью margin-top, например, margin-top: 100px; (или при краткой записи margin: 100px 0 0 0;)



Для того чтобы фоновое изображение не повторялось используется параметр no-repeat для background.

Например, конкретно в ваш код:



body.left{padding-left:10px !important;}

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

.left #side{width:150px !important;margin:0 !important;}

.left #page-c{width:750px !important;padding:0 !important;}



нужно добавить строчку:

#extratop {background: url('/userdir/.../bg.jpg') 0 0 no-repeat !important; height:150px; clear:both; margin: 10px 0 0 -455px!important;}

Где:

height: 150px - это параметр, определяющй высоту верхнего блока с картинкой. в данном случае - 150px.

Эта высота должна ровняться высоте вашей фоновой картинки.

margin: 10px 0 0 -455px - определяет отступы. 10px - в примере определяет отступ в 10px сверху.

background: url('/userdir/.../bg.jpg') 0 0 no-repeat - определяет фон: url изображения, позционирование картинки - в данном случае 0 и 0 - означают что картинка будет помещена в левый верхний угол, а no-repeat - говорит, что картинку не следует показывать повторно (более одного раза).





URL
25.02.2007 в 00:36

small_mouse
Друзья утверждают, что я параноик... но я им не верю!!! (:
Грасиас! :) Вы мне очень помогли. Теперь буду думать над стилем.
URL
26.02.2007 в 00:01

Tex
Неисправимый оптимист
;-)
URL
28.02.2007 в 13:29

small_mouse
Друзья утверждают, что я параноик... но я им не верю!!! (:
Ха! :) Это снова я!

У мну опять проблема. Все мне нравиться, ну то, что у мну вышло.... только вот у мну разрещение 1280*960. Проблема в том, как вы понимаете, что у многих оно меньше, а, следовательно, меню сьезжает влево. Как можно зафиксировать меню и основной блок?

А еще я хотела зафиксировать меню, чтобы оно не прокручивалось вместе с основным, но как оказалось, на IE и, как следствие на MeIE этот эффект не отображается. Вообщем я запуталось %)
URL
01.03.2007 в 01:47

буджум
Тумтумный зверь
спасибо большое за код и калькулятор, все работает:)



Только один вопрос:



А как сделать так, чтобы заданное расстояние между блоком меню и блоком контента сохранялось на странице с комментариями?

Заданная ширина блоков сохраняется, но сами блоки сдвигаются.
URL
01.03.2007 в 15:57

Tex
Неисправимый оптимист
small_mouse, вам нужно подобрать размер блока wrapper таким образом, чтоб он помещался в разрешение большинства пользователей.

Про фиксированное меню другие блоки было написано в сообществе diaryCSS



sea-budjum, не понял проблемы. Можно ссылку?
URL
01.03.2007 в 16:27

буджум
Тумтумный зверь
Tex

в любых комментариях

http://pay.diary.ru/~budjum/?commen...m=last#97934487



Сам дневник выглядит так:





А при комментировании текст смещается влево, наезжая на картинку





Впрочем, после опроса пч-ей боюсь, что это просто проблема браузера.
URL
01.03.2007 в 23:30

Tex
Неисправимый оптимист
sea-budjum, я так понял в особенности css для различных броузеров вы особенно не углублублялись, а размещение элементов на странице выбрали довольно сложное... Как следствие - ваш css криво работает в броузерах, особенности которых вы не учли.

Совет в этом случае простой - либо упростить дизайн до описанного например в этом уроке, либо почитать про css для проблемных броузеров.

Быстрого решения дать к сожалению не могу - очень загружен сейчас.

У вас, кстати, еще и горизонтальная прокрутка появляется из-за такого большого остступа между меню и блоком контента.
URL
02.03.2007 в 01:52

буджум
Тумтумный зверь
Tex

Значит, все-таки броузер...

Благодарю.

Экспериментальное постижение CSS оказалось не самым удачным способом, мы ведь не ищем легких путей:)

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

Либо поразвлекаюсь с перестановками и разными броузерами))).



У вас, кстати, еще и горизонтальная прокрутка появляется из-за такого большого остступа между меню и блоком контента.

То есть, получается, что размер меню+отступ+зона текста превышает ммм... размер экрана?
URL
02.03.2007 в 11:28

Tex
Неисправимый оптимист
sea-budjum, у меня скролла нет, но при 1024х768 появляется. А это пока разрешение ольшинства пользователей...
URL
02.03.2007 в 14:59

nastymind
Nobody is perfect. I'm nobody.
а я в этих штуках вообще ничего не соображаю. что делать? :)

ответ "купить моск" не принимается;)
URL

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

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

Подписаться на новые комментарии