Вы здесь: Главная > CSS > Макет страницы

Макет страницы

Опубликовано автором Просмотры: 25

В былые времена приматы, жившие до появления гоминидов, использовали таблицы HTML для вёрстки веб-страниц. Забавно, правда?! Но вскоре появился CSS, этот монолит 2001: Космическая одиссея, и всё это изменил.

Верстать с помощью CSS легко. Вы просто берёте фрагмент своей страницы и размещаете его там, где пожелаете. Вы можете разместить эти фрагменты абсолютно или относительно другого фрагмента.

Позиционирование

Свойство position используется для определения того, является ли поле абсолютным, относительным, статическим или фиксированным:
static является значением по умолчанию и отображает поле в обычном порядке вещей, как они отображаются в HTML.
relative очень похоже на static, но поле может быть смещено от его исходного положения с помощью свойств top, right, bottom и left.
absolute вырывает блок из обычного потока HTML-кода и доставляет его в отдельный мир. В этом маленьком сумасшедшем мире абсолютное поле можно разместить в любом месте страницы, используя top, right, bottom и left.
fixed ведёт себя как absolute, но он будет абсолютно позиционировать поле по отношению к окну браузера, а не к веб-странице, поэтому фиксированные поля должны оставаться точно там, где они есть на экране, даже при прокрутке страницы.

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

Макет с использованием абсолютного позиционирования

Вы можете создать традиционный макет из двух столбцов с абсолютным позиционированием, если у вас есть что-то вроде следующего HTML:

<div id="navigation">
    <ul>
        <li><a href="this.html">Это</a></li>
        <li><a href="that.html">То</a></li>
        <li><a href="theOther.html">Другое</a></li>
    </ul>
</div>

<div id="content">
    <h1>Ra ra banjo banjo</h1>
    <p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
    <p>(Ra ra banjo banjo)</p>
</div>

Мы придерживаемся старой школы и используем элементы div, чтобы не вводить слишком много нового.

И если вы примените следующий CSS:

#navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
}

#content {
    margin-left: 200px;
}

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

Как глупо просто! И вы не ограничены этим подходом с двумя столбцами. Благодаря продуманному позиционированию вы можете расположить столько блоков, сколько захотите. Например, если вы хотите добавить третий столбец, вы могли бы добавить фрагмент “navigation2” в HTML и изменить CSS на:

#navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
}

#navigation2 {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
}

#content {
    margin: 0 200px; /* setting top and bottom margin to 0 and right and left margin to 200px */
}

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

Floating

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

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

Используя float, вы можете применить float: left или float: right.

Работая с тем же HTML, вы могли бы применить следующий CSS:

#navigation {
    float: left;
    width: 200px;
}

#navigation2 {
    float: right;
    width: 200px;
}

#content {
    margin: 0 200px;
}

Затем, если вы не хотите, чтобы следующее поле обтекало плавающие объекты, вы можете применить свойство clear:
clear: left очистит левые плавающие поля
clear: right очистит правые плавающие поля
clear: both очистит как левое, так и правое плавающие поля.

Итак, если, например, вам нужен нижний колонтитул на вашей странице, вы могли бы добавить фрагмент HTML…

<div id="footer">
    <p>Footer! Hoorah!</p>
</div>

…а затем добавьте следующий CSS:

#footer {
    clear: both;
}

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

Это было общее введение в позиционирование и перемещение с акцентом на большие “куски” страницы, но помните, что эти методы могут быть применены и к любому блоку внутри этих блоков. С помощью комбинации позиционирования, плавающего текста, полей, отступов и границ вы должны быть в состоянии представить любой веб-дизайн, который может создать ваше озорное воображение. Лучший способ научиться? Поработайте! Играйте! Вперёд!

Страницы в тему:

Примеры CSS:

Добавить комментарий