Для начала смотрим демонстрационную страницу с макетом
Итак, чтобы создать одноколоночный макет с выравниванием по центру страницы, нужно:
Полный код демо-страницы:
<html>
<head>
<title>Построение одноколоночного макета сайта с фиксированной шириной колонки</title>
<style type="text/css">
body {width:600px;
padding-left:50%;}
#wrapper {width:600px;
margin-left:-300px;background:#ccc;padding:20px;}
</style>
</head>
<body>
<div id="wrapper">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet massa ut nisi sodales aliquet. Curabitur rutrum tortor sagittis enim sagittis sed scelerisque velit tincidunt. Phasellus hendrerit porttitor sagittis. Nullam nisl dui, tempus nec mattis ac, dictum in risus. Nulla blandit, eros vitae rutrum sagittis, lacus dui pharetra ante, et venenatis turpis risus ut eros. Nam tempor sapien vitae erat ornare cursus. Vestibulum varius lorem nec nunc bibendum sit amet adipiscing quam fringilla. Phasellus sit amet tortor in nisl condimentum dictum. Pellentesque laoreet nisi eget ligula pellentesque venenatis sed eu dui. Nulla ornare pellentesque risus pellentesque fermentum. Integer lorem mi, volutpat ac pulvinar ut, auctor eu tellus. Mauris eget dolor id leo accumsan tincidunt eu ut purus. Nulla neque sem, volutpat vel fermentum at, luctus ac diam. Nunc cursus, ante ac iaculis ultrices, urna neque dignissim felis, quis sodales dolor odio at nisi.
</div>
</body>
</html>
Итак, чтобы создать одноколоночный макет с выравниванием по центру страницы, нужно:
- Задать значение ширины для элемента body (например, width:600px;)
- Установить для body значение левого отступа равным 50% (padding-left:50%;)
- Заключить содержимое документа в блок div, присвоить этому блоку какой-либо идентификатор id (например,с названием wrapper, получим div id="wrapper")
- Задать значение ширины для блока div (опять же 600px, как и для body)
- Задать для блока div левое отрицательное поле, равное половине ширины блока (margin-left:-300px;)
Полный код демо-страницы:
Code
<html>
<head>
<title>Построение одноколоночного макета сайта с фиксированной шириной колонки</title>
<style type="text/css">
body {width:600px;
padding-left:50%;}
#wrapper {width:600px;
margin-left:-300px;background:#ccc;padding:20px;}
</style>
</head>
<body>
<div id="wrapper">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet massa ut nisi sodales aliquet. Curabitur rutrum tortor sagittis enim sagittis sed scelerisque velit tincidunt. Phasellus hendrerit porttitor sagittis. Nullam nisl dui, tempus nec mattis ac, dictum in risus. Nulla blandit, eros vitae rutrum sagittis, lacus dui pharetra ante, et venenatis turpis risus ut eros. Nam tempor sapien vitae erat ornare cursus. Vestibulum varius lorem nec nunc bibendum sit amet adipiscing quam fringilla. Phasellus sit amet tortor in nisl condimentum dictum. Pellentesque laoreet nisi eget ligula pellentesque venenatis sed eu dui. Nulla ornare pellentesque risus pellentesque fermentum. Integer lorem mi, volutpat ac pulvinar ut, auctor eu tellus. Mauris eget dolor id leo accumsan tincidunt eu ut purus. Nulla neque sem, volutpat vel fermentum at, luctus ac diam. Nunc cursus, ante ac iaculis ultrices, urna neque dignissim felis, quis sodales dolor odio at nisi.
</div>
</body>
</html>
Всего комментариев: 0
Оставь комментарий первым!
