Урок №9. CSS. Позиционирование блоков.

При изучении уроков HTML, для построения странички сайта мы использовали таблицы. Преимуществ у них, как у каркаса сайта маловато. А недостатков больше, из которых объемный код, нечитабельный код, нет никакой логики при верстке.

А в CSS, при построении страницы, используют блоковую модель – тег <div>. В данном случае код становиться компактным, логичным, управлять страницами не составляет труда. Но и тут не так все гладко, дело в том, что в разных браузерах, страничка может искажаться, приходится адаптироваться и писать гибкий код, что бы добиться одинаковой страницы в разных браузерах.

Поехали.

Даже человек, который далёкий от сайтостроения, при просмотре любого сайта в интернете условно разделяет его на четыре части: шапка, меню, контент и подвал. Таким же образом поступим и мы!

Давайте создадим страничку, которая будет содержать 4 тега div, каждому из них зададим свой идентификатор, и разберемся что к чему.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

   <html>

     <head>

       <title>Позиционирование блоков</title>

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

     </head>

     <body>

       <div id="head">шапка сайта</div>

       <div id="menu">меню</div>

       <div id="content">контент</div>

       <div id="footer">низ сайта</div>

     </body>

   </html>

 

Теперь в таблице стилей, зададим уже знакомые свойства и значения:

#head{

  background:silver;

  width:800px;

  height:120px;

}

#menu{

  background:gold;

  width:200px;

  height:250px;

}

#content{

  background:gold;

  width:550px;

  height:250px;

}

#footer{

  background:silver;

  width:800px;

  height:35px;

}

 

Результат:

Позиционирование блоков

 

Как то не очень красиво, да? Это потому что, позиционирование выполнено в нормальном потоке, это значит, что элементы отображаются сверху вниз, как и прописано в коде.

Всего есть 3 способа позиционирования:

  1. Абсолютное позиционирование
  2. Относительное позиционирование
  3. Плавающая блоковая модель

Что бы задать способ позиционирования используется свойство position, значением данного свойства могут быть:

    Static – позиционирование блока в нормальном потоке. Используется по умолчанию.

    Relative – относительное позиционирование блока (относительно нормального потока).

    Absolute – абсолютное позиционирование (возможность задавать координаты блока).

    Fixed – фиксация блока в зоне просмотра.

Этот урок будет посвящен абсолютному позиционированию. Остальное чуть позже.

 


 

Абсолютное позиционирование

В данном случае, неважно, где расположен блок в html-документе. Месторасположение блока задается вручную, с помощью четырех возможных свойств:

    Left – смещение блока относительно левого края окна.

    Right – смещение блока относительно правого края окна.

    Top – смещение блока относительно верхнего края окна.

    Bottom – смещение блока относительно нижнего края окна.

В качестве значения для этих свойств, используют единицы измерения.

Так как наши блоки позиционируют в нормальном потоке, свойство position использовать ненужно, просто пропишем смещение блоков:

#head{

  background:silver;

  width:800px;

  height:120px;

}

#menu{

  background:gold;

  width:200px;

  height:250px;

}

#content{

  background:gold;

  width:550px;

  height:250px;

  position:absolute;

  left:200px;

  top:120px;

}

#footer{

  background:silver;

  width:800px;

  height:35px;

}

 

Результат:

Пример свойства position

 

Как видно из примера, мы сместили блок с идентификатором content. Для этого было прописано абсолютное позиционирование (position:absolute) и задано смещение от левого края окна на 200 пикселей (это ширина блока menu) и относительно верхнего края на 120 пикселей (высота блока head). Таким образом, блок с контентом получился в центре внимания.

Но как то кривовато, по-моему!

А получилось так, потому что у каждого браузера есть своя таблица со стилями, которые используются по умолчанию. И так же есть поля и отступы по умолчанию, которых мы не учли при построении странички. Исправим это.

Назначим для тега body нулевые поля (margin: 0px;)

body{

  margin:0px;

}

 

Результат:

Пример свойства position

 

Запомните! При абсолютном позиционировании необходимо прописывать свойство position:absolute для блока, который должен позиционировать относительно родительского элемента. В примерах выше родителем выступает окно браузера, но может быть иначе, блок в блоке например.

Добавим блок с рекламой в контент и расположим его в правой части блока с контентом.

В блок div id="content" добавим блок div id="ad" :

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

   <html>

     <head>

       <title>Позиционирование блоков</title>

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

     </head>

     <body>

       <div id="head">шапка сайта</div>

       <div id="menu">меню</div>

       <div id="content">

       контент

       <div id="ad">блок с рекламой</div>

</div>

       <div id="footer">низ сайта</div>

     </body>

   </html>

 

В таблицу стилей добавим:

#ad{

  background:red;

  width:150px;

  height:220px;

  position:absolute;

  left:395px;

  top:15px;

}

 

Результат:

Пример свойства position

 

Как видно, ширина блока с рекламой равна 150 пикселям, а ширина блока с контентом равна 550 пикселей. В таком случае мы отступаем относительно левого края родительского элемента на (550-150 = 400) 400 пикселей, но что бы блок с рекламой не наступал на границу блока с контентом мы указали 395 пикселей. Аналогично с высотой блоков. Высота контента 250 пикселей, а рекламы 220 пикселей (250-220=30) что бы равномерно распределить блок с рекламой мы 30/2=15 пикселей, именно столько мы отступаем от верха родительского документа, и именно столько получается отступ снизу.

О другой схеме позиционирования соответственно на следующем уроке.

До встречи.

 


 

Закрыть меню