Ищете шаблон CSS с 3 столбцами, который имеет эти функции
Заголовок div поверх трех столбцов
Высота всех столбцов должна быть не меньше высоты области просмотра. Таким образом, если столбец имеет другой цвет bg, цвет будет полностью ниже области просмотра, даже если столбец не имеет содержимого.
Второй и третий столбцы имеют переменную ширину. Если ширина 3-го столбца равна 0, 3-й столбец сворачивается, и шаблон превращается в 2-столбец. (не такое уж важное требование)
Липкий нижний колонтитул во 2-м столбце, который всегда остается внизу области просмотра, даже если во 2-м столбце нет содержимого, однако нижний колонтитул не должен быть ниже нижней границы 1-го и 3-го столбцов.
Работает в FF и IE 6+
Пример: (две пунктирные линии - края окна просмотра)
-----------------------------------------
HEADER full width of viewport
column 1 column 2 column 3
| |
| |
| |
\ / my footer \ /
-----------------------------------------
Это вопрос или ..?
это не вопрос ...
Вопрос в источнике (код, URL, что угодно) для такого шаблона.
Ответы 4
Вот хорошая ссылка
Я бы начал с Святой Грааль A List Apart, а затем добавил бы липкий нижний колонтитул. Однако то, как вы описываете нижний колонтитул, вероятно, невозможно с использованием простого CSS.
Yahoo UI может делать многое из того, о чем вы говорите. Но я согласен с Джоном Шиэном в том, что я не думаю, что вы можете сделать это с помощью простого CSS. Потребуются некоторые вещи типа dhtml или jquery.
Откажитесь и используйте таблицы
На самом деле, только css для этого не годится.
используйте простую таблицу с 3 столбцами, а затем используйте CSS поверх нее.
<table id = "layout"><tr>
<td id = "left-column"> {{ NAV MENU }} </td>
<td>
<table id = "middle-table"><tr><td id = "middle-column"> {{ CONTENT GOES HERE }} </td></tr>
<tr><td id = "middle-footer">{{FOOTER}}</td></tr>
</table>
</td>
<td id = "right-column">{{RIGHT COLUMN}}</td>
</tr></table>
<style type = "text/css">
table#layout tr td
{
vertical-align:top
}
table#layout
{
width: 100%;
height: 100%;
}
td#left-column
{
width: 100px; /* or what ever you want */
}
table#middle-table, td#middle-column
{
height: 100%;
}
</style>
Чтобы добиться нижнего колонтитула в среднем столбце, я вставил еще одну таблицу в средний столбец. Не думаю, что без стола можно добиться такого эффекта.
таблицы или javascript, выберите свой яд