how to make fixed positioned footer in CSS and HTML tutorial

how to make fixed positioned footer in CSS and HTML tutorial


Hello and welcome to another new episode of
learning simplified. Guys in this tutorial we have to make some
long steps, that’s why we are cutting it short and we
will be jumping straight to our next tutorials. In this context I would like to say that this
is the final part of the tutorial and after this, the advanced css3
tutorial will be ended and we will be proceeding forward what’s our next tutorial, and that
is why we are engaging into a long leap into this tutorial and I assumed
that you have gained sufficient enough knowledge to understand each and every part of this
segment… This is actually this stylesheet.CSS and inside
it, first of all we need to do we need to create a footer-wrapper. Let’s provide a height to this certain parameter
and after that we will be changing it to auto,
but first of all, let it be provided such that we can see what happens next. And for this background condition… Get back
to our template first of all let’s pick up the colour code,this is the first colour….. And this is the standard syntax, this is the
last one, always comes beneath, underneath. Now the footer we have taken here the width
is 100%, footer wrapper, and its height is 100px and its background is this one. So now let’s get back to
index.HTML. For a special purpose, we will keep this div
element outside the outwrapper. This is being used for a special purpose. We will be seeing what it does. Now this is the website practically that has
been created so far. All we have to do ways to press control +
s and reload. And we can see there’s a 100% wrapper, like
this one. This is a 100% rapper and the same thing is
being observed, appearing over here. Now if we look into a template we can see
that there is a menu bar which is lying almost at the center. All we need to do we need to break the footer
element into two, into three parts actually, the parent div and its to subsequent child
divs, and this time we are not applying any float left or float right condition. All we need to do we need to place it in just
an upside down condition this is what we are going to do, first of all, we are going
to take a wrapper which is at a width of 800px or 900px for say. So let’s take the wrapper first which will
be centrally aligned. And the next thing that we have to do in this
case is to align it into the central position. For that we know what to do. we know the drill. All
we have to do here is to place the margin 0 auto condition. Now let’s copy this thing and let’s call another
div inside this div wrapper, and we are providing div
class as ‘footer content’ over here. We can see that A 900px footer element, ‘footer
content’ actually appears into this footer wrapper. So all we need to do now we
need to create two footer elements inside this footer content div. So let’s get back to stylesheet.CSS, and we
are creating two divs over here….. And in the same
manner all I am doing, I am creating practically another div for the bottom part. There it is. Now let’s get back to your project, and inside
this ‘footer content’ part, we are just calling those class names
over here.. Now let’s just press control + s, get back
to our project and reload and we can see that.. I think two
distinct, separate background colours will positively highlight the context in this case. So let’s get back to our stylesheet.CSS and
here, instead of #666, we provide the background colour as #CCC. Now let’s get back to our project and reload
and we can see that this is the top menu part and this is the bottom menu part,
which has been represented over here. All we need to do we need to create a menu
bar in this top most position, we are just assuming that there won’t be any spaces
provided for any kind of future purposes so all we’re doing now we are just providing,
we are just creating another div under this menuholder name…. We have taken
the width of this div as 800px and we actually taken the views of the main footer content
top menuholder part as 900px. That means there will be a 100px difference
from its parent div. That is why what we need to do we need to
create of Central alignment, and in that case or purpose, I think that margin 0 auto condition
will be the best suited condition in this particular
case. So let’s get back to index.html and inside
this top menu holder we are doing now, we are creating this.. Let’s get back and reload and we can see that
the same div has been created over here. So this is the thing up to this part, now
the thing that is left here is to create that particular part, that particular
menu bar which we can see here, this is the menu bar. So now all we need to do we need to get back
to our stylesheet, first of all get back to index.HTML and inside
here, you may create our menu bar item. Another thing, whenever you are creating a
tag all you need to do you need to end the tag. If it is a container tag then you need to
end that tag immediately. This is a prior thing that you have to emphasize,
that you have to concentrate on, rules there could be some misleading errors,
some mistakes of unclosing the tags or those short of mistakes. The next thing is creating the list items.. Now all we
need to do we need to customize this unordered list and menu items that we have coded so
far. So get back to style sheet.CSS and another
thing, to Remember that is an ordered list is practically under this
footer-content-top-menuholder-menu-content. So everything will be named under this particular
selector name. So let’s get
back to stylesheet. CSS. Now it’s a matter of calculation. It is 800px and there are five menu items. So each individual list item should be at
a width of 160px. So
this is what we are going to allocate over here. Don’t make it 160px, make it 158px cause we
need to provide border-right element over here, as we can see here are
some border-right elements. Now all we need to do we need to press Control
+ s and get back to our project, and reload and now we can see that this thing is appearing
over here. We need to change the font colour here.. Reload and you can see that it is changed
over here. Now the border right elements. We need to take care of this border rights. So the next thing, first of all remove all
those background colours those have been provided over here, so I am removing those background
colours… there it is, so far. So we have created them. Now the problem is, font size. Font size is very small here as you can see,
so all we need to do we need to create the font size, and another thing we need to change
the font family too. Font size is matched. Now let’s change this font family. there it is. So get back to your project, reload and we
can see at the font-family is now changed. So we have successfully created this menu
bar and created all of the contents inside the footer except this last border right we
can see that there’s no border right at the Last Child element, so we too don’t need any
border right in this Last Child element and hence, we are getting back and… As we can see that the border right is now
gone. Another thing if you look into a template
you will see a particular gap from the top. This is the thing that we
need to mention, that we need to remember. So that is why all we need to do, heights,
those Heights provided over there, we need to comment it out now.. And we can
see that the gap is now on and instead of padding top, provide it has 5px 0 that means
weapons from the top and bottom it will be leaving a total padding of 5px and
from left and right, under both this condition in both direction it will be leaving none. Press control + s, get back to your project,reload
and you can see that this gap has been created over here. Now let’s match with our template, here it
is.. If you want to increase the padding you may
increase it anytime.. Footer-wrapper. The height is still 100px. So we need to clear it off and now it is,
there is no height anymore. Let’s get back to index.html, and here at
the bottom property name, all we need to do we need to
create a header tag, per say, I am creating and H3 header tag. Now it is just in position as we can see,
we need to place it in a central position, so just get back
to stylesheet.css and inside this footer-content-bottom-property-name all you need to do here is to customize the
property… So as you can see over here, the template
is been created. Another thing, the last thing of this tutorial,
if you want to make the footer element into a
fixed position, all you need to do you need to go to this footer-wrapper… No here comes the actual wit. Why did I particularly asked you to provide
an outwrapper over here? Now you will see the purpose of this outwrapper
and why did we placed this footer element outside this outwrapper. If you carefully look into your created
or built website, you can see that it is not stretching down enough, the bottom part of
this featured products or form elements are not being visible as this footer
item is practically in a fixed position with respect to the web page. So all we need to do now we need to provide
a particular space or gap from the bottom such that
bottom of every element is visible to users. So we need to get back to outwrapper and all
we need to mention… It was 50px no? no it was a 100px I think….okay, so
we are leaving a gap of a total of 60px, and we need to see what is happening here, just
leave it and we can see that it is living, which were being suppressed under
this footer element, it is now being visible, getting visible over here and the only amendment
that we have to do over here is in this outwrapper position. We just
changed its syntax,command from margin-bottom 0 or nothing to margin-bottom 60px and that
is why it is getting visible to us. First of all zoom out and you can see
that on zooming out the footer element is sticking at the bottom of this webpage, laying
at the same bottom position where it should be, such that the position is
fixed over there. So guys that is the thing that we have to
share in this tutorial. We have created a particular website, we have
created a complete website along with form elements,
along with some images and captions, along with dropdown menu bar, we have seen the hovering
property of images with some less background opacity – the main and the
basic thing is every time you are approaching to create your own template, then all you
need to do is first of all, before doing anything, this is the main purpose
of the website, the first thing is all you need to do, you need to create a motherwrapper
that will hold all the contents inside. This is practically the basics. Get back here and deactivate this comment,
and if we now reload we can see that each and everything is coming inside this outwrapper. That means I have created an
outwrapper first and then I have wrapped up everything, every content inside this outrapper
. This is the first thing, then you need to move on creating your
contents. In the next tutorial we will be talking about
mobile responsiveness. If we press just control + shift + m, and
if we look into our mobile browser preview, we can
see that there is a horizontal scroller appearing at the bottom of your web page. This is inevitable in case of a mobile device. If you have liked or tutorial then do not
hesitate to hit that red subscribe button. Hope to see you guys in or next tutorial. Till then, bye.

Leave a Reply

Your email address will not be published. Required fields are marked *