Обложки для журналов
от Yoksel

Дизайны для ЖЖ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

block inline

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

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

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


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

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

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

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

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

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


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

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

float: left;
float: right;


float: none;


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, чтобы конкретный - выберите нужный из списка.

Chameleon

.j-l-beta - сайдбар
.j-l-beta-inner - обертка виджетов сайдбара. Если хотите задать фон сайдбару, делайте это тут.
.j-beta-w - виджеты в сайдбаре. Также каждый виджет имеет свой собственный класс.
.j-w-title - заголовок виджета, может содержать ссылку
.j-w-content - содержимое виджета

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 и также покажите что у вас вышло : )

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

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

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


Навигация по урокам
Назад День 1. Поиск картинок
День 2. Стиль и фон
День 3. Ширина журнала
День 4. Фон ленты
День 5. Шапка журнала
День 6. Сайдбар
День 7. Посты
День 8. Страницы комментариев
День 9. Метки и календарь
День 10. Хозяйке на заметку
 Вперёд

> А если у меня картинки? вставить тегами заместо текста?

Не поняла что и куда. Подробней, если можно

> можно еще объяснить чайнику, как правильно порезать макет? :)

Он же у вас в слоях? Не надо ничего резать : ) Картину фона - фоном, картинку шапки - в шапку.
По-моему, тут должно всё получиться. Интересное начнётся в постах, но если сделаете это - с постами особых проблем не будет
Спасибо за урок) Сам сайдбар настраивается, только у меня к вам такой вопрос: как настроить список меток в виде списка, а не "облака"? (стиль Army Attire - Smooth sailing, в настройках вид списка меток не настраивается)
Поигралась. Есть вопросы http://dizaynproba.livejournal.com/ вот, что получилось
1. Мне не нравится, как вензель висит над надписями. Как можно поправить, чтоб было ровненько или даже убрать надписи блоков, чтоб они разделялись только вензелем
2. Меня очень раздражает цвет синих ссылок, как их можно поменять?
> Как можно поправить, чтоб было ровненько

background-position:top center, а не left

> или даже убрать надписи блоков, чтоб они разделялись только вензелем

Надписи блоков - это что? заголовки или другое?
Скрывать заголовки не очень хорошая мысль

> 2. Меня очень раздражает цвет синих ссылок, как их можно поменять?

собственно, вам только надо объединить то, что вы знаете о ссылках их прошлого урока с тем, где они находятся. Попробуете сами? : )


Edited at 2010-01-25 16:54 (UTC)
Всё-таки очень прошу помочь избавиться от синего цвета.
Я всё изменила на черный, но например Январь 2010, View All Archives
написано синим и ещё некоторые ссылки. Никак не могу разобраться.
Gray Sky
Component от Kevin Phillips

a.headerLinks,
a.headerLinks:visited{
color: #fff;
position: absolute-bottom;
}

position очевидно написан не правильно, т.к. не работает :)

в рамочках .header(red), .entry(green), найти название остальных блоков не смогла, любимый метод "научного тыка" подводит.

Благодарю вас за помощь!
Спасибо огромное за уроки! Лишь благодаря Вам начал заниматься дизайном блога, и он наконец-то стал превращаться в то, что я хотел бы видеть (если честно очень хочу вот так, ну или хотя бы похоже по стилю http://www.yatzer.com, кстати как специалист может подскажите - это возможно или нет?), старался разобраться , но видимо не догнал не могу разместить картинку в шапке ровно, что бы она занимала всю шапку целиком, сейчас она почему то опускается вниз.Стиль выбрал Flexible Squares. Заранее благодарю за ответ)
> может подскажите - это возможно или нет?)

полностью - не думаю, процентов 70 может быть


>не могу разместить картинку в шапке ровно, что бы она занимала всю шапку целиком, сейчас она почему то опускается вниз.

во-первых, уберите у #header отступ сверху, во-вторых - задайте высоту
Ура, поменяла цвет шрифта! :) Только никак не соображу, как поменять цвета линий, которые отделяют блоки друг от друга. И в блоке "записи на странице" - нумерация абзацев (точечки такие) остались оранжевыми.
Bloggish
April

Скажите, пожалуйста, как увеличить размер шрифта у "оглавления" журнала (свежие записи, календарь, друзья, профиль)? Что надо писать и куда?
Спасибо вам огромное за ваши уроки!
Хотела спросить,как можно перенести юзерпик,напремер на шапку?
И не совсем понятно,код меню столбцом,куда вписывать???
В шапку?
уфф.)
прогуляла два урока, терь разбираюсь и с шапкой и с сайдбаром.)
разбираюсь тут:
adleihs.livejournal.com, flexible sqares


вопрос: как в сайдбаре сделать чтобы рамки этих вот links, blurb и новембер прилипали к стенкам?

li.sbartitle{
border:5px solid #ccff99;
margin-left: 0px;
}
эт я пытаюсь чтобы оно слева прилипало хотя бы. :)
?

Log in

No account? Create an account