1,105,286 Community Members

Fix Footer Bar Like Daniweb

Member Avatar
Farhad.idrees
Junior Poster
102 posts since Dec 2010
Reputation Points: 1 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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
Deleted Member
 
0
 

@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.

Member Avatar
JorgeM
IT Addict
6,381 posts since Dec 2011
Reputation Points: 567 [?]
Q&As Helped to Solve: 953 [?]
Skill Endorsements: 172 [?]
Moderator
Featured
Sponsor
 
1
 

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.

Member Avatar
<M/>
Industrious Poster
4,473 posts since Apr 2012
Reputation Points: 106 [?]
Q&As Helped to Solve: 139 [?]
Skill Endorsements: 114 [?]
Featured
 
0
 

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

Member Avatar
EvolutionFallen
Posting Pro
504 posts since Aug 2009
Reputation Points: 107 [?]
Q&As Helped to Solve: 108 [?]
Skill Endorsements: 8 [?]
 
0
 

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.

Member Avatar
Farhad.idrees
Junior Poster
102 posts since Dec 2010
Reputation Points: 1 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
JorgeM
IT Addict
6,381 posts since Dec 2011
Reputation Points: 567 [?]
Q&As Helped to Solve: 953 [?]
Skill Endorsements: 172 [?]
Moderator
Featured
Sponsor
 
1
 

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;}

Member Avatar
Dani
The Queen of DaniWeb
20,551 posts since Feb 2002
Reputation Points: 1,356 [?]
Q&As Helped to Solve: 927 [?]
Skill Endorsements: 203 [?]
Administrator
Featured
Sponsor
 
0
 

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!! :)

Member Avatar
Dani
The Queen of DaniWeb
20,551 posts since Feb 2002
Reputation Points: 1,356 [?]
Q&As Helped to Solve: 927 [?]
Skill Endorsements: 203 [?]
Administrator
Featured
Sponsor
 
0
 

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.

Member Avatar
JorgeM
IT Addict
6,381 posts since Dec 2011
Reputation Points: 567 [?]
Q&As Helped to Solve: 953 [?]
Skill Endorsements: 172 [?]
Moderator
Featured
Sponsor
 
0
 

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.

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article