Дивная верстка (блок по центру)
Делаю заметки как для себя так и для начинающих DIV-верстальщиков.
Задача:
Есть макет сайта, например:
где требуется разместить его верстку по центру, шириной допустим 1000 пикселей. Верстку сделать на дивах, или блоками.
Решение:
Для решения этой задачи сделаем в HTML следующий код:
<html> <head> <title>test</title> </head> <body> <div class="main"></div> </body> </html>
по умолчанию DIV объект принимает максимальную ширину дочернего его объекта, а так как он будет находиться внутри тегов BODY он примет ширину равной ширине открытого кона браузера, ну т.е. максимально расширится.
Для того что бы изменить его ширину, просто указываем в CSS нужный параметр, я сразу же опишу все атрибуты стилей для данного блока, а потом каждый из них разберем, и так:
div.main {
width: 1000px;
position: absolute;
left: 50%;
margin-left: −500px;
top:0px;
/*debug*/
border: 1px solid red;
}
И так, рассмотрим что тут написано:
сразу же опущусь до последнего параметра «border: 1px solid red» — это DEBUG свойство, просто, что бы видеть результат
width: 1000px — это мы задали ширину блока, если делать поэтапно, используя DEBUG, мы увидим, что блок уменьшился до 1000 пикселей по ширине и примкнул к левому краю
position: absolute — даем блоку свободу движения
left: 50% — сдвигаем его на половину ширины экрана вправо, при этом блок у нас уйдет за экран на половину
margin-left: −500px — говорим блоку, сдвинуться на пол его ширины влево
top:0px — а это добавим,что бы блок был всегда приклеен к верху документа окна браузера.
Вот и все 
первый шаг сделан, Мы научились делать дивную верстку на примере центрирования блока, остальные блоки как внутри, так и снаружи основного делаются почти по такой же схеме.
Последние комментарии