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

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

День третий: ширина журнала

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

Затем вспомним как выглядит код и заодно немного познакомимся с Css.

Css - это каскадные таблицы стилей и это именно тот язык, которым мы объясняем нашей странице, какой же мы хотим её видеть.

Вчера мы уже познакомились с коротеньким, но очень полезным кодом:

body{
background-color: #fff;
background-image: url('адрес вашей картинки');
background-repeat: repeat;
background-position: top center;
background-attachment: scroll;
}


Ничего же страшного, правда? Для людей знакомых с английским этот текст будет понятен почти как русский, потому что в нём используются самые обычные слова из английского языка:

background - фон
color - цвет
image - картинка

ну и так далее.

Люди незнакомые с английским попутно выучат несколько новых слов : )

Сама страница журнала написана на HTML, но прямого доступа к коду у нас нет (есть только в платных слоях), так что мы не можем попереставлять элементы страницы как хотим или сверстать всё заново.

Да оно обычно и не нужно, потому для того, чтобы поменять внешний вид страницы, достаточно Css
Повторю: с помощью Css мы объясняем странице, как она должна выглядеть.

— Хочу чтобы шапка была фиолетовой, а заголовок розовым!
— Хочу цветочки на фоне и космолёт заглавной картинкой!
— Хочу серый фон и красный шрифт!


Легко! Это всё Css. Его использование даёт нам очень большие возможности, с некоторыми из которых мы с вами и познакомимся.

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

Как правильно позвать элемент? Зачем точки и решётки перед названиями?

lang

На странице есть обычные Html-элементы (картинки, таблицы, ссылки, параграфы), которые можно позвать все сразу. Например, добавить всем параграфам цвет фона или убрать у всех картинок рамки.

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

У некоторых элементов есть id - личный идентификатор. Одному идентификатору соответствует 1 элемент. Двух элементов с одним id на странице быть не может.

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

Это немного сложнее вчерашнего, но и интереснее. Если справитесь с этим, считайте что вы сделали не просто шаг вперёд, а значительный прыжок!

В некоторых стилях ширина задаётся в настройках:

— A Novel Conundrum
— Chameleon
— Classic
— Clean and Simple
— Digital Multiplex
— Disjointed
— Flexible Squares
— Generator
— Gradient Strip
— Haven
— Magazine
— Nebula
— Notepad
— Punquin Elegant
— Quite Lickable
— Refried Paper
— Tabular Indent
— Tranquility II
— Unearthed
— Variable Flow

К сожалению, большинство из них досталось нам в наследство от S1 и морально устарело, поэтому я не рекомендовала бы брать их для серьёзных переделок.
Исключения - Chameleon, Flexible Squares, Generator,Tranquility II, Variable Flow

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

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

Ниже приведены коды для пяти основных групп.
Если вашей тут нет, напишите какую группу стилей выбрали вы, и я добавлю в пост код для вашей группы.

В каждом блоке заданы ширина в пикселях (width) и рамка (border).

C width всё более менее ясно: задайте нужную ширину в пикселях или процентах. Рекомендую начать с пикселей, значения в процентах более капризны. Но не бойтесь экспериментировать : )

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

border:1px solid red;

red - просто название цвета, самый быстрый и короткий способ задать заметный цвет рамке
1px - толщина рамки. Чтобы скрыть рамку - вместо 1 вставьте 0.
solid - тип.

Все три параметра обязательны. Цвета можно менять, не обязательно использовать только красные рамки.

Итак, коды.

Bloggish

div#container{
width: 900px !important;
border:1px solid red;
}

div#alpha{
width: 695px !important;
border:1px solid green;
}

div#beta{
width: 200px !important;
border:1px solid orange;
}

Expressive/Mixit

#container-inner{
width: 900px !important;
border:1px solid red;
}

div#alpha{
width: 695px !important;
border:1px solid green;
}

div#beta{
width: 200px !important;
border:1px solid orange;
}

Flexible Squares

#content{
width: 900px !important;
border:1px solid red;
}

div#maincontent{
width: 695px !important;
border:1px solid green;
}

div#sidebar{
width: 200px !important;
border:1px solid orange;
}

Minimalism

div.layout{
width: 900px !important;
border:1px solid red;
}

div.content-inner{
width: 695px !important;
border:1px solid green;
}

div.sidebar-inner{
width: 200px !important;
border:1px solid orange;
}

Smooth Sailing

div.pageblock{
width: 900px !important;
border:1px solid red;
}

div.entryHolder{
width: 645px !important;
border:1px solid green;
}

div.sidebar{
width: 200px !important;
border:1px solid orange;
}


Примечание: !important - параметр полезный, но не обязательный.
Он означает, что строчка с ним важнее всех остальных значений для этого элемента. Приказ выполнить операцию не взирая ни на что : )
В некоторых стиля она нужна, в некоторых нет. Для экономии времени сделала везде, чтобы вставленный код заработал сразу.


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

page

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

Во всех примерах первый блок - это внешний контейнер.

Второй блок - ширина ленты записей.

Третий - ширина сайдбара.

Очень важно: сумма ширины сайдбара и ленты постов не должна превышать ширину контейнера!

Пример: 200 (сайдбар) + 600 (лента) = 800 - подходящая ширина контейнера.

Сделаете ширину контейнера меньше - сайдбар может уехать вниз или просто всё будет коряво выглядеть

Имейте в виду, что толщина рамки суммируется с шириной объекта, поэтому не делайте значения впритык:

Например: 200 (сайдбар) + 590 (лента) = 790.

При ширине контейнера 800 всё будет выглядеть как положено, запас 10px.

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

Теперь задание:

1. Убедитесь что поняли всё написанное про Css. Это важно, мы и дальше будем с ним работать. Чего не ясно - спрашивайте.
2. Скопируйте код для своей группы в поле для Css (туда же куда и вчера) и посмотрите что получилось в журнале.
3. Поэкспериментируйте со значениями ширины и с рамками.

Напомню о необходимости брать код только для своей группы стилей
Если вашей группы нет в посте - пишите, добавлю нужный код.

Внимание: если с первого раза не получается - не впадаем в панику, это нормально, особенно на второй день знакомства с Css : )
Пишите мне, разберёмся.
Для экономии времени давайте сразу ссылку на журнал где делаете и ваши коды (если их мало). Если кодов много - просто ссылку на журнал.

Upd: если коды сработали, но журнал выглядит как после бомбёжки, сообщаю: фон ленты - тема нашего следующего урока! : )


ВАЖНО

Друзья мои, если что-то не получается - не надо насиловать коды по три дня и записывать себя в законченые тупицы. Просто попросите помощи.
Невозможно управлять авиалайнером, если вы его видите первый раз в жизни.

Ошибки - это нормально и естественно. Не бойтесь ошибаться - это просто ещё один способ узнать новое


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

Вы хороший педагог)))
А ширину шапки мы не меняем? У меня получается лента записей как бы пристыкована к правой границе шапки, поэтому если ее сделать пошире, то сайд бар в 200 пикселей, например, не входит и располагается ниже.
Журнал мой, код:
#container-inner{
width: 1200px !important;
border:1px solid red;
}
div#alpha{
width: 800px !important;
border:1px solid green;
}
div#beta{
width: 100px !important;
border:2px solid orange;
}

Размеры взяты для примера: "понять и поиграться" :)
Спасибочки! Вы умница. Очень интересно.
Получается, я делаю на старых размерах, где уже залит свой цвет и если мой размер шире, то некрасиво. Нельзя как-нибудь старые параметры(в смысле, цвет, фон) удалить?
И еще по ширине регулируется, а как высоту отрегулировать. Мой эксперимент тут http://community.livejournal.com/moyexperement/
> где уже залит свой цвет

Это не цвет, а фоновые картинки. Цвет просто занял бы всё пространство.

> Нельзя как-нибудь старые параметры(в смысле, цвет, фон) удалить?

Можно, но это уже темы следующих уроков : )

> а как высоту отрегулировать?

Для тех блоков, о которых мы сейчас речь ведём, в этом нет необходимости. Их высота определяется их содержимым.
Но мы обязательно будем менять высоту других блоков, где это больше нужно.

Чисто для эксперимента можете попробовать задать высоту таким кодом:

height:500px;
Спасибо Вам огромное... Вы - большая умница!

Посмотрите, пожалуйста, я поставила стиль Weston Natural Expressive от Lilia Ahner.

http://community.livejournal.com/polytat/

После вставления сегодняшнего кода съехала верхняя картинка вправо, и откуда-то взялась чёрная рамка на ленте записей. И уменьшилась ширина только верхнего фона (листочка).



/* ---- Eto fon ---- */

body{
background-color: #CCCC99;
background-image: url(http://s003.radikal.ru/i203/1001/bb/c390c5096b82.jpg);
background-repeat: repeat;
background-position: top center;
background-attachment: scroll;
}

/* ---- width container ---- */

#container-inner{
width: 900px !important;
border:1px solid red;
}

/* ---- width lenta zapisey ---- */

div#alpha{
width: 695px !important;
border:1px solid green;
}

/* ---- width sidebar ---- */

div#beta{
width: 200px !important;
border:1px solid orange;
}
Weston: #container-inner -> #page-inner
Для этого стиля надо #container-inner заменить на #page-inner - тут он за ширину отвечает

Все остальные сюрпризы - из-за фоновых картинок, которые есть в изначальном дизайне. Про них мы поговорим завтра
У меня, вроде бы, все получается. Сначала подгонял дизайн под свой широкоэкранный монитор, но быстро понял, что у большинства людей разрешение 800*600, исправился
div#container{
width: 99% !important;
border: 0px solid black;
}

div#aipha{
width: 15% !important;
border: 1px solid black;
}

div#beta{
width: 75% !important;
border: 1px solid black;
}

Не пойму почему не окантован сайдербар. Вроде должен. Я убрал обрамление только с контейнера.
ага! и т.е. теперь для каждого элемента в рамочке можно задавать всё тоже самое что и для фона в предыдущем уроке? вот бы ещё понять как для рандомного стиля соображать как именно называется элемент который желаешь мождифицировать :) хотя подозреваю это есть в уроке про вебдевелопер.
Спасибо за урок =) правда я сделала все немного раньше методом тыка и сложных логических рассуждений, а сейчас вы все по полочкам разложили ) вот только у меня возникла небольшая проблема. Не знаю, как сдесь вставить картинку в коммент, но в-общем, вот: http://img-fotki.yandex.ru/get/4109/a005ax.0/0_2538b_1fc5d7e5_orig

как убрать этот баг? ((
> правда я сделала все немного раньше методом тыка и сложных логических рассуждений

Зато гораздо лучше запомните : )

Секрет находится вот тут:

#container-inner{
border: 0px solid orange;
width:800px;
background-image: url('http://yoksel.ru/i/dises/yellow_rose/lenta.png');
background-repeat: repeat-y;
background-position: 0px 0px;
}


Фон сделан картинкой повторяющейся по вертикали. Можете сделать её шире или вообще убрать нафиг и задать этому блоку белый фон.
div.pageblock{
width: 1200px !important;
border: 1px solid white;
}

div.entryHolder{
width: 945px !important;
border: 1px solid white;
}

div.sidebar{
width: 200px !important;
border: 1px solid white;
}
Воть, экспериментирую над своим жж. Не так страшно, как казалось вначале. Пришлось контейнер и ленту записей шире сделать...
У меня к вам такой вопрос: вы расскажете, как регулировать ширину между постами (А то в моем эти белые рамочки немного впритык)? И как вместо обычных рамок вставить что-нибудь типа бордюра-узора?
Спасибо за урок, пока все понятно)
?

Log in

No account? Create an account