Трехколоночный дизайн с прибитым футером. CSS

GTXit · 16.02.2009, 10:45

Добрый день.
Подниму избитую тему, прибивания футера и выравнивания высоты колонок при помощи CSS.

Итак, начал я таки разбираться с вопросом, а как же это всё должно работать, иии нашел не мало примеров и хаков как это можно реализовать и что бы при этом всё более или менее сносно работало во всех основных браузерах... НО. Начав работу над реальным сайтом, уперся в такую траблу. Вообще на первый взгляд всё достаточно элементарно но никак не могу реализовать то что хочю. Итак, в общем виде, на картинке представлено что же в итоге требуется.
т.е. шапкаи футер на всю ширину экрана. Основная страница фиксированной ширины, разбитая на 3 колонки, бекграунд каждой колонки идет на всю высоту страницы, и резиново растягивается если колличество контента больше чем на одну страницу, футер соответственно смещается вниз, и при количестве контента меньше чем на страницу, находится внизу.
По бокам на бекграунде слева и справа идут повторяющиеся по вертикали картинки, которые соответственно так же растягиваются при увеличении количества контента.

Много слов, но думаю на картинке всё понятно показано. Трабла естественно заключается в том что не могу добиться такого результата даже в трех браузерах (ие6, опера, фф). То фон основного блока пропадает в опере, то картинки по бокам заканчиваються где им вздумаеться...
Есть какие нить соображения как можно реализовать?

KidsKilla · 17.02.2009, 12:16

http://csstool.ru/

GTXit · 17.02.2009, 13:22

KidsKilla, спасибо за ссылку

Пробывал подобные сервисы, только желаемого результата так и не добился. Трабла в том что бы и футер был прибит к низу страницы и колонки были одинаковой высоты. По той ссылке эти два условия идут как взаимоисключающие друг друга, а мне нужно это одновременно.
Пока удалось добиться хорошего результата только в ие6 (ну и в более старших версиях), в опере и фаерфоксе всё криво. В обоих этих браузерах фон не расширяеться если контента больше чем на страницу, а в лисичке ещё не получаеться добавить картинку справой стороны, хоть тресни, не хочет её показывать на всю высоту и всё.

KidsKilla · 17.02.2009, 16:37

не уверен что вариант с "и футер был прибит к низу страницы и колонки были одинаковой высоты" вообще возможен...

GTXit · 17.02.2009, 16:50

Невозможен средствами css, или и таблицами это анпасабл? Вообще наверное возможно всётаки, но при использовании метода ложных колонок ("Faux columns"), типа когда в маин контейнер кладется одна длинная картинка раскашенная в цвета всех колонок и повторяеться по вертикали. Но хочеться без картинок

)

ЗЫ. Траблу с пропадающем фоном в опере и фф удалось решить.. Но вопрос в целом остаеться открытым

KidsKilla · 17.02.2009, 20:21

сами "колонки равной величины" принципиально не предусмотрены спецификацией ксс. а потому их реализация -- хак на хаке и разного рода извращения.

таблицей это организовать в принципе возможно:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Untitled</title>
<style type="text/css">
HTML,BODY{margin:0;padding:0;height:100%;}
</style>
</head><body><script type="text/javascript"></script>
<table style="height:100%;width:100%;">
<tr><td colspan="3" style="height:10px;">head</td></tr>
<tr>
<td style="height:50%;background:red;">1</td>
<td style="height:50%;">2</td>
<td style="height:50%;background:blue;">3</td>
</tr>
<tr><td colspan="3" style="height:10px;">foot</td></tr>
</table>
</body>
</html>

, но тут несколько "но": тормоза в отображении ИЕ таблиц до загрузки всего контента с неопределёнными размерами (стоит забыть указать размеры хотя бы одной картинке), совмещение логики и представления (мусор в коде), мелкие глюки самих ячеек с "colspan".

зачастую лютая необходимость равных колонок -- недалёкость дизайна (и дизайнера), тем более когда речь идёт о разметке всей страницы...

GTXit · 18.02.2009, 01:35

Спасибо за пример табличной разметки. Пока сделал дивами и без картинок, ну соответственно цвет всех колонок пока одинаковый. А по поводу лютой необходимости равных колонок, я подумаю

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