На головну

 Обмеження доступу до елементів форми. |  Створення Web-сторінок з фреймами |  поняття CSS |  підключення CSS |  базовий синтаксис |  На дві нерівні частини, розмір яких підпорядковується правилу золотого |  Так, щоб руки з передпліччям утворювали прямий кут, очі |  Освітлення в приміщенні відрегулювати таким чином, щоб джерело світла знаходився збоку або ззаду оператора. Для уникнення медичних ускладнень |  ідентифікатори |  Правила створення стилю |

Підвал ...

  1.  Dу 80-200 мм. (Підвальна).
  2.  ДІТИ В ПІДВАЛІ ГРАЛИ У ГЕСТАПО,
  3.  Застосування наркорозискних собак для обшуку приміщень, сараїв, горищ, підвалів
  4.  Приклад розрахунку товщини утеплювача перекриття над підвалом
  5.  Розрахунок товщини утеплювача перекриття над підвалом


А тепер css код, який сформує потрібне нам візуальне уявлення:


#content {

float: left;

width: 67%;

background-color: #CCC;

}

#sidebar {

margin-left: 67%;

background-color: #FFC;

}

#header {

background-color: #FCF;

text-align: center;

}

#footer {

clear: both;

text-align: center;

background-color: #CFF;

}


Ми використовуємо властивість float для того, щоб задати положення блоку content на сторінці і задаємо ширину цього блоку дорівнює двом третинам вікна браузера. Відповідно до правил CSS, подальший вміст включене в «плаваючу модель», а в нашому випадку це блок sidebar, Буде «обтікати» блок content з боку, протилежного напрямку вирівнювання, тобто Справа.

властивість float працює приблизно як атрибут align, Який застосовується в HTML, але дає більше можливостей управління відображенням елементів за рахунок використання полів, рамок і відступів.

Різний колір фону блоків заданий лише для того, щоб Вам легше було спостерігати кордону блоків, як Ви забажаєте випробувати цей приклад.

І нарешті, в блоці footer використовується властивість clear для того, щоб гарантовано забезпечити його відображення нижче будь-якого елементу з «плаваючою моделі».

Правда такий варіант має недолік. При наявності в блоці sidebar вмісту більшого обсягу, ніж в блоці content, «Зайве» вміст перестає обтікати блок content і займає всю ширину вікна браузера.

Усунути непорозуміння можливо, якщо підкоригувати значення лівого відступу або лівого поля елемента sidebar. Для цього ми використовуємо властивість margin-left: 67%.

 



 Вміст блоку ... |  Макет з трьох колонок
© um.co.ua - учбові матеріали та реферати