CSS: проблема с цветом фона - PullRequest
Новая
       28

CSS: проблема с цветом фона

0 голосов
/ 16 августа 2011

Я хочу, чтобы фон верхнего и нижнего колонтитула повторялся на х.Таким образом, он принимает весь размер ширины любого разрешения страницы.

Вот как я хочу, чтобы он выглядел следующим образом: Concept

Вот как это отображается: Template

Я использую 960 gs, каждый div ограничен 960px.Есть ли способ расширить цвет div через x?

Смотрите проект здесь: http://gabrielmeono.com/yonature/

1 Ответ

1 голос
/ 16 августа 2011

да, есть

Вы должны разделить страницу на 3 части: верхний и нижний колонтитулы что мы собираемся сделать, это создать div с небольшим количеством CSS. у нас будет div, который идет по всем сторонам сайта, и div, который центрируется. я покажу вам, как сделать это для заголовка, и вы сделаете то же самое для body / footer: 

<html>
<head>
<style type="text/css">
html{}
body { margin: 0px; width: 100%; }
#headerCenter { float: left; width: 100%; text-align: center; color: #00AA00; height: 120px; }
#headerContainer { margin: 0 auto; width: 960px; }
#header { width: 100%; float: left; height: 120px; }
</style>
</head>
<body>
<div id="headerCenter">
    <div id="headerContainer">
        <div id="header">HEADER</div>
    </div>
</div>

.. same for body/footer....
</body>
</html>

так что хитрость:

  • div (#headerCenter), который проходит через всю страницу. мы определим для него высоту, нарисуем его фон и установим 'text-align: center;'

  • внутри мы помещаем div с 'margin: 0 auto;' и желаемая ширина. НЕТ ПЛАВАТЬ на этом div! это создаст div с высотой 0, помещенный в центр родительского div.

  • внутри мы помещаем заголовок. мы можем установить float влево и т. д. ширина может быть 100% (или 960px)

повторите это для тела и нижнего колонтитула

другой метод, кстати, использует HTML-таблицы, которые я не люблю использовать для макетов. если у вас возникнут проблемы с настройкой, дайте мне знать, и я сделаю макет для вас

...