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



Но с помощью 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 - подписка на журнал
.customtext-widget - поле с вашим текстом
.powered-widget - Powered by LiveJournal.com
.designed-widget - дизайнер стиля (если есть)

сузить календарь в сайдбаре:

.widget-content table{
border-collapse:collapse;
}
.widget-content td{
font-size:11px;
padding:1px}


Важно:чтобы обратиться ко всем блокам сайдбара - .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 и также покажите что у вас вышло : )

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

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

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

		Навигация по урокам