UniSite CMS - Современный движок для Ваших сайтов.

ZHUR ARTUR.ru

Персональный блог по созданию
мощных и современных Web-Проектов!

Компания Google зарабатывает примерно $700 каждую секунду. © Google

»

Введите код полученный после подписки

  • 8

  • 0

Резиновая разметка сайта

Автор - Жур Артур | Добавлено - 2014-02-12 | Просмотров - 4763 | Скачено - 58

1HTML разметка


Шапка.

Левый блок.

Правый блок.

Основной блок.

<div id="block-body" ></div> - Этот блок нужен для того, чтобы установить минимальную ширину для всего сайта, тоесть если уменьшать ширину браузера, то сайт будет уменьшаться по ширине до определенного размера. Размер вы можете изменить в стилях этого блока.

2CSS стили


/*Основной блок. С минимальной фиксированной шириной. Меньше 1100px сайт уменьшаться не будет.*/
#block-body{
    min-width: 1100px;
}
/*Шапка*/
#block-header{
    border: 1px solid black; /*Рамка блока*/
    left: 0; right: 0; /*Растягиваем блок к левой и к правой стороне*/
    height: 120px; /*Высота блока*/
    margin-bottom: 10px; /*Нижний отступ*/
}
/*Центральный блок*/
#block-center{
    border: 1px solid black;  
    min-height: 600px;   /*Минимальная высота. Меньше значения 600px блок уменьшаться по высоте не будет. Это ограничение огромной роли не играет.*/
    margin-left: 273px;   /*Левый отступ с учётом ширины левого блока*/
    margin-right: 273px;   /*Правый отступ с учётом ширины правого блока*/
}
/*Левый блок*/
#left-block{
    border: 1px solid black;  /*Рамка блока*/
    width: 250px; /*Ширина блока*/
    float: left; /*Оптекание по левой стороне*/
    margin-left: 10px; /*Левый отступ от браузера*/
}
/*Правый блок*/
#right-block{
    border: 1px solid black;  /*Рамка блока*/
    width: 250px; /*Ширина блока*/
    float: right; /*Оптекание по правой стороне*/
    margin-right: 10px; /*Правый отступ от браузера*/
}
/*Нижний блок*/
#block-footer{
    border: 1px solid black; 
    left: 0; right: 0; bottom: 0px;
    height: 150px;
    clear: both; /*Отменяем оптекание со всех сторон для нижнего блока*/  
    margin-top: 10px;     
}

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

Интересное

Комментарии