Банер в шапці сайту, створення сайту

Як вставити банер в шапку.

Код банера виглядає так:

Цей код треба трохи переробити. Код, який необхідно вставити в шапку, в загальному виглядає так:

Виділена частина - це і є те, що треба додати в код банера. Розглянемо, що в цьому доповненні знаходиться і та для чого це треба.

  • position: absolute - це говорить про те, що розташування банера прозоре
  • top: 50px - це розташування банера щодо верхнього краю шапки сайту. При збільшенні або зменшенні цього значення, банер буде пересуватися вниз або вгору.
  • right: 300px - це розташування банера щодо правого краю шапки сайту. Змінюючи цей розмір, відповідно банер пересувається вліво або вправо
  • border: 1px - це величина обведення банера. Якщо Вам потрібна обведення побільше, то збільште значення, а якщо обведення не потрібна, то просто поставте нуль.
  • solid # ddad22 - виконує функцію кольору обведення. Змінюючи колірний код, можна змінювати колір обведення банера.

Тепер можна написати змінений код банера, який ми хочемо вставити. Він буде виглядати так:

Хочу внести до статті трохи доповнення. Зіткнувся з таким випадком, що помінявши свій шаблон сайту на інший, я не зміг вставити банер в шапку сайту вищевикладеним способом. Причиною виявилося, що шапка на новому шаблоні була в вигляді цілої картинки. Тут довелося покопатися в інтернеті. Рішення було знайдено (просте), хоча пояснення були дуже замудрённие!

Якщо у Вас шаблон сайту має шапку у вигляді цілісної картинки, то зміни в вищеописаному коді будуть мінімальні. Я не буду описувати що, чому і для чого, але проблема зважилася заміною в коді атрибута position: absolute на position: relative. Тепер код у мене став виглядати так:

Ніяк не міг виставити банер на своє місце. Зверніть увагу на атрибут top. виділений зеленим кольором. Тільки при цьому негативному значенні банер встав на своє місце. Так що при установці пробуйте різні значення top.

Схожі статті