CSS:Позициониране на 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;}
  1. Садържание.
    за да центрираме садържанието ще го поставим в един 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

Вашият коментар