Фиксированный макет c одной колонкой

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

  1. Создаем папку, например, fix, в ней создаем два файла: шаблон html, назовем его fix.htm, и файл со стилями style.css.
  2. Скачиваем текстовый редактор Notepad++, если он у вас еще не установлен.
  3. Хотя примеры работают во всех браузерах, я рекомендую установить браузер chrome, и в дальнейшем работать именно в этом браузере. Так как он гораздо быстрее, и имеет больше преимуществ.

Подготавливаем шаблон html. Открываем fix.htm в текстовом редакторе Notepad++, ставим кодировку UTF-8 (без BOM):

Далее записываем следующий код:

Фиксированный макет c одной колонкой

Создаем файл для стилей style.css, путь к нему уже прописан в шаблоне. Для начала при помощи * (звездочки) уберем все отсутпы у элементов, которые установелены по умолчанию:

Фиксированный макет c одной колонкой

Далее для html и body устанавливаем ширину, высоту и цвет фона:

Фиксированный макет c одной колонкой

А теперь переходим к нашему блоку с классом fix. Для этого блока нам необходимо задать ширину, минимальную высоту, отступы справа и слева, и установить относительное позиционирование при помощи свойства position со значениме relative:

Фиксированный макет c одной колонкой

Чтобы блок отображался по центру, у свойства margin нужно задать значение 0 auto. Таким образом отступы слева и справа будут устанавливаться автоматически, и также они будут равны друг другу. Чтобы это сработало, необходимо указывать ширину блока. Если ширину мы не укажем, то блок будет прибит к левому краю. Минимальная высота, которая указывается при помощи свойства min-height, равна 100%, это значение необходимо для того, чтобы блок растягивался на всю высоту страницы. Также это не сработает, если мы для тегов html и body не укажем высоту height, равную 100%.

Сохраняем изменения, и открываем шаблон в браузере:

Фиксированный макет c одной колонкой

В следующем уроке создадим шапку и подвал.

Видеоматериал по этому уроку: 

http://youtu.be/kr6C_oMHrR0

Источник: http://psd-html-css.ru/css/fiksirovannyy-maket-c-odnoy-kolonkoy

Читать комменты и комментировать

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



Защитный код
Обновить

Фиксированный макет c одной колонкой | | 2012-03-29 11:22:00 | | Статьи Web-мастеру | | Давайте создадим отдельную папку, в которой у нас будут храниться шаблоны для фиксированного макета с одной, двумя и тремя колонками. В дальнейшем вы можете их использовать для создания своих | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: