ForumDesign TechSupport - Дизайн для форумов и техническая поддержка

Объявление

Акция! Дизайн «MyBB Technical Support»

Дизайн для форума MyBB в тематике компьютерных сообществ или технической поддержки
Стоимость при покупке эксклюзивно: 2000р 1200р
Скидка 40%. В стоимость входит настройка и корректировка дизайна.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Дизайн для MyBB форума гильдии WoW Exodar

Детализированный rpg-дизайн для mybb форума гильдии в тематике Экзодара.
Стоимость: 2150р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Фонд форумаРеклама на сайте
Стать модераторомОтзывыДонат

Предложения

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » ForumDesign TechSupport - Дизайн для форумов и техническая поддержка » Дизайн CSS и библиотека вебмастера » Стиль разделов форума на главной (MyBB) [Герда]


Стиль разделов форума на главной (MyBB) [Герда]

Сообщений 1 страница 4 из 4

1

Блочная верстка форума на главной
с переносом колонок "тем", "сообщений" и "последние сообщения"
(для фиксированного по ширине стиля)

http://sd.uploads.ru/t6z1L.jpg

Автор: Герда
Платформа: MyBB

Сейчас на майбб стало очень модно делать оформление разделов в рамке, а благодаря скрипту от Алекса туда добавлась также и традиция выносить колонки "Тем" и "сообщений" в описание.

Так как часто спрашивают, как такое сделать, в этой статье мы разберем оформление разделов на главной БЕЗ скриптов, на чистом css.
Также сюда же включен набор кодов, влияющий на ВСЁ, что касается форумных таблиц на главной, что позволит вам создать с нуля свой индивидуальный стиль для главной страницы.

PS Если скопируете статью без кликабельной ссылки на эту страницу и указания авторства - ОТКУШУ ЖОПУ!
Также принимаю благодарность путем вкорячивания в любое окно стиля:

Код:
/* За помощь с версткой разделов главной страницы благодарим ForumD.ru */

Подготовительные работы.
Что необходимо сделать, чтоб удалось позиционировать содержимое таблиц.

Фиксируем ширину форума

Чтобы сделать такое оформление, нам понадобится точно построить все элементы по размеру, т.к. из табличных мы превратим их в блочные, а, как вы знаете (или не знаете) блоки не будут стоять на одной строке, если один из них по размеру в нее не помещается.

Для начала зафиксируйте ширину "тела" форума:

#pun {
    margin: 30px auto; /* первая цифра - отступы сверху, аuto - выравнивание по центру */
    width: 900px; /* ширина форума */
    background-color: #e0e9f2; /* цвет фона - для тестового примера */
}


Многие в селектор #pun вставляют картинку-рамку для "тела" форума., которая требует отступов внутренних элементов от нее.
Если это так, то добавьте отступы в ПИКСЕЛЯХ.

.punbb {
    float: left;
    width: 880px; /* ширина форума с учетом отступа от краев рамки */
    height: auto;
    margin: 0 10px; /* отступ слева и справа от рамки */
    background-color: #7087a4; /* цвет фона - для тестового примера */
}

Убираем стандартные границы

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

Код:
/* A5.8 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-style: none none solid none;
  border-width: 0px 0px 2px 0px
  }

/* A5.9 */
.punbb .container {
  border-style: solid;
  border-width: 1px;
  }

/* C2.13 */
.punbb .main .tcl {
  border-left-style: none;
  border-left-width: 0
  }

В данных кодах удаляем красное (отступы оставляем - нам они пригодятся):

/* A5.10 */
.punbb .section h2, #pun-main h1, #pun-main h2, #pun-stats h2, #pun-debug h2 {
  padding: 0.5em 1em;
  border-style: none solid solid none;
  border-width: 0 1px 1px 0;

  }

/* C2.11 */
.punbb .main td {
  border-style: solid none none solid;
  border-width: 1px 0 0 1px;

  padding: 0.8em 1em;
  }

/* C2.12 */
.punbb .main th {
  border-style: none none none solid;
  border-width: 0 0 0 1px;

  padding: 0.4em 1em 0.4em 1em;
  }

ВНИМАНИЕ ВСЕМ ТЕМ, кто любит юзать чьи-то "шаблоны". Часто вижу, что ТруЪ-дизайнеры с майбб предпочитают "убирать" границы путем border-color: transpatent;
Такой способ НЕ убирает границу, а делает ее прозрачной. Убедитесь, что у данных элементов вообще НЕТ значения border в коде, иначе столкнетесь с проблемой "почему я все ровно посчитал, а блоки все равно уехали".

Задаем ширину отступов в ячейках

Также нам нужно, чтобы все внутренние элементы таблицы имели отступы в ПИКСЕЛЯХ. Все это ради того, чтоб когда мы начали позиционировать элементы, у нас все имело точные размеры и точно помещалось в строчки.
находим коды ячеек, откуда мы уже удаляли границы и вставляем отступы в пикселях:

/* C2.11 */
.punbb .main td {
  padding: 8px 10px; /* для ячеек таблицы */
  }
/* C2.12 */
.punbb .main th {
   padding: 5px 10px 5px 10px; /* для заголовка таблицы (где надписи "форум", "тем", "сообщений") */
  }

Вставляем иконки

О том, как вставляются иконки, есть отдельные топики, так что я не буду подробно обозревать разные типы селекторов, коснусь только того, что есть в стандартном коде по иконкам (и требует правки)
Нас интересуют этот кусок кода из верхнего окна стиля:

Код:
/* C2.14 */
.punbb tbody.hasicon td.tcl {
  padding-left: 3.2em
  }

/* C2.15 */
.punbb div.icon {
  border-style: solid;
  border-width: 0.6em 0.6em 0.6em 0.6em;
  height: 0;
  line-height: 0.0;
  margin-top: 0.1em;
  width: 0;
  }

/* C2.16 */
.punbb  table div.icon {
  font-size: 1.05em;
  position: absolute;
  margin-left: -2.2em;
  }


Собственно, его мы можем смело удалять и менять на свой:

.punbb tbody.hasicon td.tcl {
  padding-left: 40px; /* отступ описания форума от левого края для размещения иконки */
  }
.punbb div.icon {
position: absolute;
margin-left: -35px; /* отступ иконки от описания влево к краю ячейки */
height: 30px; /* ширина */
width: 30px; /* высота */
background-color: #7087a4; /* фон */
border-radius: 50%; /* закругление границ */

  }

вместо серого можно вставить свой стиль для иконок, картинки и т.д., а ниже добавить коды для других типов иконок (новые, важные и т.д.)


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

Настраиваем стиль заголовка категорий

Удаляем внизу стандартного стиля коды:

Код:
/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background-color: #1474C3;
  color: #fff;
  }
/* CS2.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  border-color: #004F90;
  }

Находим вверху код и вставляем всою стилизацию:

/* A5.10 */
.punbb .section h2, #pun-main h1, #pun-main h2, #pun-stats h2, #pun-debug h2 {
  padding: 8px 10px; /* отступы в пикселях */
    background-color: #e0e9f2; /* цвет фона - для тестового примера */
    color: #000; /* цвет текста */
    font-weight: bold; /* жирный */
    text-transform: uppercase; /* заглавные буквы */
    text-align: center; /* выравнивание текста по центру */

  }

можно вставить свою стилизацию, картинку, поиграть с текстом и т.д.

Делаем отступ таблиц от краев

Если вы все делали по текущему гайду, то вы можете наблюдать следующую картинну:
http://s8.uploads.ru/1Aznq.jpg
Многим нужно, чтобы заголовок оставался как есть, но таблицы отступали от краев.
Для этого "воскрешаем" селектор .punbb .container и добавляем в любое удобное окно стиля.
Чтобы вычислить ширину и сделать отступы от краев, смотрим на ширину ближайшего родителя (это у нас .punbb, если бы мы не делали для него отступов и ширины, то это был бы #pun)

.punbb .container {
    width: 860px; /* ширина контейнера с таблицей */
    padding: 0 10px; /* отступ от краев */
  }

Как раскрасить ячейки

Цвет контейнера, в котором находится табличка, в стандартном коде находится здесь:

/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
  background-color: #f7f7f7;
  color: #333;
  }

Удалите красное, чтобы сделать его "прозрачным":
http://s5.uploads.ru/OeUzm.jpg

Цвет заголовков таблицы (где надписи "форум", "тем", "сообщений"...) находится тут:

/* CS1.6 */
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl  {
  background-color: #dedfdf;
  color: #333
  }

Удалите красное (ВМЕСТЕ С ЗАПЯТОЙ) и добавьте свой стиль на отдельной строке:

.punbb th {
background-color: #313844; /* цвет фона */
color: #fff; /* цвет текста */

}

Цвет ячеек с количеством тем и сообщений находится тут:

/* CS1.1 */
.punbb .section .container, .punbb .post-body, .punbb .post-links, .punbb td.tc2, .punbb td.tc3,
.punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd,
.punbb .info-box, .punbb #pun-main .info-box .legend {
  background-color: #f1f1f1;
  color: #333;
  }

аналогично удаляем в вставляем свой вариант стиля:

.punbb td.tc2, .punbb td.tc3 {
background-color: #a77046; /* цвет фона */
color: #fff; /* цвет текста */
opacity: 0.3; /* прозрачность */

}

Чтобы раскрасить ячейки с названием раздела и последним сообщением добавляем:

.punbb td.tcl { /* для ячейки с названием и описанием */
background-color:  #b49f88;
color: #fff;

}
.punbb td.tcr { /* для ячейки с последним сообщением */
background-color: #313844;
color: #fff;

}


Отключение элементов таблиц.
Как убрать некоторые элементы форумных таблиц.

Отключение заголовков таблиц и отдельных ячеек заголовков

http://sa.uploads.ru/RUspa.jpg
Определитесь, что делаем с ячейками-заголовками, где написан текст "Форум" "Тем" "Сообщений" и "Последнее сообщение".
Если нужно отключить ВСЕ эти ячейки, прописываем в стиле:

Код:
#pun-index thead {display: none;}

Если вы хотите отключить конкретные ячейки заголовков:

#pun-index th.tcl {display: none;} /* отключение ячейки "Форум" */
#pun-index th.tc2 {display: none;} /* отключение ячейки "Тем" */
#pun-index th.tc3 {display: none;} /* отключение ячейки "Сообщений" */
#pun-index th.tcr {display: none;} /* отключение ячейки "Последнее сообщение" */

Лишние строчки этого кода удалите, не используйте.
Например, в случае, если вы хотите передвинуть ТОЛЬКО колонки "Тем" и "Сообщений" в описание форума, можно оставить вот так в заголовке:

#pun-index th.tc2 {display: none;} /* отключение ячейки "Тем" */
#pun-index th.tc3 {display: none;} /* отключение ячейки "Сообщений" */

http://s8.uploads.ru/JukV4.jpg
Ширину и позиционирование данных ячеек нужно задавать ПОСЛЕ того, как мы спозиционируем остальные строки и ячейки таблицы. На этом этапе можно пока просто отключить лишние ячейки.

Отключение ячеек "Тем", "Сообщений" и "Последнее сообщение"

Если нужно отключить другие ячейки таблиц, прописываем в стиле:

#pun-index td.tcl {display: none;} /* отключение ячейки "Форум" */
#pun-index td.tc2 {display: none;} /* отключение ячейки "Тем" */
#pun-index td.tc3 {display: none;} /* отключение ячейки "Сообщений" */
#pun-index td.tcr {display: none;} /* отключение ячейки "Последнее сообщение" */

Лишние строчки этого кода удалите, не используйте.


Позиционирование ячеек с форумами на главной
Двигаем ячейки в самые разные места относительно друг друга.

Стиль с колонками "тем" и "сообщений" в описании раздела
http://s5.uploads.ru/9diwe.jpg

Для начала позиционирования разделов необходимо спозиционировать строки таблиц.

#pun-index tr {
    position: relative;
    width: 860px; /* ширина строки */
}


Позиционируем ячейку с описанием форума:

#pun-index td.tcl {
    display: inline-block;
    float: left; /* расположение слева */
    width: 460px; /* ширина ячейки */
    padding-bottom: 50px; /* отступ снизу для размещения под описанием кол-во тем и сообщений */
}

Позиционируем ячейку с последним сообщением:

#pun-index td.tcr {
    display: block;
    position: absolute;
    right: 0;/* расположение справа */
    width: 330px; /* ширина ячейки */ 
}

ВНИМАНИЕ! когда задаете ширину ячеек, помните, что отступы от краев padding (которые мы составляли ранее) ВКЛЮЧЕНЫ в их ширину. Если у вас будут проблемы, что ячейки не встают друг напротив друга - значит надо ставить меньше ширину, вы не учли отступы.

Затем добавляем к ячейкам "Тем" и "Сообщений" описания (так как табличных заголовков нет, непонятно что это за цифры)

#pun-index td.tc2:before {
content: 'Тем: '; /* Текст для ячейки "ТЕМ" */
color: #8ee39c; /* Цвет вставленного текста */
background: rgba(0, 0, 0, 0) url("картинка") no-repeat scroll 0 0; /* иконка */
padding-left: 16px; /* отступ вставленного текста от иконки */
}
#pun-index td.tc3:before {
content: 'Сообщений: '; /* Текст для ячейки "СООБЩЕНИЙ" */
color: #8ee39c;
background: rgba(0, 0, 0, 0) url("картинка") no-repeat scroll 0 0; /* иконка */
padding-left: 16px; /* отступ вставленного текста от иконки */
}

Иконки и прочие декоративности - на ваш вкус и цвет, лишние строчки можно удалить, текст можно заменить на свой.

Затем позиционируем ячейки:

#pun-index td.tc2, #pun-index td.tc3 {
    position: absolute;
    display: block;
    bottom: 10px; /* отступ от низа строки с разделами */
    width: 200px; /* ширина ячеек */
}
#pun-index td.tc2 {
    left: 5px; /* отступ влево ячейки "Тем" */
}
#pun-index td.tc3 {
    left: 230px; /* отступ влева ячейки "Сообщений" */
}


Для декоративности можно добавить отступы и границы:

#pun-index td.tcl, #pun-index td.tcr { /* применяется на ячейки "форум" и "последний пост" */
    margin: 5px 0; /* Отступы */
    border-top: 4px solid #e0e9f2; /* границы */
}

Итог:
http://s5.uploads.ru/9diwe.jpg

полный код стиля с такой версткой
!!! НИЖЕ ВАРИАЦИИ БУДУТ ИМЕННО НА ОСНОВЕ ЭТОГО СТИЛЯ !!!

в этом коде в первом окне стиля то, что мы делали в ПОДГОТОВИТЕЛЬНЫЕ РАБОТЫ
Во втором окне стиля в самом начале стоят самая важная часть с позиционированием ячеек для удобства встаки/замены при других вариациях.

style.css

Код:
/*************************************************************
A - SETUP
**************************************************************/

/* A1 Import the colour scheme
-------------------------------------------------------------*/

/* A1.1 */
  @import url(style_cs.css);

/* A2 Deal with browser defaults and wonkiness
-------------------------------------------------------------*/

/* A2.1 */
html, body {margin: 0; padding: 0}

/* A2.2 */
.punbb * {
  margin: 0
  }

/* A2.3 */
.punbb ul, .punbb dl, .punbb li, .punbb dd, .punbb dt {
  padding: 0;
  list-style: none;
  }

/* A2.4 */
.punbb img {
  border:none
  }

/* A2.5 */
.punbb .main table {
  table-layout: fixed;
  width: 100%;
  }

/* A2.6 */
.checkfield input[type="checkbox"], .radiofield input[type="radio"] {margin: 0 0.3em;}

/* A2.7 */
p[class="checkfield"] *,
div[class="checkfield"] *,
fieldset[class="radiofield"] * {
  height: 1.8em;
  vertical-align: middle
  }


 /* A3 Text setup
-------------------------------------------------------------*/

/* A3.1 */
body {
  font-size: 100.01%;
  }

/* A3.2 */
.punbb {
  font: normal 68.75% verdana, arial, helvetica, sans-serif;
  }

/* 3.3 */
.punbb textarea, .punbb input, .punbb select, .punbb optgroup {
  font: 1em verdana, arial, helvetica, sans-serif
  }

/* A3.4 */
.punbb h1, .punbb h2, .punbb h3, .punbb h4, .punbb table, .punbb th {
  font-size: 1em;
  font-weight: normal;
  }

/* A3.5 */
.punbb h1 span, .punbb h2 span, .punbb legend span {
  font-size: 1.1em;
  }

/* A3.6 */
.punbb pre {
  font: 1.1em/140% monaco, "bitstream vera sans mono", "courier new", courier, monospace
  }

/* A3.7 */
.punbb address, .punbb em {
  font-style: normal
  }

/* A3.8 */
.punbb .post-content em {
  font-style: italic
  }

/* A3.9 */
.punbb .post-content em.bbuline {
  font-style: normal;
  text-decoration: underline;
  }

/* A3.10 */
.punbb a {
  text-decoration: underline
  }

/* A3.11 */
.punbb optgroup {
  font-weight: bold;
  }


/* A4 Float clearing and hidden items
-------------------------------------------------------------*/

/* A4.1 */
#pun:after,
.punbb .container:after,
.punbb .post-links ul:after,
.punbb .main div.inline:after,
.punbb .post-box:after,
.punbb .linksb:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  overflow:hidden;
  line-height: 0.0;
  font-size: 0;
  }

/* A4.2 */
.acchide,
#pun-index #pun-main h1,
#pun-navlinks h2,
#pun-pagelinks h2,
#pun-status h2,
#pun-ulinks h2,
.punbb .forum h2,
.punbb .multipage .topic h2,
.punbb dl.post-sig dt span,
.punbb p.crumbs strong,
.punbb .divider hr,
.punbb .required label em,
.punbb .formsubmit label,
.punbb .submitfield label,
.punbb .modmenu label,
#pun-userlist .main h2 {
  font-size: 0;
  height: 0;
  width: 0;
  line-height: 0.0;
  position:absolute;
  left: -9999px;
  overflow: hidden
  }


/* A5 Basic page layout and borders
-------------------------------------------------------------*/

/* A5.3 */
#pun-redirect, #pun-maint {
  margin: 50px 20% 12px 20%;
  width: auto;
  float: none;
  }

/* A5.4 */
.punbb .section, .punbb .main {
  margin-bottom: 1em;
  }

/* A5.5 */
.punbb .category, .punbb .post {
  margin-top: 0.4em;
  }

/* A5.6 */
.punbb #pun-category1, .punbb .toppost, .punbb .topicpost {
  margin-top: 0;
  }

/* 5.7 */
#pun-post .topic {
  margin-top: 1em;
  }







/*************************************************************
B - MAIN CONTENT - GENERAL
**************************************************************/

/* B1 Parsed Content, Signatures and Scroll Boxes
-------------------------------------------------------------*/

/* B1.1 */
.punbb .post-content {
  padding: 0;
  margin: 0;
  width: 100%;
  overflow: hidden;
  }

/* B1.2 */
.punbb .post-sig dt {
  display: block;
  border-top: 1px solid #888;
  width: 250px;
  margin: 5px 0;
  }

/* B1.3 */
.punbb .post-content p {
  margin: 0;
  padding: 0 0 1em 0;
  line-height: 150%;
  }

/* B1.4 */
.punbb .post-content img {
  vertical-align: text-bottom
  }

/* B1.5 */
.punbb .post-content img.postimg {
  vertical-align: middle;
  }

/* B1.6 */
.punbb .post-content .blockcode, .punbb .post-content blockquote {
  width: 100%;
  overflow: hidden;
  }

/* B1.7 */
.punbb .post-content .scrollbox {
  width: 100%;
  overflow: auto;
  }

/* B1.8 */
.punbb .post-content .quote-box, .punbb .post-content .code-box {
  margin: 0.4em 1.8em 1.4em 1.8em;
  padding: 1em;
  border-style: solid;
  border-width: 1px;
  }

/* B1.9 */
.punbb .quote-box cite, .punbb .code-box strong.legend {
  display: block;
  padding-bottom: 0.7em;
  font-size: 1.1em;
  font-weight: bold;
  font-style: normal;
  margin: 0;
  }

/* B2 Information boxes
-------------------------------------------------------------*/

/* B2.1 */
.punbb .info-box {
  padding: 1.1em 1.7em 1em 1.7em;
  border-style: solid;
  border-width: 1px;
  margin: 0 0 1.1em 0;
  }

/* B2.2 */
.punbb .info-box * {
  padding: 0 0 0.7em 0;
  }

/* B2.3 */
.punbb #pun-main .info-box .legend {
  font-size: 1.1em;
  font-weight: bold;
  }


/* B3 Pagination and posting links
-------------------------------------------------------------*/

/* B3.1 */
.punbb .linkst {
  float: left;
  position: relative;
  width: 100%;
  font-size: 1.1em;
  height: 0;
  }

/* B3.2 */
.multipage {
  margin-top: 3em;
  }

/* B3.3 */
.linkst .pagelink {
  position: absolute;
  top: -4em;
  left: 1em;
  width: 24em;
  }

/* B3.4 */
.linkst .postlink {
  position: absolute;
  top: -4em;
  right: 1em;
  width: 16em;
  text-align: right;
  font-weight: bold;
  }

/* B3.5 */
.punbb .linksb {
  text-align: right;
  padding: 0.4em 1em 0.5em 1em;
  font-size: 1.1em;
  }

/* B3.6 */
.linksb .pagelink {
  float: left;
  width: 24em;
  text-align: left;
  }

/* B3.7 */
.linksb .postlink {
  float: right;
  width: 16em;
  font-weight: bold
  }

/* B3.8 */
.subscribelink {
  clear:both;
  padding-top: 0.3em;
  padding-bottom: 0.5em;
  }


/*************************************************************
C - MAIN CONTENT - SPECIFIC
**************************************************************/

/* C1 Form layout
-------------------------------------------------------------*/

/* C1.1 */
.punbb .formal .container {
  padding: 1.7em 2.3em 1.1em 2.3em;
  }

/* C1.2 */
.punbb .formsubmit {
  padding: 0 0 0 1.7em;
  margin: 1em 0 0 0;
  }

/* C1.3 */
.punbb .formsubmit input, .punbb .formsubmit a, .punbb .formsubmit span {
  margin: 0 0.6em 0 0
  }

/* C1.4 */
.punbb fieldset {
  border-style: solid;
  border-width: 1px;
  padding: 0 18px 0 18px;
  margin: 0 0 1em 0
  }

/* C1.5 */
.punbb fieldset legend {
  padding: 0;
  margin: 0 0 0 11px;
  font-size: 1.1em
  }

/* C1.6 */
.punbb fieldset legend span {
  padding: 0 5px;
  margin: 0 0 0 -15px;
  }

/* C1.7 */
.punbb fieldset fieldset {
  border-style: none;
  margin: 0;
  padding: 0 0 8px 0
  }

/* C1.8 */
.punbb .fs-box {
  padding: 1em 0 0.8em 0;
  }

/* C1.9 */
.punbb .fs-box p, .punbb .fs-box fieldset {
  padding: 0 0 0.8em 0
  }

/* C1.10 */
.punbb .inline .inputfield, .punbb .inline .selectfield, .punbb .inline .passfield {
  float: left;
  margin-right: 1em;
  }

/* C1.11 */
.punbb .inline .infofield {
  clear:both
  }

/* C1.12 */
.punbb .datafield br {
  display: none
  }

/* C1.13 */
.punbb .required label, .punbb .datafield span.input {
  font-weight: bold
  }

/* C1.14 */
.punbb .datafield span.input a {
  font-weight: normal;
  }

/* C1.15 */
.punbb .areafield span.input, .punbb p.longinput span.input {
  display: block;
  padding: 0 12em 0 0;
  height: 100%; /* For IE */
  }

/* C1.16 */
.punbb textarea, .punbb .longinput input {
  width: 64%;
  margin: 0;
  }

/* C1.17 */
.punbb .hashelp {
  position: relative;
  }

/* C1.18 */
.punbb .helplinks {
  display: block;
  position: absolute;
  top: 1em;
  right: 0;
  font-weight: normal;
  width: 36%;
  }

/* c1.19 */
.punbb #profile .helplinks {
  top: 1.5em;
  }

/* C1.20 */
.punbb .helplinks span {
  display: block;
  padding-bottom: 0.2em;
  }

/* C1.21 */
#pun-post .formal .info-box li {
  padding-left: 4px;
  list-style-type: square;
  list-style-position: inside;
  line-height: 1.5;
  margin: 0;
  }


/* C2 Table layout
-------------------------------------------------------------*/

/* C2.1 */
.punbb .main .tcl {
  overflow: hidden;
  text-align: left;
  width: 50%;
  }

/* C2.2 */
.punbb .main .tc2, .punbb .main .tc3, .punbb .main .tcmod {
  text-align: center;
  width: 10%;
  }

/* C2.3 */
.punbb .main .tcr {
  overflow: hidden;
  text-align: left;
  width: 30%;
  }

/* C2.4 */
#pun-userlist .main .tcl,
#pun-searchtopics .main .tcl,
#pun-modviewforum .main .tcl {
  width: 40%
  }

/* C2.5 */
#pun-userlist .main .tc2,
#pun-searchtopics .main .tc2 {
  text-align: left;
  width: 20%;
  }

/* C2.6 */
#pun-debug table .tcl {
  width: 15%;
  white-space:normal;
  }

/* C2.7 */
#pun-debug .tcr {
  width: 90%;
  white-space: normal;
  }

/* C2.8 */
#pun-index .tcl h3 {
  font-size: 1.2em;
  font-weight: bold;
  }

/* C2.9 */
.punbb td span.youposted {
  font-weight: bold;
  margin-left: -1em;
  position: absolute;
  }

/* C2.10 */
.punbb td .modlist {
  display: block;
  padding-top: 0.3em
  }









 /* C3 Topics
-------------------------------------------------------------*/

/* C3.1 */
.punbb .post .container {
  border-style: none solid solid solid;
  border-width: 1px;
  margin-top: -1px;
  padding-bottom: 1px;
  }

/* C3.2 */
.punbb .post h3 {
  border-style: solid solid none solid;
  border-width: 1px;
  }

/* C3.3 */
.punbb .post h3 span {
  padding: 0.5em 1em;
  display: block;
  margin-left: 19em;
  border-left-style: solid;
  border-left-width: 1px
  }

/* C3.4 */
.punbb .post h3 strong {
  float: right;
  width: 5em;
  text-align: right;
  font-weight: normal;
  }

/* C3.5 */
.punbb .post .post-author {
  float: left;
  width: 19em;
  margin-top: -1.5em;
  overflow: hidden;
  }

/* C3.6 */
.punbb .post .post-author ul, .punbb .post .post-author p {
  padding: 0 1em 1em 1em;
  line-height: 140%;
  }

/* C3.7 */
.pa-author {
  font-size: 1.1em;
  font-weight: bold;
  }

/* C3.8 */
.pa-author a {
  text-decoration: none
  }

/* C3.9 */
li.pa-title {
  padding-bottom: 0.4em;
  font-weight: bold;
  }


li.pa-online {
  line-height: 0.8em;
  border-left-style: solid;
  border-left-width: 0.7em;
  padding-left: 0.4em;
  margin-top: 0.7em;
  }

/* C3.11 */
.punbb .post-body {
  margin-left: 19em;
  border-left-style: solid;
  border-left-width: 1px;
  padding: 0 0 1px 0;
  }

/* C3.12 */
.punbb .post-box {
  padding: 1em;
  }

/*C3.13 */
.punbb fieldset .post-box {
  margin-bottom: 0.8em
  }

/* C3.14 */
.punbb .post-links {
  margin-left: 19em;
  border-left-style: solid;
  border-left-width: 1px;
  }

/* C3.15 */
.punbb .post-links ul {
  padding: 0 1em 0 0;
  height: 2em;
  line-height: 2em;
  margin-left: -19em;
  border-top-style: dashed;
  border-top-width: 1px;
  background: transparent;
  text-align: right;
  }

/* C3.16 */
.punbb .post-links li {
  display: inline;
  padding-left: 1em;
  }

/* C3.17 */
.pl-email, .pl-website {
  float: left;
  }

/* C3.18 */
.punbb .clearer {
  clear: both;
  height: 0;
  font-size: 0;
  }


/* C4 Moderator menu
-------------------------------------------------------------*/

/* C4.1 */
.punbb .modmenu .container {
  padding: 0.5em 1em;
  text-align: right;
  }

/* C4.2 */
.punbb .modmenu strong, .punbb .modmenu a {
  height: 1.8em;
  line-height: 1.8em;
  }

/* C4.3 */
.punbb .modmenu .container strong {
  float: left;
  }

/* C4.4 */
.punbb .modmenu input {
  margin-left: 1em;
  }


/* C5 Message boxes
-------------------------------------------------------------*/

/* C5.1 */
.punbb .info .container {
  padding: 0.8em 1em
  }

/* C5.2 */
.punbb .info .container .backlink {
  padding-top: 0.8em;
  }


/* C6 Profile
-------------------------------------------------------------*/

/* C6.1 */
#profile .container {
  padding-left: 18.6em;
  }

/* C6.2 */
#profilenav {
  float: left;
  width: 14em;
  margin-left: -16.3em;
  display: inline;
  }

/* C6.3 */
#profilenav li {
  padding-bottom: 0.8em;
  font-weight: bold;
  }

/* C6.4 */
#viewprofile ul, #profilenav ul {
  border-style: solid;
  border-width: 1px;
  padding: 1.5em 18px 0.8em 18px;
  margin: 0 0 1em 0;
  }

/* C6.5 */
#viewprofile h2, #profilenav h2 {
  background: transparent;
  border: none;
  padding: 0 0 0 0;
  margin: 0 14px -0.6em 14px;
  }

/* C6.6 */
#viewprofile h2 span, #profilenav h2 span {
  padding: 0 5px;
  position: relative;
  }

/* C6.7 */
#viewprofile li, #setmods dl {
  padding: 0 0 0 16em;
  margin-bottom: 0.2em;
  }

/* C6.8 */
#viewprofile li span {
  float: left;
  width: 14em;
  margin-left: -16em;
  padding: 0.5em 1em;
  font-weight: bold;
  }

/*C6.9 */
#setmods dt {
  float: left;
  width: 14em;
  margin-left: -16em;
  padding: 0.8em 1em;
  font-weight: bold;
  display: inline;
  }

/* C6.10 */
#viewprofile li strong, #viewprofile li div, #setmods dd {
  display: block;
  padding: 0.5em 1em;
  font-weight: normal;
  }

/* C6.11 */
.punbb img.avatardemo {
  float: right;
  margin: 0 0 0.8em 1.8em
  }


/* C7 User list
-------------------------------------------------------------*/

/* C7.1 */
#pun-userlist .formal, #pun-userlist .formal .container {
  border-bottom: none;
  margin-bottom: 0;
  }

/* C7.2 */
#pun-userlist .usertable .container {
  padding: 0 2.3em 2.3em 2.3em;
  border-top: none;
  }

/* C7.3 */
#pun-userlist .usertable table {
  border-style: solid;
  border-width: 1px;
  }


/*************************************************************
D - PUNBB SECTIONS OTHER THAN MAIN CONTENT
**************************************************************/

/* D1 Logo and description
-------------------------------------------------------------*/

/* D1.1 */
#pun-title {
  margin: 0;
  border-style: solid solid none solid;
  border-width: 1px 1px 0 1px;
  }

/* D1.2 */
#pun-title h1 {
  display : block;
  height : 40px;
  padding: 2em 1em 0 1em;
  }

/* D1.3 */
#pun-title .container {
  border-style: none solid none solid;
  }

/* D1.4 */
#pun-title h1 span  {
  font-size: 1.5em;
  }

#pun-title table {
	border: none;
	height: 40px;
	width: 100%;
}

#pun-title td.title-logo-tdl {
	border: none;
	width: 100%;
}

#pun-title td.title-logo-tdr {
	border: none;
	width: 468px;
}

/* D2 Page navigation
-------------------------------------------------------------*/

/* D2.1 */
#pun-pagelinks {
  position: absolute;
  top: -15px;
  left: 0;
  margin: 0;
  border: none;
  padding: 0;
  width: 100%;
  }

/* D2.2 */
#pun-pagelinks .container {
  background: transparent;
  border: none;
  padding: 0}

/* D2.3 */
#pun-pagelinks .container li {
  display: inline
  }

/* D2.4 */
#pun-pagelinks li a, #pun-pagelinks a:link, #pun-pagelinks a:hover {
  height: 2em;
  line-height: 2em;
  padding: 0;
  font-size: 1.2em;
  margin-left: -9999px;
  display: block;
  float:left;
  width: 100%;
  }

/* D2.5 */
#pun-pagelinks a:active, #pun-pagelinks a:focus {
  position:relative;
  margin: 0;
  }

#pun-pagelinks li a span {
  display:block;
  margin: 0 1em
  }

/* D3 Forum navigation
-------------------------------------------------------------*/

/* D3.1 */
#pun-navlinks, #pun-navlinks .container {
  border-style: none;
  border-width: 0;
  margin: 0;
  }

/* D3.2 */
#pun-navlinks .container {
  padding: 0.7em 1em;
  }

/* D.3 */
#pun-navlinks li {
  display: inline;
  padding-right: 1em;
  }

/* D3.4 */
#pun-navlinks li a {
  font-size: 1.1em;
  }

/* D4 User links
-------------------------------------------------------------*/

/* D4.1 */
#pun-ulinks  {
  margin-top: 0;
  }

/* D4.2 */
#pun-ulinks .container {
  border-top: none;
  padding: 0.7em 1em;
  }

/* D4.3 */
#pun-ulinks li, #pun-ulinks li a {
  display: inline;
  border-left-style: solid;
  border-left-width: 1px;
  white-space: nowrap;
  }

/* D4.4 */
#pun-ulinks li a {
  padding: 0 0.3em 0 0.6em
  }

/* D4.5 */
#pun-ulinks li.item1, #pun-ulinks li.item1 a {
  border-left-style: none;
  border-left-width: 0;
  padding-left: 0
  }

/* D5 Welcome box and Top Breadcrumbs
-------------------------------------------------------------*/

/* D5.1 */
#pun-status, #pun-status .container {
  border-bottom: none;
  margin-bottom: 0;
  }

/* D5.2 */
#pun-status .container {
  padding: 0.8em 1em 1em 1em;
  }

/* D5.3 */
#pun-status span {
  white-space: nowrap;
  margin-right: 0.5em;
  }

/* D5.4 */
#pun-crumbs1 {
  font-weight: bold;
  overflow: hidden;
  margin-top: 0;
  }

/* D5.5 */
#pun-crumbs1 p.container {
  border-top: none;
  padding: 1em 1em 0.8em 1em;
  font-size: 1.1em;
  }

/* D5.6 */
#pun-break1 {
  margin: 0 1em;
  border-style: solid none;
  border-width: 1px 0;
  height: 0;
  margin: -2px 1em;
  position: relative;
  z-index: 1;
  }

/* D6 Announcement
-------------------------------------------------------------*/

/* D6.1 */
#pun-announcement h2 {
  padding: 0;
  margin: 0 1em -3.5em 1em;
  border-style: none none solid none;
  border-width: 0 0 1px 0;
  position: relative;
  font-weight: bold;
  }

/* D6.2 */
#pun-announcement h2 span {
  display: block;
  padding: 1em 0 0.8em 0;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  }

/* D6.3 */
#pun-announcement .container {
  padding: 4.3em 1em 1em 1em;
  }

/* D7 Statistics
-------------------------------------------------------------*/

/* D7.1 */
#pun-stats .container {
  padding: 0.8em 1em
  }

/* D7.2 */
#pun-stats li.item1, #pun-stats li.item2 {
  float: left;
  clear: both;
  line-height: 150%;
  }

/* D7.3 */
#pun-stats li.item3, #pun-stats li.item4 {
  text-align: right;
  line-height: 150%;
  }

/* D7.4 */
li#onlinelist {
  margin-top: 1em;
  border-top-style: solid;
  border-top-width: 1px;
  float: left;
  width: 100%;
  line-height: 130%;
  }

/* D7.5 */
li#onlinelist div {
  border-top-style: solid;
  border-top-width: 1px;
  padding: 0.7em 0 0 0;
  }

/* D8 Quick Jump - About - Bottom Breadcrumbs
-------------------------------------------------------------*/

/* D8.1 */
#pun-qjump {
  margin: 0;
  border: none;
  width: 50%;
  position: relative;
  float: left;
  }

/* D8.2 */
#pun-qjump .container {
  border: none;
  background: transparent;
  padding: 0.8em 1em;
  }

/* D8.3 */
#pun-about {
  margin-top: 0;
  }

/* D8.4 */
#pun-about .container {
  border-top-style: none;
  text-align: right;
  line-height: 150%;
  padding: 0.8em 1em;
  }

/* D8.5 */
#pun-about p span {
  display:block;
  padding-left: 50%;
  }

/* D8.6 */
#pun-crumbs2 {
  font-weight: bold;
  overflow: hidden;
  margin-bottom: 0;
  border-bottom: none;
  }

/* D8.7 */
#pun-crumbs2 .container {
  border-bottom: none;
  padding: 0.8em 1em;
  font-size: 1.1em;
  }

/* D8.8 */
#pun-break4 {
  margin: -2px 1em;
  border-style: solid none;
  border-width: 1px 0;
  position: relative;
  height: 0;
  z-index: 1;
  }

/* D8.9 */
div.punbb-admin #pun-about .container {
  border-top-style: solid;
  border-top-width: 1px;
  }


/* D9 Help file
-------------------------------------------------------------*/

/* D9.1 */
#pun-help .formal .info-box h3.legend {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  padding-bottom: 0;
  margin-bottom: 0.8em;
  }

/* D9.2 */
#pun-help .formal .info-box h3.legend span {
  padding-bottom: 0.6em;
  display: block;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  font-size: 1.1em;
  }

/* D9.3 */
#pun-help .formal p, #pun-help .formal dd {
  margin-bottom: 1em
  }

/* D9.4 */
#pun-help .formal ul, #pun-help .formal dl {
  padding: 0 0 0 1em
  }

/* D9.5 */
#pun-help .formal li {
  padding: 0;
  line-height: 130%
  }

/* D9.6 */
#pun-help .formal li * {
  vertical-align: text-top
  }

/* D9.7 */
#pun-help .formal dt span {
  font: 1.4em/120% monaco, "bitstream vera sans mono", "courier new", courier, monospace
  }

/* D9.8 */
#pun-help .formal .parsedmsg, #pun-help .formal .parsedmsg .incode {
  padding-bottom: 0;
  }

style_cs.css

Код:
#pun-index tr {
position: relative;
width: 860px;
}
#pun-index td.tcl {
    display: inline-block;
    float: left; 
    width: 460px; 
    padding-bottom: 50px; 
}
#pun-index td.tcr {
    display: block;
    position: absolute;
    right: 0;
    width: 330px; 
}
#pun-index td.tc2, #pun-index td.tc3 {
    position: absolute;
    bottom: 15px;
    display: block;
    width: 200px;
}
#pun-index td.tc2 {
    left: 5px;
}
#pun-index td.tc3 {
    left: 230px;
}
#pun-index td.tc2:before {
content: 'Тем: ';
color: #8ee39c;
background: rgba(0, 0, 0, 0) url("") no-repeat scroll 0 0;
padding-left: 16px;
}
#pun-index td.tc3:before {
content: 'Сообщений: ';
color: #8ee39c;
background: rgba(0, 0, 0, 0) url("") no-repeat scroll 0 0;
padding-left: 16px;
}
#pun-index td.tcl, #pun-index td.tcr {
    margin: 5px 0;
    border-top: 4px solid #e0e9f2;
}


html, body {background-color: #313844;}

#pun {
    margin: 30px auto;
    position: relative;
    width: 900px;
background-color: #e0e9f2;
}
.punbb {
    float: left;
    width: 880px;
    height: auto;
    margin: 0 10px;
background-color: #7087a4;
}

.punbb .main th {
  padding: 5px 10px 5px 10px;
  }
.punbb .main td {
  padding: 8px 10px; 
  }

.punbb tbody.hasicon td.tcl {
    padding-left: 40px;
}
.punbb table div.icon {
    position: absolute;
    margin-left: -35px;
    height: 30px;
    width: 30px;
    background-color: #7087a4;
    border-radius: 50%;
}
.punbb .section h2, #pun-main h1, #pun-main h2, #pun-stats h2, #pun-debug h2 {
  padding: 8px 10px; 
    background-color: #e0e9f2;
    color: #000; 
    font-weight: bold; 
    text-transform: uppercase; 
text-align: center;
  }
.punbb .container {
    width: 860px; 
    padding: 0 10px;
  }
.punbb th {
background-color: #313844; 
color: #fff;
opacity: 0.3;
}
.punbb td.tc2, .punbb td.tc3 {
background-color: #a77046; 
color: #fff;
}
.punbb td.tcl {
background-color:  #b49f88;
color: #fff;
}
.punbb td.tcr {
background-color: #313844; 
color: #fff;
}


#pun-index th.tc2 {display: none;} 
#pun-index th.tc3 {display: none;} 


/* CS1 Background and text colours
-------------------------------------------------------------*/

/* CS1.1 */
.punbb .section .container, .punbb .post-body, .punbb .post-links,
.punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd,
.punbb .info-box, .punbb #pun-main .info-box .legend {
  background-color: #f1f1f1;
  color: #333;
  }

/* CS1.2 */
.punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
  background-color: #f7f7f7;
  color: #333;
  }


/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
  background-color: #E1EDF7;
  color: #333;
  }

/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
  background-color: #f7f7f7;
  color: #005EAB
  }

/* CS1.6 */
.punbb .post h3 span,  #viewprofile li, #setmods dl  {
  background-color: #dedfdf;
  color: #333
  }

/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
  background-color: #f9f9f9;
  color: #333
  }

/* CS1.8 */
#pun-navlinks .container {
  background-color: #0F5995;
  color: #f1f1f1;
  }

.offline li.pa-online strong {
  font-weight: normal
  }

/* CS2 Border colours
-------------------------------------------------------------*/

/* CS2.1 */
.punbb .container, .punbb .post-body, .post h3, #pun-title {
  border-color: #ccc #ccc #aaa #ccc
  }

/* CS2.2 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-color: #f5f5f5
  }

/* CS2.4 */
.punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body,
.punbb .post h3 span, .post-links ul, .post-links, .usertable table {
  border-color: #C9D6E0;
  }

/* CS2.6 */
.punbb .quote-box, .punbb .code-box {
  border-color: #ccc #fff #fff #ccc;
  }

#pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span {
  border-color: #ccc
  }

#pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend {
  border-color: #fff
  }

.punbb .divider {
  border-color: #ccc #fff #fff #fff
  }

.punbb .formal fieldset .post-box, .punbb .info-box {
  border: 1px solid #dedfdf
  }

li.pa-online {
  border-left-color: #005EAB;
  }


/* CS3 Links
-------------------------------------------------------------*/

/* CS3.1 */
.punbb a, .punbb a:link, .punbb a:visited,
.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
  color: #005EAB
  }

.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
  color: #333
  }

/* CS3.2 */
.punbb a:hover, .punbb a:focus, .punbb a:active,  .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {
  color: #B42000;
  }

/* CS3.3 */
#pun-navlinks a {
  color: #eee;
  text-decoration: none
  }

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: #fff;
  text-decoration: underline
  }

#pun-pagelinks a:active, #pun-pagelinks a:focus {
  background-color: #333;
  color: #fff;
  }

Можно отзеркалить позиционирование
http://s7.uploads.ru/MgIrU.jpg

#pun-index thead {display: none;}

#pun-index tr {
position: relative;
width: 860px;
}
#pun-index td.tcl {
display: inline-block;
width: 460px;
padding-bottom: 50px;
float: right;
}
#pun-index td.tcr {
    display: block;
    position: absolute;
    left: 0;
    width: 330px;
}
#pun-index td.tc2, #pun-index td.tc3 {
    position: absolute;
    bottom: 15px;
    display: block;
    width: 200px;
}
#pun-index td.tc2 {
    right: 5px;
}
#pun-index td.tc3 {
    right: 230px;
}

Колонки "Тем" и "Сообщений" под Последним сообщением
http://sf.uploads.ru/ipyPw.jpg

Вариация переноса колонок "Тем" и "Сообщений". Тут только изменения в коде, все детали с позиционирования ячеек под в предыдущим спойлером "Стиль с переносом колонками "тем" и "сообщений""

Описание слева
http://sf.uploads.ru/ipyPw.jpg

#pun-index tr {
position: relative;
width: 860px;
}
#pun-index td.tcl {
display: inline-block;
width: 460px;
padding-bottom: 50px;
float: left;
}
#pun-index td.tcr {
    display: block;
    position: absolute;
    right: 0;
    width: 330px;
}
#pun-index td.tc2, #pun-index td.tc3 {
position: absolute;
top: 55px;
display: block;
width: 155px;
}
#pun-index td.tc2 {
    right: 0;
}
#pun-index td.tc3 {
    right: 175px;
}

Описание справа
http://se.uploads.ru/0WxLT.jpg

#pun-index thead {display: none;}
#pun-index tr {
position: relative;
width: 860px;
}
#pun-index td.tcl {
display: inline-block;
width: 460px;
padding-bottom: 50px;
float: right;
}
#pun-index td.tcr {
    display: block;
    position: absolute;
    left: 0;
    width: 330px;
}
#pun-index td.tc2, #pun-index td.tc3 {
position: absolute;
top: 55px;
display: block;
width: 155px;
}
#pun-index td.tc2 {
    left: 0px;
}
#pun-index td.tc3 {
    left: 175px;
}

Стиль с колонкой "Последнее сообщение" в описании раздела
http://sf.uploads.ru/C1DxG.jpg

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

Код:
#pun-index thead {display: none;} 

Позиционируем ячейку с описанием форума:

#pun-index td.tcl {
    display: inline-block;
    float: left; /* расположение слева */
    width: 810px; /* ширина ячейки */
    padding-bottom: 100px; /* отступ снизу для размещения под описанием других ячеек */
}

ВНИМАНИЕ! когда задаете ширину ячеек, помните, что отступы от краев padding (которые мы составляли ранее) ВКЛЮЧЕНЫ в их ширину. Если у вас будут проблемы, что ячейки не встают друг напротив друга - значит надо ставить меньше ширину, вы не учли отступы.

Затем добавляем по желанию добавляем ячейке "Последнее сообщения" (НЕ обязательно)

#pun-index td.tcr:before {
content: 'Последнее сообщение: '; /* Текст для ячейки "ПОСЛЕДНЕЕ СООБЩЕНИЕ" */
color: #8ee39c;
background: rgba(0, 0, 0, 0) url("картинка") no-repeat scroll 0 0; /* иконка */
padding-left: 16px; /* отступ вставленного текста от иконки */
}

Иконки и прочие декоративности - на ваш вкус и цвет, лишние строчки можно удалить, текст можно заменить на свой.

Далее позиционируем ячейки с "Тем", "Сообщений" и "Последнее сообщения".

#pun-index td.tcl { /* Ячейка с описанием раздела */
    display: inline-block;
    float: left;
    width: 810px;
    padding-bottom: 100px; /* Отступ снизу для размещения под описанием */
}
#pun-index td.tcr { /* Ячейка с последним сообщением */
display: block;
position: absolute;
left: 5px; /* Отступ влево */
width: 810px; /* ширина */
bottom: 52px; /* отступ снизу */
}
#pun-index td.tc2, #pun-index td.tc3 { /* Ячейки "Тем" и "Сообщений" */
    position: absolute;
    display: block;
    bottom: 15px; /* отступ снизу */
    width: 200px; /* ширина */
}
#pun-index td.tc2 { /* Ячейка "Тем" */
    left: 5px; /* Отступ слева */
}
#pun-index td.tc3 { /* Ячейка "Сообщений" */
    left: 230px; /* Отступ слева */
}

Эффект:
http://sf.uploads.ru/C1DxG.jpg


Вариаций может быть великое множество. Например:
http://s7.uploads.ru/QJV5M.jpg

Код:
#pun-index tr {
position: relative;
width: 860px;
}
#pun-index thead {display: none;} 

#pun-index td.tcl {
    display: inline-block;
    float: left;
    width: 810px;
    padding-bottom: 60px;
}
#pun-index td.tcr {
display: block;
position: absolute;
left: 5px;
width: 810px;
bottom: 10px;
}
#pun-index td.tc2, #pun-index td.tc3 {
position: absolute;
display: block;
width: 110px;
top: 9px;
padding: 2px 5px;
text-align: left;
}
#pun-index td.tc2 {
    right: 110px;
}
#pun-index td.tc3 {
    right: 0;
}
#pun-index td.tc2:before {
content: 'Тем: ';
color: #8ee39c;
background: rgba(0, 0, 0, 0) url("") no-repeat scroll 0 0;
padding-left: 16px;
}
#pun-index td.tc3:before {
content: 'Сообщений: ';
color: #8ee39c;
background: rgba(0, 0, 0, 0) url("") no-repeat scroll 0 0;
padding-left: 16px;
}
#pun-index td.tcr:before {
content: 'Последнее Сообщение: ';
color: #8ee39c;
background: rgba(0, 0, 0, 0) url("") no-repeat scroll 0 0;
padding-left: 22px;
}
#pun-index td.tcl {
    margin: 5px 0;
    border-top: 4px solid #e0e9f2;
}

Если вы хотите расположить какие-либо ячейки справа от описания поверх этой ячейки, чтобы они не "заезжали" на описание, то добавьте отступ справа в ячейку с описанием (или слева, если нужно спозиционировать слева):

#pun-index td.tcl {
    display: inline-block;
    float: left;
    padding-right: 330px; /* отступ справа */
    width: 810px; /* ширина ячейки ПОСНИТЕ, ЧТО ОТСТУПЫ ДЕЛАЮТ ЕЕ МЕНЬШЕ */
    padding-bottom: 100px; /* отступ снизу для размещения под описанием других ячеек */

Примеры:

Колонки "Последнее сообщение" "Тем" "Сообщений" в столбик справа от описания

"Тем" и "Сообщений" под иконкой форума, а "Последнее сообшение" Справа от описания

http://s7.uploads.ru/oaQts.jpg

http://se.uploads.ru/2cT9a.jpg

Код:
#pun-index tr {
position: relative;
width: 860px;
}
#pun-index thead {display: none;} 

#pun-index td.tcl {
display: inline-block;
float: left;
width: 490px;
min-height: 115px;
padding-right: 330px;
}
#pun-index td.tcr {
display: block;
position: absolute;
right: 5px;
width: 300px;
top: 16px;
}
#pun-index td.tc2, #pun-index td.tc3 {
position: absolute;
display: block;
width: 110px;
text-align: left;
right: 5px;
}
#pun-index td.tc2 {
    top: 65px;
}
#pun-index td.tc3 {
    top: 100px;
}
#pun-index td.tc2:before {
content: 'Тем: ';
color: #8ee39c;
background: rgba(0, 0, 0, 0) url("http://forumfiles.ru/files/0002/c4/43/59105.png") no-repeat scroll 0 0;
padding-left: 16px;
}
#pun-index td.tc3:before {
content: 'Сообщений: ';
color: #8ee39c;
background: rgba(0, 0, 0, 0) url("http://forumfiles.ru/files/0002/c4/43/61919.png") no-repeat scroll 0 0;
padding-left: 16px;
}

/* #pun-index td.tcr:before {
content: 'Последнее Сообщение: ';
color: #8ee39c;
background: rgba(0, 0, 0, 0) url("/files/0002/c4/43/78661.png") no-repeat scroll 0 0;
padding-left: 22px;
} */

#pun-index td.tcl {
    margin: 5px 0;
    border-top: 4px solid #e0e9f2;
}
Код:
#pun-index table div.icon {
margin-left: -95px;
height: 60px;
width: 60px;
}

#pun-index tr {
position: relative;
width: 860px;
}
#pun-index thead {display: none;} 

#pun-index td.tcl {
display: inline-block;
float: left;
width: 400px;
padding-right: 330px;
padding-left: 130px;
min-height: 115px;
}
#pun-index td.tcr {
display: block;
position: absolute;
right: 5px;
width: 300px;
top: 16px;
}
#pun-index td.tc2, #pun-index td.tc3 {
position: absolute;
display: block;
width: 110px;
left: 5px;
padding: 5px;
}
#pun-index td.tc2 {
    top: 80px;
}
#pun-index td.tc3 {
    top: 110px;
}
#pun-index td.tc2:before {
content: 'Тем: ';
color: #8ee39c;
background: rgba(0, 0, 0, 0) url("http://forumfiles.ru/files/0002/c4/43/59105.png") no-repeat scroll 0 0;
padding-left: 16px;
}
#pun-index td.tc3:before {
content: 'Сообщений: ';
color: #8ee39c;
background: rgba(0, 0, 0, 0) url("http://forumfiles.ru/files/0002/c4/43/61919.png") no-repeat scroll 0 0;
padding-left: 16px;
}

#pun-index td.tcr:before {
content: 'Последнее Сообщение: ';
color: #8ee39c;
background: rgba(0, 0, 0, 0) url("/files/0002/c4/43/78661.png") no-repeat scroll 0 0;
padding-left: 22px;
} 

#pun-index td.tcl {
    margin: 5px 0;
    border-top: 4px solid #e0e9f2;
}
Стиль с блоками описаний разделов в ряд
http://s9.uploads.ru/b7Gni.jpg

Для того, чтобы поставить ячейки с описаниями в ряд, необходимо сделать это с СТРОКАМИ таблицы.
Поэтому добавляем в Позиционирование строк:

#pun-index tr {
    position: relative;
    display: inline-block;
    vertical-align: top; /* выравнивание по верху */
    width: 400px; /* ширина строки */
    margin: 5px 0; /* отступы блоков сверху и снизу */
    padding: 0 10px; /* отступы блоков справа и слева */
}

Затем настраиваем ячейку с описанием раздела:

#pun-index td.tcl {
    display: inline-block;
    float: left;
    width: auto; /* растягивание ячейки по ширине строки */
}

Получаем:
http://s8.uploads.ru/wKcUt.jpg

Код:
#pun-index thead {display: none;}
#pun-index td.tc2 {display: none;}
#pun-index td.tc3 {display: none;}
#pun-index td.tcr {display: none;} 

#pun-index tr {
display: inline-block;
    position: relative;
    width: 400px; 
    margin: 5px 0; 
    padding: 0 10px;
    vertical-align: top; 
}
#pun-index td.tcl {
    display: inline-block;
    float: left;
    width: auto; 
}


html, body {background-color: #313844;}

#pun {
    margin: 30px auto;
    position: relative;
    width: 900px;
background-color: #e0e9f2;
}
.punbb {
    float: left;
    width: 880px;
    height: auto;
    margin: 0 10px;
background-color: #7087a4;
}

.punbb .main th {
  padding: 5px 10px 5px 10px;
  }
.punbb .main td {
  padding: 8px 10px; 
  }

.punbb tbody.hasicon td.tcl {
    padding-left: 40px;
}
.punbb table div.icon {
    position: absolute;
    margin-left: -35px;
    height: 30px;
    width: 30px;
    background-color: #7087a4;
    border-radius: 50%;
}
.punbb .section h2, #pun-main h1, #pun-main h2, #pun-stats h2, #pun-debug h2 {
  padding: 8px 10px; 
    background-color: #e0e9f2;
    color: #000; 
    font-weight: bold; 
    text-transform: uppercase; 
text-align: center;
  }
.punbb .container {
    width: 860px; 
    padding: 0 10px;
  }
.punbb th {
background-color: #313844; 
color: #fff;
opacity: 0.3;
}
.punbb td.tc2, .punbb td.tc3 {
background-color: #a77046; 
color: #fff;
}
.punbb td.tcl {
background-color:  #b49f88;
color: #fff;
}
.punbb td.tcr {
background-color: #313844; 
color: #fff;
}

Для удобства и наглядности в коде выше выключены ячейки "Тем", "Сообщений" и "Последнее сообщение"
Но они также могут занять свое место в блоках аналогично тому, как мы это делали, когда описание раздела занимало всю строчку.
Например:
http://sg.uploads.ru/HaIi1.jpg

Код:
#pun-index thead {display: none;}
#pun-index tr {
display: inline-block;
    position: relative;
    width: 400px; 
    margin: 5px 0; 
    padding: 0 10px;
    vertical-align: top; 
}
#pun-index td.tcl {
display: inline-block;
float: left;
width: auto;
border-bottom: 80px solid #a77046;
border-radius: 0 20px 0 20px;
}
#pun-index td.tc2, #pun-index td.tc3 {
position: absolute;
display: block;
width: 170px;
bottom: 50px;
padding: 5px;
background-color: #b49f88;
color: #fff;
}
#pun-index td.tc2 {
left: 25px;
}
#pun-index td.tc3 {
right: 25px;
}

#pun-index td.tcr {
position: absolute;
display: block;
bottom: 5px;
left: 25px;
width: 360px;
padding: 5px;
text-align: center;
background-color: #dabea9;
color: #000;

}
#pun-index td.tcr a {
background: rgba(0, 0, 0, 0) url("http://forumfiles.ru/files/0002/c4/43/78661.png") no-repeat scroll 0 2px;
padding-left: 22px;}

#pun-index td.tc2:before {
content: 'Тем: ';
color: #8ee39c;
background: rgba(0, 0, 0, 0) url("http://forumfiles.ru/files/0002/c4/43/59105.png") no-repeat scroll 0 0;
padding-left: 16px;
}
#pun-index td.tc3:before {
content: 'Сообщений: ';
color: #8ee39c;
background: rgba(0, 0, 0, 0) url("http://forumfiles.ru/files/0002/c4/43/61919.png") no-repeat scroll 0 0;
padding-left: 16px;
}

+2

2

Здравтсвуйте, Герда!
Вопрос первый: а можно фиксировать ширину форума в процентах?

0

3

Добрый день. Я, конечно, не Герда, но раз уж она не отвечает, попробую её подменить. : )

Ульяна 1/16 написал(а):

можно фиксировать ширину форума в процентах?

Ширину в процентах задавать можно, но стоит учитывать, что внутренние элементы в этом случае нужно тоже делать с "плавающей" шириной. Если какие-то элементы внутри "резинового" блока должны иметь определённую ширину (например, рамочки или один из блоков), можно высчитать ширину остальных с помощью функции calc().
Например, у вас есть "резиновый" блок <div id="main"></div>с внутренним отступом 1em. Вы хотите, чтобы он вместе с отступом имел ширину 90%. Стиль будет выглядеть так:

Код:
div#main {
    padding: 10px;
    width: calc(90% - 20px);
}

Отступ у нас с обеих сторон, поэтому вычитаем мы его удвоенную ширину. Обратите внимание: вокруг минусов и плюсов внутри скобочек обязательно должны быть пробелы.
Разместим внутри нашего блока два блока с классами "class1" и "class2", один из них будет иметь заданную ширину.

Код:
div#main {
    padding: 10px;
    width: calc(90% - 20px);
    min-width: 500px;
}

.class1 {
    display: inline-block;
    width: 240px;
}

.class2 {
    display: inline-block;
    width: calc(100% - 240px);
}

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

Код:
div#main {
    padding: 10px;
    width: calc(90% - 20px);
    min-width: 500px;
}

.class1 {
    display: inline-block;
    width: 240px;
    padding: .5em;
    border: solid 2px black;
}

.class2 {
    display: inline-block;
    padding: 1em;
    width: calc(100% - 240px - 1em - 4px - 2em);
}

Разумеется, формулу можно сократить до calc(100% - 244px - 3em). Просто в развёрнутом виде понятнее, откуда все эти цифры взялись и почему они именно такие.
Если что-то не получится, кидайте ссылку туда, где вы эксперименты ставите - поможем разобраться на конкретном примере.

+1

4

Добрый день. Я, конечно, не Герда, но раз уж она не отвечает, попробую её подменить. : )

Ага. Спасибо!!!!!

0


Вы здесь » ForumDesign TechSupport - Дизайн для форумов и техническая поддержка » Дизайн CSS и библиотека вебмастера » Стиль разделов форума на главной (MyBB) [Герда]


Рейтинг форумов | Создать форум бесплатно © 2007–2017 «QuadroSystems» LLC