960 гс, полная ширина фона - PullRequest
Новая
       11

960 гс, полная ширина фона

1 голос
/ 22 декабря 2009

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

У меня есть фоны для 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 css здесь: 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 по запросу

Ответы [ 3 ]

2 голосов
/ 22 декабря 2009

Я бы создал div, называемый content, который содержал бы другие div и делал бы положение других div'ов относительным. Div 'content' будет иметь соответствующую ширину для того, что вы хотите сделать. Также для каждого столбца вы можете использовать свойство css 'float'.

1 голос
/ 22 декабря 2009

Просто оберните классы контейнеров тегами <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>
0 голосов
/ 23 декабря 2009

Я понял это. Мне нужно, чтобы мой колонтитул плавал.

Разметка: 

<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;
}
...