960 gs, полная ширина фоны

Я пытаюсь реализовать дизайн, который я создал в Photoshop. Я хочу использовать 16 столбцов 960 GS, но проблема в том, что я хочу, чтобы содержимое ограничивалось шириной 960.960 gs, полная ширина фоны

У меня есть фоны для 4 отдельных областей. Заголовок, область содержимого, верхний нижний колонтитул, который является ссылками, и нижний нижний колонтитул с авторским правом.

Верхняя половина страницы отлично работает. Фон показывает, что текст находится в нужном месте. Проблема связана с нижним колонтитулом. Если данные в области содержимого расширяются за пределы минимальной высоты для области содержимого, ссылки в верхнем нижнем колонтитуле сдвигаются вниз, но фоны остаются неподвижными. Я подозреваю, что это связано с тем, что содержимое полностью плавающее и не подталкивает фоновые div, когда содержимое расширяется.

Как получить фоновый рисунок с полной шириной при использовании 960 гс и сделать так, чтобы нижний колонтитул скользил вниз, когда содержимое расширяется?

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

<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>

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.

Любые предложения?

EDIT: добавлен CSS в соответствии с просьбой

источник

2009-12-22 Josh

У вас есть пример на сайте? – Sampson

Да, мне кажется, нам нужен CSS, чтобы ответить на этот вопрос. –

Я добавил css. Для области содержимого вам может потребоваться изменить цвет текста, чтобы увидеть его, поскольку я делаю это в своих отдельных разделах в своем контенте. – Josh

Я понял. Мне нужно было сложить нижний колонтитул.

Разметка:

<body marginwidth="0" marginheight="0 leftmargin="0" topmargin="0"> 
    <div id="page-wrapper"> 
    <div id="header" class="container_full"> 
     <div class="container_16"> 
     <div id="logo" class="grid_4 alpha"><a href="/"><img src="content/images/logo-beta.png" /></a></div> 

     <div class="grid_10 push_0"> 
     <ul id="navigation" class="clearfix-header"> 
      <li><a class="header-link" href="#">About</a> 
       <span class="sub-navigation"> 
        <a class="sub-link" href="#">Info</a>, <a class="sub-link" href="#">Terms</a></li> 
       </span> 
      </li> 
      <li><a class="header-link" href="#">Account</a> 
       <span class="sub-navigation"> 
        <a class="sub-link" href="#">Sign In</a>, <a class="sub-link" href="#">Sign Up</a> 
       </span> 
      </li> 
     </ul> 
     </div> 

     </div> 
    </div> 

    <div id="content" class="container_full"> 
     <div class="container_16"> 

      <div id="page-content" class="grid_16">Page Content</div> 

     </div> 
    </div> 

    <div id="footer"> 
    <div id="top-footer"> 
     <div class="container_16"> 
      <div class="grid_3"> 
       <h4>Navigation</h4> 
       <ul> 
       <li><a href="#">Sample Link</a></li> 
       <li><a href="#">Sample Link</a></li> 
       <li><a href="#">Sample Link</a></li> 
       <li><a href="#">Sample Link</a></li> 
       <li><a href="#">Sample Link</a></li> 
       <li><a href="#">Sample Link</a></li> 
       </ul> 
      </div> 
      <div class="grid_3"> 
       <h4>Navigation</h4> 
       <ul> 
       <li><a href="#">Sample Link</a></li> 
       <li><a href="#">Sample Link</a></li> 
       <li><a href="#">Sample Link</a></li> 
       <li><a href="#">Sample Link</a></li> 
       <li><a href="#">Sample Link</a></li> 
       <li><a href="#">Sample Link</a></li> 
       </ul> 
      </div> 
      <div class="grid_7"> 
       Big content area 
      </div> 
      <div class="grid_3"> 
       <h4>Boring Stuff</h4> 
       <ul> 
       <li><a href="#">Terms of Use</a></li> 
       <li><a href="#">Privacy Policy</a></li> 
       <li><a href="#">Legal Mumbo-jumbo</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

    <div id="copyright-footer"> 
     <div class="container_16"> 
      <div class="grid_16"> 
       Copyright statement 
      </div> 
     </div> 
    </div> 
    </div> 
    </div> 
</body>

CSS-:

#footer 
{ 
    width:100%; 
    float: left; 
    height: 232px; 
    position: relative; 
    clear:both; 
} 

#top-footer 
{ 
    width:100%; 
    font-size: .8em; 
    height: 200px; 
    margin:0; 
    padding: 6px 0 6px 0; 
    background: #a67c52 url(content/images/Top-Footer-Bg.jpg) repeat-x top; 
} 

#copyright-footer 
{ 
    width:100%; 
    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; 
}

источник

2009-12-23 18:08:53 Josh

Я хотел бы создать DIV под названием «содержание», который будет содержать другие дивы и сделать другую диву положение относительно. «Content» div будет иметь соответствующую ширину для того, что вы хотите сделать. Кроме того, для каждого столбца вы можете использовать свойство «float» css.

источник

2009-12-22 17:52:23 Partial

У меня было что-то в этом роде, но это не помогло. – Josh

Просто оберните классы контейнеров <div> тегами и настройте их. Не забудьте добавить .clear divs после каждой «строки» в контейнерах (даже если у вас есть только одна «строка»), или она не будет работать должным образом.

<div id="container"> 
    <div class="container_16"> 
    <div class="grid_16"><h1>Hello, World!</h1></div> 
    <div class="clear"></div> <!-- Important! --> 
    </div> 
</div>

источник

2009-12-22 18:55:01 Veeti

960 gs, полная ширина фоны

ответ

Смежные вопросы