CSS:Позициониране на DIV
В този урок ще ви покажа как да си направите сайт без таблици като използвате само елемента <div> и малко CSS.
Нека започнем с писането на кода.

1. Бекграунд(фон) на <body>
в случая цвета коитп ще използвам е бял

body{
background-color:#FFFFFF;
}

а ако искате да използвате картинка

body{
background-image:url(пътя до картинката);
}

може да посочите дали картинката която се използва за бекграунд да се повтаря
background-repeat: и стоиностите са repeat-x - повторението е хоризонтално ; repeat-y повторението е вертикално; no-repeat - не се повтаря;

може да посочите и позицията на фоновото изображение background-position: center / right / left /top /botton съответно в центъра / дясно / ляво / горе / долу

Ето един Пример кадето използваме

body{
background:#ffffff;
background-image:url(img/bgbody.jpg);
background-position:center;
background-repeat:repeat-y;}


2. Садържание.
за да центрираме садържанието ще го поставим в един DIV и ще му зададем margin-left и margin-right на auto по този начин дива ще е на еднакво разтояние от ляво и отдясно (margin - Външният отстъп ) ще пребавим и височина(height) и шерина(width)
CSS

div.sadyrjanie{
margin-left:auto;
margin-right:auto;
height:700px;
width:760px;
}

и HTML

<body>
<div class="sadyrjanie">
</div>

</body>


Сега нека направим един див в които ще разположим header-a (Logoto)
CSS

div.header{
width:760px;
height:120px;
background:#0000FF;
}

HTML

<body>
<div class="sadyrjanie">
<div class="header"></div>
</div>

</body>


В този сайт менюто ще е разположено под хедъра сега ще направим един див и за него

div.menu{
width:760px;
height:30px;
background:#CCCCCC;
}

и HTML

<body>
<div class="sadyrjanie">
<div class="header"></div>
<div class="menu"></div>
</div>

</body>

По късно ще ви покажа как да си направите самото меню ! продължаваме със садържанието.
Сайта ще го разделим на три колони лява, дясна и център
CSS

div.left{
width:100px;
height:550px;
float:left;
background:#FF0000
}
div.center{
width:560px;
height:550px;
float:left;
background:#339900;
}
div.right{
width:100px;
height:550px;
float:right;
background:#FFFF00
}

HTML

<body>

<div class="sadyrjanie">
<div class="header">Лого</div>
<div class="menu">Меню</div>
<div class="left">Лява колона</div>
<div class="center">Централна колона</div>
<div class="right"></div>
</div>

</body>


Тук трявбва да добавя че float: right / left/none e дефинира посоката на основния текст около даден елемент.
Това е само един прост пример за правене на сайт само от дивове.

Скоро ще пусна и резник за CSS


Урока е написан специално за http://web-tourist.net


/ Трябва да сте регистриран за да напишете коментар /
От: lub4o
16:53 02-01-2010
Мерси за урока много ми помогна :)
От: batmanabg
13:25 22-07-2011
Полезен урок.
От: paco92
16:24 29-01-2013
много полезен урок браво ге го пробвам и ще го опражнявам
1