General's: 2.0 Размещение постов
General's: 2.0 Размещение постов
Лично я знаю всего два более-менее адекватных способа как-то сместить свой Журнал куда-то (куда душа желает) от центра этого самого журнала. Первый из них подразумевает, что с положением записей в журнале мы меняем так же и ширину самих записей на произвольную. Второй же подразумевает, что ширина ленты записей нас очень даже устраивает, а нам хочется лишь сместить её ближе к какому-нибудь краю. Тут есть они оба, и плюс ещё чуток полезного Staff'а для местного населения.
Итак, способ #1 - меняющий положение записей и ширину ленты записей…
Способ #1
table {
width: 750px;
margin-left: 2%;
margin-right: auto
}
table table { width: 100%; margin: 0 }
table table table { width: auto }
<< Ширина постов 1
<< Левый отступ 2
<< Правый отступ 3
<< Не трогать
<<
1. Ширина постов может задаваться в произвольной, абсолютной или относительной, величине. Она может высчитываться в процентах (%) от ширины экрана или содержащего блока, а может задаваться и фиксированно в пикселях (px), пунктах (pt), дюймах (in) или в сантиметрах (cm). К слову, 1pt ≈ 1.3px, а 1cm ≈ 38px, если не вдаваться в подробности.
2. Левый отступ, от края экрана. Он может задаваться в значениях аналогичных пункту первому.
3. Вот тут стоит остановиться более подробно. Я встречал этот же способ позиционирования в чуть-чуть ином виде ( ссылка 1, ссылка 2). Там чётко указывались оба отступа и ширина задавалась исключительно в процентах. Мне такой подход, честно говоря, не совсем ясен. В нашем случае, можно задать только один отступ, а второму выставить auto; и радоваться жизни, так как всё заработает, вне зависимости от единиц в которых мы определили ширину записей и величину заданного отступа.
Я надеюсь Вы заметили, что я задал ширину постов в абсолютном значении (750px), а значение отступов в относительном (2% от левого края)?! Я сделал это лишь для того, чтобы показать, что нет никакой зависимости от выставленных единиц. С тем же успехом ширина постов могла быть задана в процентах (к примеру 50%), а отступ справа, допустим, 100 пикселей (margin-right: 100px), в таком случае левый отступ должен быть определён как - margin-left: auto.
Две последнии строки кода трогать не нужно. Они служат для того, чтобы Ваши посты не размазало по всему экрану. Так что не стоит их трогать вообще. Скопируйте как есть.
В итоге, что мы имеем:
1) Возможность менять ширину для постов, задаваемую в любых единицах измерения.
2) Возможность указывать отступы от левого или правого края экрана до постов, задаваемые в любых единицах измерения.
3) Обязательное выставления значения auto; для отступа со второй стороны. Если задан левый отступ, правому необходимо выставить auto; и соответственно наоборот, если задан правый отступ, выставить auto; для левого.
4) Неприкосновенность двух последних строчек кода.
Примеры
Способ #2, когда нам нужно лишь сместить ленту записей…
Способ #2
body {
float: right;
margin-left: 0;
margin-right: 0
}
div {
margin-left: auto;
margin-right: 15%
}
div div { margin: 0 }
<< Размещение постов 1
<< Обнуение левого отступа (лучше скопировать как есть) 2
<< Обнуление правого отступа (лучше скопировать как есть) 3
<< Левый отступ 4
<< Правый отступ 5
<< Не трогать
1. Вообще ленту постов можно разместить тремя образами в данном варианте. По центру экрана (float: none), по левому краю экрана (float: left) и по правому краю экрана (float: right).
2. Изначально от края экрана есть небольшой отступ. Во избежания появления лишнего зазора стоит таки обнулить эти отступы. Лучше не заморачиваться на этом, а скопировать просто код, "как есть".
3. См. пункт 2
4. Отступ с левой стороны от ленты постов. Его можно задать в абсолютных единицах (px, pt, in, cm), можно в относительных (%), а можно и вовсе задать auto, в таком случае отступ подсчитается самостоятельно, основываясь на отступе с другой стороны.
5. Отступ с левой стороны от ленты постов. Как и в пункте 4 он может быть задан в абсолютных единицах, в относительных единицах или автоматическим образом. Хочу заметить, что указать auto сразу для отступов с левой и правой сторон получится, только в том случае, если стоит float:none. В этом случае мы получим посты размещающиеся идеально в центре экрана.
Указывать явный отступ всегда следует именно с той стороны в которую Вы сместили ленту постов. С противоположной стороны ставьте автоматический отступ. Так например, для float: left следует задать левый отступ margin-left: 120px . Почему я взял 120px? А вот хрен его знает, просто так взял, примера ради. Вы можете использовать любое число в любых доступных единицах измерения, главное чтобы не автоматическое.
Последнюю строку кода, как и подписано в самом коде, трогать не стоит, скопируйте её как она есть.
В итоге, что мы имеем:
1) Выполнение поставленной задачи - сдвигание ленты постов в желаемую сторону от центра, при сохранении ширины ленты постов.
2) Обязательное выставления значения auto; для отступа со второй стороны. Если задан левый отступ, правому необходимо выставить auto; и соответственно наоборот, если задан правый отступ, выставить auto; для левого.
3) Неприкосновенность последней строки кода.
Примеры
Ну и ещё немного полезного staff'а для Вас
Межпостовое пространство
Иногда возникает такая потребность, как увеличить или уменьшить, а может и совсем убрать пространство разделяющее посты меж друг-другом. Делается всё это очень просто на самом деле, по средством одного из нижеприведённых кодов.
Чтобы убрать отступы совсем используйте этот код.
p { display: none }
.entrybox p, .shadowed p { display: block }
Чтобы уменьшить/увеличить отступы используйте этот код.
p { margin: 10pt }
.entrybox p, .shadowed p { margin: auto }
Причём значение 10pt является номинальным значением.
Уменьшая его Вы уменьшите расстояние меж записями, увеличивая его Вы увеличите расстояние.
Чтобы самому задать размер отступа меж записями используйте этот код.
p { height: 100px; margin: 0 }
.entrybox p, .shadowed p { height: auto; margin: auto }
Причём height: 100px задасть величину разрыва между записями ровно в 100px.
Обратите внимание, что использовать в данном случае Вы можете исключительно абсольтные значения.
Попытки задать расстояния в процентах успехом не увенчаются.
Менять можно только height: 100px . Все остальные параметры просто скопируйте.
Как сдвинуть все записи вниз?
Ну и на последок я расскажу, как же всё-таки сдвинуть сразу все посты вниз на определённое значение. И для чего это может пригодиться, спросите Вы? Ну а я отвечу - представьте, что Вы хотите вставить большой и красочный ImageMap к себе в самый верх страницы. Но сделав так, может оказаться, что ImageMap закрывает часть Вашего поста, который в данный момент времени находится самым верхним. Вот чтобы этого не происходило и следует сдвигать все посты разом. Код такой:
body { margin-top: 300px }
Где 300px это то число на сколько сдвинутся вниз все Ваши записи.
Мне лично нравится элегантность решения, надеюсь Вам тоже понравится. =}
Смотрите, читайте, пробуйте, пишите отзывы. Можт чё, кто подправит, кому не понравится вариант, я тока рад буду.
И да, кстати, пожелания касаемые следующих выпусков будут? ;) В смысле, о чём стоит написать в первую очередь, чё Вы узнать хотите (или не хотите)?!