How to always display header div on top of the page? - html

I have a header div, which i want to see all the time even if i scroll down.
I want it always on the top of the page.
Which code should i add to my CSS file?
Or do i need to add a javascript inside my .php file?

Apply the below css to your header div
position: fixed;
top: 0px;

if header fixed top
change:
.Your_class{
position:fixed;
top:0;
left:0;
}

Fix the header to the top:
.header {
position: fixed;
}
Move the rest of the content below the header:
body {
padding-top: 50px; // Height of your header
}

Setting position to fixed will take the element out of the normal flow of the document and display them on top of (or under) the normal flow. If you want to avoid having other elements hidden under the fixed element you need to use margin or padding in the appropriate places - in this case a top padding on the body element will do the trick.

Related

How to set footer at bottom and push down as content increases?

I want to design a footer such that it should be at bottom of the webpage when there is less content in the body and should be pushed down if the content of the body reaches to footer.
If I do like this
footer{
position: absolute;
bottom: 0;
width: 100%;
}
It doesn't go down if the body content increases.How can I do that?
please help me. Thanks in advance.
Here's a working jsfiddle
You can use padding-bottom: with the same height of your footer to achieve the effect:
#body {
padding:10px;
padding-bottom:60px;
}
Change your position to "relative". When you use "absolute" you fix it to a particular position which in this case is at the bottom the startup screen. Using relative will position the footer relative to other elements on the page. If other element change their position, so is the footer.

Is this a clearfix float? I can't get my footer to be at the bottom of the page

I want my footer to be at the bottom of the page after the content on each page (not fixed)
I read the post about creating a sticky footer, and I tried:
position: absolute;
bottom: 0;
But my footer is still right after the image which was floated. I put in a clearfix but that didn't solve it. What am I doing wrong, here is the link:
I guess your problem is the height of "main-content".
Remove it, and set:
html {
position: relative;
min-height: 100%;
}
And "padding-bottom" on your "main-content" with the same (or more) height of your footer, for spacing.
A complete example can found at CSS-tricks
Setting
position: absolute;
bottom: 0;
gets it to bottom of window but if your page is longer you get a result like your page..
Instead you could set it to fixed, wrap the other content and leave 75px space underneath for your footer, check this ;
Use:
position:fixed;
bottom:0px;

Header overlaps other text / images

I want that if people scroll over the page, the header will keep showing (logo + navigation bar). This is the css code I'm using:
#header_bar
{
margin: 0 auto;
width: 100%;
background-color: #1F1D1E;
height: 80px;
position: fixed;
top:0;
}
But this is what happens now: http://puu.sh/6FiXY.jpg
As you see the header now overlaps the image, how can I fix this? I've tried using margin-bottom / padding-bottom, but margin does nothing while padding makes the background box larger.
How can I fix this?
Supposing your HTML structure looks like
<div id="header_bar">...</div>
<div id="someOtherDiv">...</div>
Add margin-top to the next element after #header_bar
#someOtherDiv {
margin-top:80px; /* 80px because #header_bar is taking up 80px in height. */
}
demo
Since your header has a fixed position all your other elements will not take this into account. You could create a "wrapper" div for all the other content that is positioned 80px from the top. Just adding a margin or moving the element of the most top div might work too as long as it has relative (default) position.
You should be adding a margin to your content tags so that they are not instantly overlapped by the header.
See here: www.jsfiddle.net/cranavvo/5F8EP/

HTML/JS Make <select> reach bottom of window

Another simple JS/HTML problem. How do I make a HTML element stretch to the bottom of the page always?
I tried doing height: 100%; but it stretches off of the bottom of the page (since it's not located at the top, I think.)
What's the preferred method of doing this? If you resize the window, it should make its bottom reach the window bottom.
position:absolute;
bottom:0;
top:0;
if your element not is body, use
position:relative
on parent, and specific width, and height.
Try this: http://jsfiddle.net/bBhUX/
Add
position: fixed;
overflow: hidden;
into the parent container
Use
position:absolute; //or fixed if you want it to remain at constant position even when scrolled
bottom: 0;

footer positioning

I would like to position my footer at about 20 - 30px, or a percentage, from the bottom of the screen. From looking at the elements with * {outline: solid 1px} there is a rectangle along the bottom of the screen which must be either the html element or mark the bottom boundary of the body. I'm a little hazy on positioning elements and despite having played around with varius positioning options cannot get the footer where I want it. What is the best practice here? How should I position the footer?
If you want it at the bottom (+30px) of the document
footer{
position:absolute;
bottom:30px;
}
if you want it at the bottom of the document, you would need javascript to calculate the window's height
and do something like (in jquery)
$('footer').css({'position':'fixed','top':$(window).height()-$('footer').height()});
or with only CSS you can also do:
.footer{
position:fixed;
height:2%;
top:98%;
}
Without seeing any of your code, it's hard to imagine why things aren't working for you. But my first guess is that you haven't styled the body element properly. By default, many modern browsers apply some sort of padding or margin to the body. As such, you should use the following rule to reset it:
body { margin: 0; padding: 0; }
This will reset the defaults, allowing you to proceed as you like. You could also use the position: fixed CSS rule for the element you want fixed to the bottom of the screen. Example:
#footer { position: fixed; bottom: 0; height: 30px; }