Лепкав хедър със скролиране.

Автор: Jorko

Сега ще започнем с кодът сега ще ви го напиша долу и после ще обясня кой ред за какво служи.

#header{
width: 100%;
height: 66px;
background-color: blue;
position: fixed;
top: 0px;;
left: 0px;
}

#header_wrap{
width: 900px;
height: 66px;
margin: 0 auto;
}

Така ще започна с това първо да дефинираме #header и #header_wrap в нашия css файл.

width: 100%;

С този ред задаваме на нашия хедър да се разпъва на 100% при каквато и да е резолюция.

height: 66px;
background-color: blue;

С height задаваме височината на нашия хедър по желание както решите Вие, аз съм си я направил 66 пиксела, с background-color задавате цвят на фона аз съм го направил син но може да ползвате и изображение както си решите.

Идва и същинската част:

position: fixed;
top: 0px;;
left: 0px;

С position: fixed; задаваме на нашия хедър да се скролва с завъртане на скролът а с top и left му задаваме къде да седи при мен това е да е винаги най в ляво и най горе.

Следвъщата стъпка е нашето id header_wrap в него ще седи съдържанието на хедъра този допълнителен DIV го пишем за да може винаги съдражанието под каквато и да е резолюция да седи в центъра на хедъра.

width: 900px;
height: 66px;
margin: 0 auto;

С width и height му задаваме дълина и ширина по желание принципно височината трябва да е колкото на хедъра с margin: 0 auto; е основната част трябва да бъде точно така, защото чрез него ние задаваме на съдържанието на хедъра да седи винаги в центъра на страницата.

Това е урока написън по желание на @Hous от мен за web-tourist.
Може да го ползвате спокойно във вашия сайт Cool.
Забранявам копирането за други сайтове за уроци без мое съгласие.
Успех!!