Дълго време във всички уеб сайтове са се използвали таблици (<table> тагове) за изграждане подредбата на
съдържанието. Този метод отдавна се счита за остарял, а
препоръчаните техники са свързани с така наречените "контейнери" - div таговете.
Какво представлява <div> елемента? - Сам по себе си един div елемент не е много
по-различен от един най обикновен параграф (<p> таг). Разликата се състои в това, че
параграфа може да съдържа текст, а div
елемента - по-общи елементи или комбинация от повече елементи. Целта е чрез
наслагване и стилизиране да подредим страницата така, както искаме да изглежда. Div елемента е блоков, т.е. след
себе си и преди себе си оставя нов ред.
Как се използва? - В комбинация с CSS стилове. Възможни са различни
подредби на сайтове, но в общи линии възможностите за реализация се свеждат до
абсолютно или относително позициониране и използване на плаващи елементи (чрез
стойността на float селектора за дадения компонент).
Видове
позициониране
1.Position:absolute;
При това позициониране, обекта се намира на точното
място
независимо как се разширява екрана или с кой браузър сте! Понякога обаче, обекта не се
мести за разлика от другите елементи при разширяване на екрана и може да има проблеми.
ПРИМЕР:
имаме
един <div class="pos">Хей.....премести ме</div>
CSS
ще е :
.pos {
position:absolute;
top:100px;
left:100px;
}
2.position:realative;
Това
позициониране позиционира елементите близо до първоначалната позиция.
3.position:fixed;
Това позициониране позиционира елемента точно на
мястото,
на което е дори,
когато страницата се премести надолу (със скролбар), например като чата на
фейсбук.
ПРИМЕР:
имаме
един <div class="pos">Хей.....премести ме</div>
CSS
ще е :
.pos{
position:fixed;
top:100px;
left:100px;}
ПРИМЕР: