Position Header Settlement For Free

this video tutorial comes courtesy of willber and designs and I'm sorry if I pronounced that wrong but he basically said Thank you you've helped me a lot and would it be possible to make a video tutorial on how to fix position headers in CSS and I said no problem I'll work on that right this second so that's what I'm going to be doing so if we head over to my project example which I made on my Local Host you can see that it's just a simple black background and light gray content areas you can also notice that the header if we go over and scroll down the page you can see that it stays at the top and disappears now the aim for the end of this tutorial is going to make that header follow us EG making it fixed to the top of the page so what I'm going to do is I'm just going to open dream weer CS6 which is what I'm working in very reminds you can work in any textt editor the first thing you're going to notice is that the content has a height of 2,000 pixels now this is just set so that we can scroll down the page on your website this might be set to Auto so that it automatically expands depending on your content another thing you'll notice is the two divs we have one with the class of header and the other with content within the header class you can see that we have the height of 50 pixels now this sets the height of the main header obviously and we have a light color gray background a border which is a bit darker gray now the width is set to 950 pixels at the moment and the margin is 0 pixels which is the top margin and then the rest of the margins are Auto which makes it align to the center so the first we're going to do is we're just going to get rid of that margin and we're going to put in a position of fixed now once we've done that we're just going to change the width for this first example to 100% now this is one way of doing it now you can see that the height is pixels on this and we want the content to be split by 20 pixels so we just add 50 pixels onto that top margin making it 70 so you can see if we do this then you can see that we've successfully made the header stick to the top of the page as you can see that it slides down but it's not right to the top of the page so what we need to do is within that class that we made in CSS 6 of Dream Weaver what we're going to do is we're just going to add a new attribute and it's going to be top and it's going to be zero pixels that means that it's just going to push it right to the top of the browser there okay and that looks perfect and it follows with the page staying at the top overlapping the content okay so some people might not want that and some people might wanted it to stay at 960 pixels and still be in the center and Li Dy Doo so how we're going to do that is what we're going to do is we're just going to well my fix for it is we're just going to change this back to 960 pixels and as you can see that it just goes to the left but that's not good enough because it still Scrolls but...