Окантовки форумных таблиц: общие принципы
Часто спрашивали на различных ресурсах и у нас на сайте, как делается окантовка для таблиц - это красивое решение для форумов ролевой тематики. В этом топике мы будем постить различные варианты и советы по созданию дизайна с окантовкой. При разработке картинок окантовки желательно делать все ее части в JPEG. Не надо "окантовывать окантованное" | |
Окантовка форумных таблиц не заканчивается на вставке картинок в дизайн. У майббшных креатившиков патологичная ненависть к созданию удобного интерфейса таблиц. Мы часто можем видеть форумы, обрамленные картинками, но совершенно лишенные какой-либо внутренней верстки: только окантовка и иконки, а сама информация из таблицы ничем не разделена, никак не позиционируется, разделы форумы сливаются в один большой комок категории и не отличаются друг от друга. Несколько частовстречающихся косяков:
[/html] |
Подготовка графики и способы вставки
Как сделать окантовку Если вы готовы к использованию окантовки в пользу, а не во вред, приступаем к самим кодам. По кодам следует сказать, что вариантов вставки окантовки много и они зависят от подготовленных картинок. |
Шаг1. В категорию упаковываем повторяющуюся часть (+ делаем отступ):
Код:.category { background: url("https://forumstatic.ru/files/0010/f2/5a/xxx.jpg") repeat-y scroll center top transparent; margin: 10px 0 30px !important; }Шаг2. В заголовок помещаем верхнюю часть:
Код:.category h2 { background: url("/files/0010/f2/5a/ххх.jpg") no-repeat scroll center top transparent; height: 169px; text-align: center; width: 847px; }Шаг3. В контейнер контента помещаем верхнюю часть (+ делаем отступ снизу, чтоб таблица не выезжала за окантовку)
Код:.category .container { background: url("/files/0010/f2/5a/ххх.jpg") no-repeat scroll center bottom transparent; padding-bottom: 15px; }Шаг4. Потом двигаем таблицу:
Код:.category table { margin: -144px auto 0; width: 794px !important; }И добавляем отступ для верхней части, т.к. у меня получилась кривая картинка:
Код:.category h2 { background: url("/files/0010/f2/5a/xxx.jpg") no-repeat scroll center top transparent; height: 169px; text-align: center; width: 847px; margin-left: 1px; }Осталось только доверстать саму табличку.