Я пытаюсь реализовать дизайн, который я создал в фотошопе. Я хочу использовать 16 столбцов 960 GS, но проблема в том, что мне нужен только контент, ограниченный шириной 960.
У меня есть фоны для 4 отдельных областей. Заголовок, область содержимого, верхний нижний колонтитул со ссылками и нижний нижний колонтитул с указанием авторских прав.
Верхняя половина страницы работает нормально. Фоны видны, текст на месте. Проблема возникает с нижним колонтитулом. Если данные в области содержимого превышают минимальную высоту для области содержимого, ссылки в верхнем нижнем колонтитуле сдвигаются вниз, но фон остается неподвижным. Я подозреваю, что это связано с тем, что весь контент плавает и не выталкивает фоновые элементы div при расширении контента.
Как мне получить фон полной ширины при использовании 960 gs и сделать так, чтобы нижний колонтитул скользил вниз при расширении содержимого?
Вот базовая оболочка для моего сайта. Я понимаю, что это может не сработать для того, что я хочу сделать.
<body>
<div id="header">
<div class="container_16">
</div>
</div>
<div id="content">
<div class="container_16">
</div>
</div>
<div id="footer-top">
<div class="container_16">
</div>
</div>
<div id="copyright-footer">
<div class="container_16">
</div>
</div>
</body>
css для 960 GS находится здесь: http://www.spry-soft.com/grids/grid.css?column_width=40&column_amount=16&gutter_width=20
Мой CSS — я опустил элементы, которые имеют отношение к определенному контенту, так как это просто для правильного макета:
html, body
{
height: 100%;
}
body
{
color: #f7f3e7;
margin:0;
padding:0;
background-color: #f7f3e7;
line-height: 1.2em;
font-size: 0.8em;
font-family: Verdana, Arial, Sans-Serif;
}
#header
{
height: 100px;
margin:0;
padding:0;
background: #666666 url(content/images/Home-Header-Bg.jpg) repeat-x;
}
#content
{
min-height: 550px;
/*min-height: 546px;*/
margin:0;
padding:0;
background: #f7f3e7 url(content/images/Home-Content-Bg.jpg) repeat-x top;
}
#top-footer
{
font-size: .8em;
min-height: 188px;
margin:0;
padding: 6px 0 6px 0;
background: #a67c52 url(content/images/Top-Footer-Bg.jpg) repeat-x top;
}
#copyright-footer
{
height: 32px;
vertical-align: middle;
font-size: 0.8em;
line-height: 32px;
margin:0;
padding:0;
background: #976f46 url(content/images/Copyright-Footer-Bg.jpg) repeat-x;
}
заголовок, содержимое, нижний колонтитул и нижний колонтитул с копирайтом имеют заданный фон и высоту или минимальную высоту.
На самом деле я хочу, чтобы заголовок имел высоту 100 пикселей. Нижний колонтитул с копирайтом имеет высоту 42 пикселя. Верхний нижний колонтитул имеет высоту 200 пикселей. Я хочу, чтобы нижняя часть нижнего колонтитула авторского права всегда располагалась внизу страницы, если область содержимого достаточно коротка, чтобы нижний колонтитул не касался нижней части страницы. Если область содержимого расширяется, я хочу, чтобы нижний колонтитул скользил вниз. Я хочу, чтобы фоны для всех разделов были 100% - то есть, какой бы ширины ни был браузер, но я хочу, чтобы мой контент был привязан к системе сетки 960.
Какие-либо предложения?
РЕДАКТИРОВАТЬ: добавлен CSS по запросу
