Fix Footer Bar Like Daniweb

[Farhad.idrees]

Ho guys..
i have many pages in my application.
i want to show fix footer bar like u can see in daniweb "Recently updated articles etc etc"
how to create it? any hint aur suggestion?
Regards..
Farhad Idrees

[LastMitch]

@Farhad.idrees

i want to show fix footer bar like u can see in daniweb "Recently updated articles etc etc"

Daniweb footer is just an footer code. The differences is that Dani design it how it looks (the footer) and code it the way she like it.

All you need to do is just google it and find a footer code you like and used and design how it looks.

[JorgeM]

You can create a div for your footer and style it to have a fixed position. Even if you scroll down the page, the footer remains at the bottom. here is an example of the properties you would style on the div with an id="footer".

#footer {width:100%;position:fixed;left:0;bottom:0}

Give it a try, if you have a problem, post your code and explain what part of the code you are having trouble with.

[<M/>]

You can also use your browser's editing tools (like firefox) to view the entire source.

[EvolutionFallen]

Building off <MICHAEL>'s response, if I were you I'd use Firebug to check out and play with the styles on the div with ID "toolbar" and see what turning different options on and off does. This will give you a feel for how it was created.

[Farhad.idrees]

Jeorge its working..
but the problem is...
when i scroll down so my menu which are present at the end of page hide behind my bar...
i want to keep footer below my menu...like u can see in dani web..
Regards..
Farhad

[JorgeM]

oh, i think I understand what you mean know. So just add an extra div element to the bottom of the content. Use a value that is 1.5x the height of the footer so that you clear the footer and so that you have extra space. so if the footer has a height of 50px, make the height of this div 75px. You can also just apply a margin-bottom property to the last element instead of adding this new element.

<div class="push"></div>

In your style sheet...

.push {height:75px;}

[Dani]

JorgeM is correct. You need to add a margin-bottom that is at least the same height as the footer. Glad you got it working!! :)

[Dani]

Oh ... you should also be aware that it will not display right on iOS (iPhone, iPad) and some other mobile devices. The 'fixed' CSS position doesn't play nice and instead slaps itself right in the middle of your content as you scroll (hard to explain).

You'll want to disable it on mobile devices, or at least iOS devices.

[JorgeM]

You can take a look at this online demo that uses the margin-bottom property. You may have to resize your browser window since there isnt alot of content to fill a very wide display.

HTML and CSS code for the demo/example- How to Keep a Footer Fixed at the Bottom of the Page

I hope that helps you...I'd also recommend that you test this and all of your code using a variety of browsers.