КОМПЬЮТЕРНЫЕ КУРСЫ "ПОИСК"

УЧЕБНЫЕ МАТЕРИАЛЫ ПО ПРОГРАММИРОВАНИЮ, КРЕКИНГУ, HTML, CSS, ОФИСНЫМ ПРИЛОЖЕНИЯМ

[Главная страница] [HTML/CSS] [Контакты]

Вопросы, касающиеся макетов

3. Центрирование CSS макетов с фиксированной шириной

Хороший метод для центрирования CSS-макетов с фиксированной шириной заключается в использовании вложенных слоев, также известных как вложенные разделы. Вложенный слой - это элемент раздела внутри другого раздела, точно так же, как вложенные таблицы - это таблицы внутри таблиц. В данном сценарии основной разделявляется контейнером. Вложенные внутри него слои представляют содержимое сайта. На рисунке 3.1 показан типичный CSS-макет, использующий вложенные слои.

Определение

Вложенный слой, или вложенный раздел, - это элемент раздела, который расположен внутри другого раздела

Для этого макета требуется четыре вложенных раздела:

  1. Один для области Logo (Логотип) шириной 760 пикселов;
  2. Один для области Nav (Навигация) шириной 200 пикселов;
  3. Один для области Content (Содержимое) шириной 400 пикселов;
  4. Один для области Links (Ссылки) шириной 160 пикселов.

Также необходим контейнерный элемент, который будет содержать четыре перечисленных раздела.

Хитрость данного метода заключается в установке левого края страницы на центральную точку окна браузера, что достигается добавлением атрибута style к тегу body страницы:

<body style="margin-left: 50%;">

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

Теперь, когда левый край страницы начинается в центре окна браузера, необходимо выразить положение контейнерного элемента относительно этого края. Используйте этот код:

<div id="container" style="position: relative; width: 760px; left:-380px;">

Смещение слева выражается отрицательным значением, и на то есть причина. Поскольку положение контейнерного элемента является относительным, а не абсолютным, браузер использует смещение слева немного по-другому, вычитая 380 пикселов от позиции левого края страницы. Почему 380 пикселов? Потому что 380 - это половина от числа 760, которое является общей шириной макета. По существу нужно найти центр страницы и сместиться на половину ширины макета в одну сторону. В результате мы получим идеально отцентрированный контейнерный элемент.

При использовании данного метода, смещение слева контейнерного элемента всегда равняется половине его ширины. Однако если у вас нет времени для вычислений, в таблице 16.1 приведены готовые значения.

Таблица 3.1. Распространенные ширины контейнерного элемента и соответствующие смещения слева
Ширина экрана Ширина контейнерного элемента Смещение слева для центрирования
640 пикселов 600 пикселов 300 пикселов
800 пикселов 760 пикселов 380 пикселов
1024 пикселов 954 пикселов 477 пикселов
1280 пикселов 1210 пикселов 605 пикселов
1600 пикселов 1530 пикселов 765 пикселов

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

Вот исходный код для готового макета:

<body style="margin-left:50%">
  <!-- Атрибут style перемещает левый край страницы на центр окна браузера. -->
  <!-- Это контейнерный элемент. Отрицательное смещение слева задано относительно левого края страницы,
  определенного в теге body, и его значение равняется половине ширины. -->
  <div id="container" style="position:relative; width:720px; left:-380px;">

    <!-- Здесь идут вложенные элементы. -->
    <div id="logo" style="position:absolute; width:760px; top:0px; left:0px; height: 100px;">
      Logo
    </div>

    <div id="nav" style="position:absolute; width:200px; top:100px; left:0px;">
      Nav
    </div>

    <div id="content" style="position:absolute; width:400px; top:100px; left:200px">
      Content
    </div>

    <div id="links" style="position:absolute; width:160px; top:100px; left:600px">
      Links
    </div>
    <!-- Перечисление вложенных элементов закончено. -->

  </div>
  <!-- Предыдущая строка закрывает контейнерный элемент. -->
</body>