День шестой: сайдбар

journals_covers — 25.01.2010 Сначала, как обычно, лирическое отступление.

1. Не забывайте про рамки.

Включив их элементам на странице, вы сразу получите чёткое представление о том, как они взаимодействуют между собой, где остались лишние margin или padding, что вам мешает сделать блок нужной ширины или где что торчит за край.

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

Рекомендую во всех блоках иметь строчку с рамкой, но в держать её выключенном виде: border:0px solid red;

Нужна - включили (1px), не нужна - выключили (0px). Полезный инструмент, значительно ускоряющий работу.

2. Кажется, почти все уже дозрели познакомиться с позиционированием элементов

Звучит страшновато, но на самом деле - волшебная штука. Именно этот набор кодов позволит вам убирать лишнее со страницы, сделать списки столбиком или одной линией ну и вообще всяко вольно обращаться с элементами.

Правда, всё не так просто: вам надо очень чётко представлять себе что и зачем вы делаете.

Самое простое: display:none; - стирает элемент со страницы, как будто его там и не было никогда.
В коде страницы он остаётся, но на самой странице - никаких следов.

   Для эксперимента можете задать эту строчку контейнеру с вашим журналом и посмотреть что получится : )

Другие возможные значение этого стиля посложней и поинтересней: display:inline и display:block

display:inline делает элемент строчным
display:block - блочным.

Что такое строчный и блочный?

Это разделение Html-элементов по поведению плохие ставят в угол.



Но с помощью Css можно менять поведение блочных на строчное, и наоборот. Например, возьмём список, вроде тех что в шапке журнала:

• Инфо
• Свежие записи
• Друзья
• Архив

Примерный код:
<ul>
<li>Инфо>/li>
<li>Свежие записи>/li>
<li>Друзья>/li>
<li>Архив>/li>
</ul>

Список столбиком, как и положено. Возьмём большой топор display:inline и добавим его к li:

• Инфо
• Свежие записи
• Друзья
• Архив

Список выстроился в одну строчку

затем добавим списку (ul) text-align:center; - выравнивание по центру, а пунктам списка (li) - margin:0px 10px;, чтобы не слипались:

• Инфо
• Свежие записи
• Друзья
• Архив

Получился аккуратный список, выстроенный в одну строчку

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


Следующее интересное свойство: float

Это обтекание элемента слева или справа или отключение обтекания соседними элементами





left прибьёт элемент к левому краю, про этом соседние элементы начнуть обтекать его справа.
right - к правому, обтекание слева
none - запрещает обтекание

Если нужно задать элементу float: left;, но чтобы при этом не происходило обтекания соседними элементами, задайте ему width:100% или clear: both;

clear - запрет обтекания.

clear: left - запрет обтекать слева
clear: right - справа
clear: both - запрет обтекания со всех сторон.

Внимание: есди будете играться с float и clear - обязательно используйте рамки, чтобы видеть что происходит!


Ну и последнее интересное: position

Благодаря этой штуке можно очень гибко менять положение элементов на странице.

Возможные значения: static, relative, absolute.

static - обычно значение по умолчанию.

relative - позволяет двигать элемент, но при этом он продолжает влиять на соседние элементы.

absolute - элемент перестаёт влиять на соседние, и вы можете двигать его куда угодно.

Чтобы двигать элементы c absolute, вместо margin используйте top, left и right.
Элементы с relative понимают и top-left-right, и обычный margin

Значения (как и у margin) могут быть отрицательными: top: -120px; или margin-left: -200px;

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

Например, если вам не нравится что меню находится над заголовком, вы можете задать обоим блокам position: absolute, задать им нужные отступы сверху и таким образом легко махнуть блоки местами.

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


Теперь таки перейдём к теме урока: сайдбар

Сайдбар - это боковая колонка, которая есть во многих стилях. В некоторых из них сайдбар очень гибко настраивается, в некоторых не настраивается вообще.
В некоторых стилях сайдбаров может быть два (например, Expressive), в некоторых есть специальный макет без сайдбаров - во Flexible Squares.

Если сайдбара в стиле нет, его туда добавить нельзя.

Управление сайдбаром обычно происходит в настройках во вкладке Sidebars

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

Bloggish

div#beta - сайдбар
div#beta-inner - внутренний блок сайдбара
div.module - блок сайдбара
.module-content - содержимое блока
h2.module-header - заголовок блока
.module-list, .archive-list - списки в блоках
.module-list-item - пункт списка

блоки сайдбара имеют свои классы:

.module-photo - юзерпик
.module-viewlinks - меню
.module-calendar - календарь
.module-typelist - список ссылок
.module-categories - список меток
.module-pagesummary - записи на странице
.module-syndicate - подписка на журнал
.module-powered - Powered by LiveJournal.com

Важно: div.module - это то же самое что и .module-calendar или любой другой элемент списка выше.
Это просто элемент страницы с двумя классами. Первый - общий, второй - только для конкретного блока.
Чтобы позвать все блоки сайдбара используйте .module, чтобы конкретный - выберите нужный из списка.

Expressive

#beta - сайдбар
#beta-inner - внутренний блок сайдбара
.widget - блок сайдбара
.widget-inner - внутренний блок сайдбара
h3.widget-header - заголовок блока сайдбара
.widget-content - содержимое блока
ul.widget-list - списки в блоках
ul.widget-list li.item - элемент списка

блоки сайдбара имеют свои классы:

.about-me-widget - профиль
.calendar-widget - календарь
.typelist-widget - список ссылок
.categories-widget - список меток
.archive-widget - записи на странице
.syndicate-widget - подписка на журнал
.powered-widget - Powered by LiveJournal.com
.designed-widget - дизайнер стиля (если есть)

Важно: чтобы обратиться ко всем блокам сайдбара - .widget , к конкретным - выберите нужный из списка.

Flexible Squares

#sidebar - сайдбар
.sbarbody - блок сайдбара
ul.sbarlist - списки в блоках
ul.sbarcontent - список с содежимым (так же имеет класс .sbarlist)
li .sbartitle - заголовок блока сайдбара
li.sbaritem - пункты списка

блоки сайдбара имеют свои классы и id:

.defaultuserpic - юзерпик
#sidebar_linklist - список ссылок
#sidebar_calendar - календарь
#sidebar_tags - список меток
#sidebar_summary - записи на странице

Важно: чтобы обратиться ко всем блокам сайдбара - .sbarbody, к конкретным - выберите нужный из списка.

Minimalism

.sidebar - сайдбар
.sidebar-inner - внутренний блок сайдбара
.sidebar-block - блок сайдбара

dl.sidebar-block dt - заголовок блока сайдбара
.calendar-wrap caption - заголовок блока с календарём

блоки сайдбара имеют свои классы:

dl.sidebar-cal - календарь
dl.sidebar-summary - записи на странице
dl.sidebar-links - список ссылок
dl.sidebar-tags - список меток
div.sidebar-powered - Powered by LiveJournal.com

Важно: чтобы обратиться ко всем блокам сайдбара - .sidebar-block, к конкретным - выберите нужный из списка.

Smooth Sailing

.sidebar - сайдбар
.sidebox - блок сайдбара
.sideboxTitle - заголовок блока сайдбара
.sideboxContent - содержимое блока

внутренние блоки сайдбара имеют свои id. То есть не весь блок, включая заголовок, а только содержимое блоков:

#summary - записи на странице
#latestmonth - календарь
#systemlinks - список ссылок
#search - поиск
#profile - профиль
#tags_sidebox - список меток

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


Важное дополнение ко всем стилям! Если вы хотите задать цвет ссылок, задавайте его именно ссылкам!

Неверно:

.sidebar{
color: red;
}

Правильно:

.sidebar a{
color: red;
}


Задание

1. Поэкспериментируйте с настройками и оформлением сайдбара, похвастайтесь что получилось : )
2. Только для тех, кто разобрался в позиционировании! Поиграйтесь с display, float и position и также покажите что у вас вышло : )

Внимание: если что-то не получается - пишите.
Если отважились разобраться в позиционировании - так же не стесняйтесь задавать вопросы.

Коды в комментарии вставлять не надо - они уже слишком выросли : )

Обязательно давайте ссылку на журнал где тестите



← День пятый: шапка журнала

Оставить комментарий

Популярные посты:

• Ранее
• Архив