Форум

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

С чего начать?
1. Подберите подходящую картинку и измените ее в соответствии с вашими потребностями.
2. По картинке определите ее выстоу и ширину в пикселях.
3. Полезно заранее по картинке определить размеры и расположение (расстояние от верха и от левого края в пикселах) каждого текстового поля.

Как вставить картинку?
Я рекомендую использовать элемент div.
Основой будет элемет div, содержащий картинку и все поля, которые на нее наложены.
Вот его приблизительный код:

<div style="position:relative; width:ширина; height:высота; background-image:url(адрес_картинки); overflow:hidden;"></div>

Ширину и высоту мы выяснили на этапе подготовки картинки, их следует указывать в пикселях.

Как наложить поля?
В подавляющем большинстве случаев полноценная таблица не требуется, а достаточно нескольких полей для текста.
Их я также рекомендую реализовывать как элеметны div.
Чтобы их можно было располагать так, как нам удобно и в то же время они были жестко связаны с базовым элементом, следует размещать их внутри базового элемента (содержащего картинку) и использовать свойство стиля position:absolute.

Размещаем элементы:
Если вы заметили, в основном элементе указан параметр position:relative. Благодаря этому, мы теперь можем использовать параметр position:absolute для позиционирования внутренних элементов относительно основного элемента, а не окна.

Каждый элемент будет выглядеть так:
<div style="position:absolute; width:ширина; height:высота; left:расстояние_от_левого_края; top:расстояние_от_верха; overflow:auto;"></div>

Все расстояния я рекомендую выяснить зарание, "обмерив" свою картинку.

Для улучшения вида я применил еще одно свойство: overflow. Оно определяет поведение элемента если содержимое в нем не умещается.
Для базового элемента я установил overflow:hidden, что предписывает элементу скрывать все части содержимого, которые выходят за его границы.
Для полей - overflow:auto, чтобы при необходимости в элементе появлялись полосы прокрутки.

Здесь был применен тег DIV<\/u><\/a>
Свойства стилей:
position<\/u><\/a>
height<\/u><\/a>
width<\/u><\/a>
background-image<\/u><\/a>
left<\/u><\/a>
top<\/u><\/a>
overflow<\/u><\/a>