Параметри позиціонування в CSS

Параметр 'bottom'

Цей параметр визначає нижній край елементу.

Примечание: Якщо параметр "position" має значення "static", параметр "bottom" не робить впливу.

Приклади:

1. У прикладі показано, як задати нижній край елементу pre на 50 px вище за нижній край вікна:

2. pre

3. {

4. position: absolute;

5. bottom: 50px

}

6. У прикладі показано, як задати нижній край елементу pre на 50 px нижче нижнього краю вікна:

7. pre

8. {

9. position: absolute;

10. bottom: - 50px

}

Може набувати наступних значень:

Значення	Опис
auto	Дозволяє браузеру самостійно вичислити нижню позицію
%	Задає нижню позицію в % від положення нижнього краю вікна
length	Задає нижню позицію в px, см, і так далі від нижнього краю вікна. Допускаються негативні значення.

Параметр 'clip'

Цей параметр задає форму елементу.

У ситуації якщо, наприклад, зображення більш того елементу в якому розташовується, параметр дозволяє визначити розміри зображення, обрізувати за формою і вивести.

Примітка: Цей параметр не можна використати для елементів з параметром "overflow", заданим як "visible".

Спадкоємство: немає.

Приклад:

p

{

position: absolute;

clip: rect(2px 175px 100px 0px)

}

Може набувати наступних значень:

Значення	Опис
shape	Задає форму елементу. Допустимим значенням форми є: rect(top, right, bottom, left)
auto	Браузер задає форму елементу

Параметр 'left'

Цей параметр визначає лівий край елементу.

Примітка: Якщо параметр "position" має значення "static", параметр "left" не робить впливу.

Спадкоємство: немає.

Приклади:

1. У прикладі показано, як задати лівий край елементу pre в 50 px праворуч від лівого краю вікна:

2. pre

3. {

4. position: absolute;

5. left: 50px

}

6. У прикладі показано, як задати лівий край елементу pre в 50 px зліва від лівого краю вікна:

7. pre

8. {

9. position: absolute;

10. left: - 50px

}

Може набувати наступних значень:

Значення	Опис
auto	Дозволяє браузеру вичислити ліву позицію.
%	Задає ліву позицію в % від значення для лівого краю вікна.
length	Задає ліву позицію в px, см і так далі від лівого краю вікна. Допускаються негативні значення.

Параметр 'overflow'

Цей параметр визначає, що відбувається, коли вміст елементу переповнює його область.

Спадкоємство: немає.

Приклад:

div

{

overflow: auto

}

Може набувати наступних значень:

Значення	Опис
visible	Вміст не обрізується. Воно виводиться за межами елементу.
hidden	Вміст обрізується, але браузер не виводить смугу прокрутки для перегляду усього вмісту.
scroll	Вміст обрізується, але браузер виводить смугу прокрутки для перегляду усього вмісту.
auto	Якщо вміст обрізується, то браузер повинен вивести смугу прокрутки для перегляду усього вмісту.

Параметр 'position'

Цей параметр поміщає елемент в статичне, відносне, абсолютне або фіксоване положення.

Спадкоємство: немає.

Приклад:

p

{

position: static;

}

Може набувати наступних значень:

Значення	Опис
static	Елемент поміщається в звичайне положення(згідно з нормальним потоком). Для значення "static" параметри "left" і "top" не використовуються.
relative	Переміщає елемент відносно нормального положення, так що "left: 20" додає 20 пікселів до позиції LEFT елементу
absolute	За допомогою значення "absolute" елемент можна розмістити у будь-якому місці сторінки. Позиція елементу визначається параметрами "left", "top", "right", і "bottom"
fixed

Параметр 'right'

Цей параметр визначає правий край елементу.

Примітка: Якщо параметр "position" має значення "static", то параметр "right" не робить впливу.

Спадкоємство: немає.

Приклади:

1. У прикладі показано, як задати правий край елементу pre на 50 px ліворуч від правого краю вікна:

2. pre

3. {

4. position: absolute;

5. right: 50px

}

6. У прикладі показано, як задати праве поле елементу pre на 50 px вправо від правого краю вікна:

7. pre

8. {

9. position: absolute;

10. right: - 50px

}

Може набувати наступних значень:

Значення	Опис
auto	Дозволяє браузеру вичислити праву позицію.
%	Задає праву позицію в % від значення правого краю вікна.
length	Задає праву позицію в px, см, і так далі від правого краю вікна. Допускаються негативні значення.

Параметр 'top'

Цей параметр визначає верхній край елементу.

Примітка: Якщо параметр "position" має значення "static", то параметр "top" не робить впливу.

Спадкоємство: немає.

Приклади:

1. У прикладі показано, як задати верхній край елементу pre на 50 px нижче верхнього краю вікна:

2. pre

3. {

4. position: absolute;

5. top: 50px

}

6. У прикладі показано, як задати верхній край елементу pre на 50 px вище за верхній край вікна:

7. pre

8. {

9. position: absolute;

10. top: - 50px

}

Може набувати наступних значень:

Значення	Опис
auto	Дозволяє браузеру вичислити верхню позицію.
%	Задає верхню позицію в % від значення верхнього краю вікна.
length	Задає верхню позицію в px, см, і так далі від верхнього краю вікна. Допускаються негативні значення.

Параметр 'vertical - align'

Цей параметр задає вертикальне вирівнювання елементу.

Спадкоємство: немає.

Приклади:

img

{

vertical - align: baseline

}

Може набувати наступних значень:

Значення	Опис
baseline	Елемент розміщується на базовому рядку батьківського елементу.
sub	Вирівнює елемент як нижній індекс
super	Выраванивает елемент як верхній індекс
top	Вершина елементу вирівнюється з вершиною найвищого елементу в рядку
text - top	Вершина елементу вирівнюється з вершиною шрифту батьківського елементу
middle	Елемент поміщається в середині батьківського елементу
bottom	Нижня частина елементу вирівнюється з самим нижнім елементом в рядку
text - bottom	Нижня частина елементу вирівнюється з мінімальною нижньою точкою батьківського елементу
length
%	Вирівнює елемент в % від значення параметра "line-height". Допускаються негативні значення.

Параметр 'z - index'

Цей параметр задає порядковий номер елементу в стеку. Елемент з великим порядковим номером стека завжди знаходиться перед елементом з меншим порядковим номером стека.

Примітки:

1. Елементи можуть мати негативні порядкові номери стека.

2. Z - index працює тільки з тими елементами, які позиціонувалися не як static(наприклад, position: absolute;)!

Спадкоємство: немає.

Приклад:

img

{

position: absolute

z - index: 1

}

Може набувати наступних значень:

Значення	Опис
auto	Порядковий номер елементу в стеку дорівнює номеру батьківського елементу
number	Задає порядковий номер елементу в стеку

Верстка горизонтальними шарами

Розглянемо поетапний процес верстання Веб-сторінки відобразивши її стан на першому та останньому етапах. Як засоби горизонтального верстання використаємо властивості ширини – width, висоти - height, фонового кольору - background-color. Підбір кольорів можна здійснювати на основі зразкових Веб-сторінок за допомогою програмного засобу pixie. Вертикальну розбивку здійснюємо за допомогою властивостей обтікання – float, її заборони – clear та роздільників - border-right, border-left. При цьому підбираючи значення висоти стовпчик можна розбивати на під блоки із можливістю їх виходу за межі блоку при заданні від’ємних значень меж (margin). Розташовувати сторінку по ширині екрану можна за рахунок відсутності жорсткого вказання ширини блоку. Цим процесом керують за допомогою властивостей min-width та max-width. Поетапне верстання сторінки розпочнемо із формування фону:

div#block {width:750px; margin:0 auto; background-color:#dddddd}
……
<div id="block">
<h2 align="center">CSS верстка сайту</h2>
</div>

Тепер наповнимо фоновий блок верхнім, середнім та нижнім підблоками.

div.header {width:750px; height:100px; background-color:#717dc9}
div.center_col {width:750px}
div.footer {width:750px; height:70px; background-color:#717dc9}
…..
< div id="block">
<div class="header"><h1 align="center">Верстка сайту</h1></div>
<div class="center_col">
<h2 align="center">CSS верстка сайту</h2>
<h4 align="center">Жорстка верстка блоками</h4>
</div>
<div class="footer"><p>Контакти</p></div>
</div>

Верстка стовпчиками

Вертикальна розбивка шарів здійснюється за допомогою параметру обтікання одного блоку іншим, зокрема властивість float:left забезпечує обтікання зліва, а властивість clear:both забезпечує заборону обтікання з обох сторін.

div.left_col {width:148px; height:350px; float:left}
div.center_col {width:450px; float:left}
div.right_col {width:148px; height:350px; float:left}
div.footer {width:750px; height:70px; background-color:#717dc9; clear:both}
</style>
</head>
<body>
<div id="block">
<div class="header"><h1 align="center">Верстка сайту</h1></div>
<div class="left_col"><p align="center">Меню</p></div>
<div class="center_col">
<h2 align="center">CSS верстка сайту</h2>
<h4 align="center">Жорстка верстка блоками</h4>
</div>
<div class="right_col"><p align="center">Про нас</p></div>
<div class="right_col_1"><p align="center">Супутні публікації</p></div>
<div class="right_col"><p align="center">Наші друзі</p></div>
<div class="footer"><p>Контакти</p></div>
</div>
</body>
</html>

Доповнимо горизонтальні блоки роздільниками за допомогою атрибутів border-right та border-left в параметрах яких задамо товщину лінії тип-пунктир (dashed) та колір.

div.left_col {width:148px; height:350px; float:left; border-right:2px dashed #717dc9; margin-bottom:-15px}
div.right_col {width:148px; height:350px; float:left; border-left:2px dashed #717dc9; margin-bottom:-15px}

Підблоки можна розбивати на менші частини. При цьому від’ємне значення меж (margin) дозволяє робити виступи в компонуванні блоків.В результаті отримуємо наступний підсумковий код:

<html>
<head>
<title>Жорстка верстка</title>
<style type="text/css">
div#block {width:750px; margin:0 auto; background-color:#dddddd}
div.header {width:750px; height:100px; background-color:#717dc9}
div.left_col {width:148px; height:350px; float:left; border-right:2px dashed #717dc9; margin-bottom:-15px}
div.center_col {width:450px; height:350px; float:left}
div.right_col {width:148px; height:100px; float:left; border-left:2px dashed #717dc9; margin-bottom:-15px}
div.right_col_1 {width:198px; height:200px; float:left;; background-color:#717dc9; margin-left:-50px}
div.footer {width:750px; height:70px; background-color:#717dc9; clear:both}
</style>
</head>
<body>
<div id="block">
<div class="header"><h1 align="center">Верстка сайту</h1></div>
<div class="left_col"><p align="center">Меню</p></div>
<div class="center_col">
<h2 align="center">CSS верстка сайту</h2>
<h4 align="center">Жорстка верстка блоками</h4>
</div>
<div class="right_col"><p align="center">Про нас</p></div>
<div class="right_col_1"><p align="center">Супутні публікації</p></div>
<div class="right_col"><p align="center">Наші друзі</p></div>
<div class="footer"><p>Контакти</p></div>
</div>
</body>
</html>

Остаточний вид сторінки

Гнучна верстка сторінки

Жорстка верстка сайту не дозволяє адаптувати ширини сторінки до ширини екрану дисплея. Це приводить до неекономного використання площі екрану. Для гнучкої верстки В кожному горизонтальному шарі хоча б один блок має нефіксовану ширину. Таку гнучкість рекомендується обмежувати атрибутами min-width та max-width, оскільки вид сайту може руйнуватися при довільних змінах ширини. Для відступу тексту від лівого краю блоку використовується атрибут padding-left:

div.header {background-color:#717dc9; min-width:600px; max-width:4000px; height:100px}
div.left_col {background-color:#dddddd; border-right:2px dashed #717dc9; width:198px; height:400px; float:left}
div.right_col {background-color:#dddddd; height:400px; min-width:380px; max-width:3800px; margin-left:200px; padding-left:20px; margin-top:-20px}

<style type="text/css">

.s {position:relative;width:350px;height:240px;top:20px;left:90px;overflow:hidden;}

.s small {float:left;overflow:hidden;width:200px;height:70px;background:#ffe;}

.s b {float:left;padding:3px 0 3px 20px;overflow:hidden;width:200px;margin:-1px;}

.sa {border:red 1px solid;}

.sb {border:green 1px solid;margin:-12px 0 0 50px;}

.sc {border:blue 1px solid;color:blue;margin:-12px 0 0 100px;}

.sd {margin:23px 10px 0;}

.sa b {border:red 1px solid;background:#fde;}

.sb b {border:green 1px solid;background:#dfe;}

.sc b {border:blue 1px solid;background:#def;}

.sa,.sa a,b {color:red;}

.sb,.sb a,b {color:green;}

.sc,.sc a,b {color:blue;}

small {color:gray;}

</style>

<h1>Наложение DIV-блоков</h1>

<div class="s">

<small class="sa">

<b><a >Заголовок 1</a></b>

<div class="sd"><a >Текст 1</a></div>

</small>

<small class="sb">

<b><a >Заголовок 2</a></b>

<div class="sd"><a >Текст 2</a></div>

</small>

<small class="sc">

<b><a >Заголовок 3</a></b>

<div class="sd"><a >Текст 3</a></div>

</small>

</div>

Дата добавления: 2013-12-12