Раздел A4 пропускаем - туда тоже нежелательно лезть. Находится там, грубо говоря, "сброс" для всех значений отбивок, отступов и пр.

Следующий, наверняка знакомый тебе элемент

Подложка, та часть, где располагается "тело" нашего форума (на скрине для наглядности немного расширил его):

И здесь остановимся и поговорим о ширине, отбивке и прочих интересных вещах.
Итак, перво-наперво лично я обычно задаю ширину будущего форума. За ширину отвечает свойство width. Ширина не включает толщину границ вокруг элемента, значение отступов и полей. Мы можем задать ширину в процентах, можем - в пикселях, дюймах, пунктах и пр. Но нас обычно интересуют проценты и пиксели.
В чем различие?
Проценты (%) - так называемый "резиновый" дизайн, ширина pun вычисляется в зависимости от ширины окна браузера, т.е. оно всегда будет занимать 80%, например.
Пиксели (px) - "фиксированная" ширина, применяется часто, не всегда красиво смотрится на широкоформатных мониторах, но тем не менее довольна безопасна для использования.
Сообщениями выше я порекомендовал сразу же выставить ширину, чтобы не путаться.

Пометка от себя: если будешь в будущем делать дизайны с фиксированной шириной, то старайся распланировать их так, чтобы у тебя весь дизайн вместился в ширину до 1000px. Почему именно тысяча? Потому что несмотря на то, что мониторы обзаводятся все более и более широким форматом, классическая ширина в 1024px остается актуальной до сих пор. 24 пикселя сразу откладываем на скролл - вертикальную полосу прокрутки, которая появится в любом случае (она и занимает обычно эти самые 24 px). Но эта пометка носит простой рекомендательный характер, следовать ему жестко нет необходимости.

Итак, выставили ширину, форум неожиданно "приклеился" к левому краю:

Как исправить? Я встречал в темах-техподдержках такое мнение: следует добавить свойство float: center;
Это неправильно! float даже значения такого не может принимать, а значит эта запись - банальная ошибка.
А центрировать форум мы будем с помощью margin:

Подробнее:
Устанавливает величину отступа от каждого края элемента. В нашем случае отступом будет расстояние от края элемента pun до края окна браузера.
Мы можем задать одно значение для всех сторон, так и разные отступы для каждой из них. "Счет" сторон идет по часовой стрелке: верх, справа, низ, слева.  Можно задавать несколько значений, перекопирую следующую табличку:

Число значений	Результат
1	Отступы будут установлены одновременно от каждого края элемента.
2	Первое значение устанавливает отступ от верхнего и нижнего края, второе — от левого и правого.
3	Первое значение задает отступ от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
4	Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.

auto - это указание на то, что размер отступов будет автоматически рассчитан браузером. Как раз задание справа и слева значения auto позволяет нам "центрировать" наш форум.
А сверху и снизу в данный момент у нас 0, да )
Можно задавать отдельные отступы как общей записью (margin {...}), так и частной (margin-top {...}, margin-right {...}  и т.п.)

Следующее - свойство padding:

padding - Устанавливает расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое. Опять же - можно задать как одно значение для всех сторон, так и для каждой в отдельности.
Приведу пример, как это свойство может помочь нам в будущем с размещением рамок:

без padding

с padding

Замечание: как видно на скриншоте с розовой частью, padding как бы "расширяет" поле, т.е. фактическая ширина у нас утсанавливается большей, чем есть на деле. Для того, чтобы установить рамку, например, следует из планируемой ширины (как в случае указанного бежевого дизайна) в 900px вычесть ширину наших рамок (каждая из них была шириной в 26px, такую же отбивку я выставлял в сам дизайн: padding: 0 26px; ): 900-(26+26)=848 px. Width в том случае будет равен не 900, а 848.
А вообще, вот мелкая картинка для наглядности. Тут указаны и margin, и padding, и видимая область:

Увы, не помню, откуда я ее вырезал, сам бы рад найти ту "шпаргалку".

/* A5.2 */

Здесь, вроде, все понятно - можешь считать, что это "второй pun", просто наложенный сверху. Его обычно тоже тревожить не приходится, поэтому можно оставить таким, как есть.
float - определяет, по какой стороне будет выравниваться элемент. Float: left; позволяет не ломать глаза и читать текст нормально - слева направо. Править его на right не стоит, для отдельных элементов потом можно установить свое обтекание.

/* A5.3 */

окошко переадресации. О нем много где уже говорили, много как предлагали перекрашивать, а конкретно здесь - задаются отступы, ширина и обтекание. Обычно окошко переадресации наследует все цветовые значения от нашего форума, но можно извращаться над ним как душа пожелает. За примером далеко ходить не надо, вот: http://koshart.ru/viewtopic.php?id=39
Заметка пользователя: не скрывай текстовую часть! Страница переадресации должна быть легкой и пустой, на то она и "переходной" пункт, а уж видимость ссылки "Если вас не перебрасывает автоматически, то жмите сюда" - вообще святая святых! Без нее ой как тяжко, не скрывайте, люди, эти волшебные ссылки...

/* A5.4 */

.punbb .section {...}

.punbb .main {...}

Эта часть тоже нам вряд ли может потребоваться, хотя кто знает ). Как видишь - тоже устанавливаем отступы. Можешь увеличить 1em на, допустим, 1.6em и посмотреть, что изменится.

/* A5.5 */

.punbb .category

.punbb .post {...} (один из моих любимых элементов )

Собственно, отступ между сообщениями и категориями. Можно увеличить, можно уменьшить вплоть до нуля.

/* A5.6 */

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

/* A5.7 */

Честно - совсем не помню, за что отвечает, поэтому обычно и не обращаю внимания.

/* A5.8 */

Здесь уже рамки. Рамки, это просто, но пока - обзор элементов:

.punbb .forum {...}	.punbb .formal	.punbb .modmenu
.punbb .info	.punbb .category

border - позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Рамки можно задавать и по-отдельности (border-top, border-bottom, border-left, border-right)
Но все же обычно используют какую-то одну схему для прописывания границ. Например:

Значения также можно раздробить и записывать по-отдельности.

border-width - ширина линии. при значении border-width: none  рамка исчезает, т.е. она нулевая.
border-style - тип линии, значения:

border-color - цвет линии. Тут, думаю, и объяснять ничего не надо ) Единственное, что прозрачный цвет прописывается как transparent, без решеток, точек и прочего. border-color: transparent

/* A5.9 */

границы вокруг выделенных блоков. Не внутри - только вокруг.

/* A5.10 */

#pun-main h1

#pun-main h2

#pun-stats h2

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

Отредактировано Wilhelm (2012-06-07 19:41:16)