Вторник, 10 Апреля 2012 14:37

Шаблон html страницы

Written by 
Оцени эту запись
(9 Голоса)
Шаблон html страницы Шаблон html страницы

Учимся верстать блоками! Цель: создать шаблон html страницы с тремя колонками (левой, правой, центральной) одинаковой высоты, с футером, прижатым книзу.

В этой статье я расскажу о том, с какими сложностями сталкивается верстальщик при создании html-страницы. Мы создадим только оболочку страницы(шаблон), не рассматривая ее внутренних элементов - логотип, меню, контент и т.д. Зато в дальнейшем вы сможете использовать этот шаблон как основу для написания любой html страницы. Понятно, что вид шаблона и его реализация зависит от конкретной задачи, от полученного макета. Здесь рассматривается html страница с тремя колонками, но если нужны только две, то придется немного изменить стили. Верстать будем блоками, в данном шаблоне страница имеет фиксированную высоту (1000px, позже узнаете почему именно так) и footer (подвал), прижатый к низу. 

 

Для прижатия футера страницы будем использовать вспомогательный элемент с классом wrapper, который будет объединять все блоки кроме подвала. Какие стили нужны для этого элемента, подробно будет описано ниже.  

Для создания иллюзии(почему это только иллюзия узнаете ниже) одинаковой высоты колонок шаблона html страницы, используем дополнительные блоки с абсолютным позиционированием. Именно они на демо окрашены в разные цвета.

 

Для начала демо.

 

Здесь html код выглядит так:

 

<div class="wrapper">
<div class="header"></div>
    <div class="container">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
        <div class="clear"></div>
        <div class="left_bg"></div><div class="center_bg"></div><div class="right_bg"></div>
    </div>
</div>
<div class="footer"></div>

 

Теперь разберем это счастье по полочкам.

 

Основные элементы:

  • wrapper
  • footer

 

Внутри wrapper'а лежат:

  • header
  • container

 

Внутри container лежат колонки:

  • left
  • center
  • right

 

Что такое header и footer, надеюсь, все понимают. На менее понятных элементах шаблона html страницы остановимся подробнее.

А для начала, напомню как подключаются стили. Для этого в <head> страницы вписываем строчку:

 

<link rel="stylesheet" type="text/css" href="/style/style.css">

 

Здесь rel - указывает "зачем" мы подключаем файл, type - "что" это за файл, href указывает "где" его взять.

 

Наш файл со стилями выглядит так:

 

body, html {width: 100%; height: 100%; padding: 0px; margin: 0px;}
.wrapper {margin: 0 auto; width: 1000px; min-height: 100%; height: auto !important; height: 100%; background: #000; color: #555; font-family: Arial, Helvetica, sans-serif;}
.header {width: 1000px; height: 100px; background: #ff0;}
.container {padding-bottom: 50px; width: 1000px; min-height: 100%; height: auto !important; height: 100%; background: #000; position:relative;}
.footer {width: 1000px; margin: -50px auto 0; background: #0f0; position: relative; height: 50px;}
.left, .center, .right {float:left; z-index: 2; position:relative;}
.left {width: 200px;}
.center {width: 600px;}
.right {width: 200px;}
.clear {clear: both;}
h3 {margin:0px;}
.left_bg, .center_bg, .right_bg {position: absolute; top: 0px; height: 100%; z-index: 1;}
.left_bg {width: 200px; background: #f00; left: 0px;}
.center_bg {width: 600px; background: #00f; lefT: 200px;}
.right_bg {width: 200px; background: #f0f; right: 0px;}

 

 

1. А что ж такое wrapper и зачем он нужен?

 

 

Здесь элемент с классом wrapper нужен для прижатия футера к низу экрана. Он будет сидеть внизу, даже если страница почти пустая. Этому элементу задаем такие стили:

 

margin: 0 auto;

width: 1000px;

min-height: 100%;

height: auto !important;

height: 100%;

 

Для прижатия футера нужны строки: min-height: 100%; height: auto !important; height: 100%;

Этим мы растягиваем wrapper на всю высоту экрана. Футер находится ниже. 

Далее внутреннему элементу container задаем padding-bottom: 50px, где 50px - это высота footer'а, а footer'у задаем height: 50px; margin-top: -50px.

Вот и весь секрет.

 

 

2. Стили для html и body - основы html страницы.

 

 

Этим элементам прописываем такие стили:

 

width: 100%;

height: 100%;

padding: 0px;

margin: 0px;

 

Это нужно для обнуления всяких отступов. Если нужны отступы, их лучше прописать внутренним элементам.

 

 

3. Ширина HTML страницы.

 

 

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

Так вот, я предпочитаю ширину 1000 пикселей. Считается (не мной придумано), что верстку нужно рассчитывать на мониторы от 1024px, но нужно учитывать 22px, которые браузер забирает на вертикальную прокрутку. Округляем, получаем 1000px.

Свойство margin: 0 auto; располагает элемент горизонтально по центру страницы.

 

 

4. Колонки в основной части шаблона.

 

Колонкам (left, right, center) задаем плавающее свойство float со значением left, т.е

 

float:left;

 

Благодаря этому, колонки выстроятся рядышком. Напомню, что <div> - это блочный элемент, для которого свойственно начинаться с новой строки и переводить строку за собой. Float - "обтекание", если оно задано блочному элементу, то следующий отобразится рядом(кстати, если задано строчному элементу, он становится блочным с обтеканием).

Еще указываем ширину, в пикселях или процентах.

 

 

5. Фон одинаковой высоты - иллюзия одинаковой высоты колонок страницы

 

 

Это интересный пункт)) Одной из особенностей блочной верстки является то, что блок имеет высоту, определенную внутренним контентом. То есть, фактически, высота левого, правого и центрального блоков разная. Бывают случаи, когда им нужно задать фон или, например, границу. Если мы зададим левому блоку border-right и он будет меньше центрального, это будет некрасиво. А это плохо. Потому  известен вариант использования дополнительных блоков, абсолютно позиционированных, для создания иллюзии одинаковой высоты.

 

В моем случае внизу блока container добавлены три блока

 

<div class="left_bg"></div>

<div class="center_bg"></div>

<div class="right_bg"></div>

 

Им заданы абсолютное позиционирование, верхняя позиция, высота 100%, нужные ширина и позиция слева. 

 

position: absolute;
top: 0px;
height: 100%;

 

Ширина задается такая же, как у соответствующего блока (left=left_bg). У left_bg left:0px, center_bg left:200px , right_bg right:0px.

Ну и им же нужно задать нужный вид.

 

 

6. Clear:both

Свойство clear используется и для создания основного шаблона html страницы, и для структурирования отдельных ее частей.

Этим свойством отменяем действие обтекания (float'а) на элемент. Значения clear могут быть - left, right, none, both. А значит можем отменить обтекание слева, справа или оба. В данном случае, я его использую по двум причинам:

  • чтобы footer не пытался стать где-то между левым и правым блоками
  • чтобы у элемента container была нормальная высота, зависящая от высоты дочерних элементов. Ибо, если у блока внутри все элементы плавающие, то его высота = 0.  

Additional Info

Комментарии  

 
0 #1 Антон 03.09.2015 14:11
Добрый день набрал ваш код и увидел, что колонки не заполняют содержимое контейнера (container) как планировалось в уроке.
https://jsfiddle.net/saves7/desdtv0m/
здесь результат кода:
https://jsfiddle.net/saves7/desdtv0m/embedded/result/
Цитировать
 

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


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

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов