web-touristCSS:Позициониране на DIV
В този урок ще ви покажа как да си направите сайт без таблици като използвате само елемента и малко CSS.
Нека започнем с писането на кода.
- Бекграунд(фон) на <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;}- Садържание.
за да центрираме садържанието ще го поставим в един 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
