№12 Создание css макетов с фиксированной шириной.

Макет сайта с фиксированной шириной отличается основной областью для содержания (wrapper), ширина которой выставлена в неизменное значение, не зависящее от разрешения экрана пользовательского агента.

Плюсы такого макета

• Контейнер для основного содержания сайта жестко зафиксирован, для него не нужно выставлять максимальную или минимальную ширину;

• В некоторых случаях использовать макеты с фиксированной шириной проще для создания определенных эффектов или дизайнерских решений (например, для позиционирования выпадающего меню или всплывающих подсказок к полям формы). Некоторые макеты дизайна разумно верстаются только с использованием фиксированной ширины основного контейнера;

Его минусы

• Заявленная «оптимальная для максимальной читаемости текста» ширина не может адекватно выполнять свою роль, если текст на сайте был значительно увеличен при неизменном отношении высоты строки текста к его размеру (в данном случае получается, что текст «разреживается», и его очень трудно воспринимать). Однако, стоит заметить, что при наличии хорошего дизайна эта проблема возникает только при очень сильном увеличении текста;

• У пользователей с небольшими мониторами (640×480 пикселей, также стоит не забывать про мобильные устройства) возникнет горизонтальная полоса прокрутки на сайте шириной в 760 пикселей. Хотя и это очень нечастая проблема;

• Сайт, шириной в 760 пикселей может смотреться довольно неприглядно (слишком узко) на мониторах с большим разрешением экрана;

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

<body class="clearfix">

<div id="content" class="column"></div>

<div id="nav1" class="column"></div>

<div id="nav2" class="column"></div>

</body>

CSS

html, body {

margin: 0;

padding: 0;

border: 0;

}

html {

overflow: auto;

height: 100%;

}

body {

height: auto;

min-height: 100%;

min-width: 760px;

}

#content {

width: 456px;

float: left;

min-height: 100%;

margin: 10px 21px 10px 10px;

padding: 10px;

border: 2px solid #BBB;

background: #FFF;

}

#nav1 {

width: 200px;

margin: 0 11px;

padding: 0;

}

#nav2 {

width: 200px;

margin: 0 11px;

padding: 0 0 20px;

}

№13 Центрирование css макетов с фиксированной шириной

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

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

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

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

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

Один для области Logo (Логотип) шириной 760 пикселов;

Один для области Nav (Навигация) шириной 200 пикселов;

Один для области Content (Содержимое) шириной 400 пикселов;

Один для области Links (Ссылки) шириной 160 пикселов.

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

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

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

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

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

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

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