PDA

View Full Version : Footer bar?


Jim_Shady
04-14-2005, 05:12 PM
Hi all,

Posted about this a few weeks ago, and although Domedia and Ranjan tried to help I never really managed to do what I desired. I wondered if you'd take a glance at the page for me please and see what you suggest...

http://www.mgf-labs.com/ ('http://www.mgf-labs.com/')

You see the grey bar along the top? I'd like the same at the bottom. Am finding it a complete arse to accomplish....

Cheers - Jim Shady.

kate
04-14-2005, 05:39 PM
A novice answer lolol your table can be put at the foot same graphic with/out text and then same colour.

Just create a new table same size.

How does that sound, I am a novice though Jim so maybe not!

:D

gmcrone
04-14-2005, 10:48 PM
Jim,

Download the free template I made and take a look at the the CSS code.

It has a footer div that always stays below your content due to the left float in the maincontent area.

Mike...

Jim_Shady
04-15-2005, 10:35 AM
Hi Kate,

Sorry, that won't work. I want it to always be at the bottm of the page - and the table will depend on people's monitor sizes.

Thanks for the help gmcrone - I'll take a look at it and see if I can see how to do it.

Jim Shady.

Jim_Shady
04-15-2005, 11:37 AM
Hiya.

I've had a play...

http://www.mgf-labs.com/MachineryEquiptment.htm ('http://www.mgf-labs.com/MachineryEquiptment.htm')

And have got the desired 'bar' however it comes straight after my content. I think that I need to do some sort of 'floating' maneover but am not really sure? Sorry to hassle again, but help would be appreciated. I read your 'leftfloat in the main content area' gmcrone but am not sure what you mean.

Thanks - Jim Shady.

gmcrone
04-15-2005, 10:04 PM
In the #footer CSS section, add a margin : (appx) 700 0 0 0

You will have to play with this a little bit to get the correct number of pixels.
Count the number of pixels down from the top of your page to where you want the footer to start (it is currently at 652px - header 301, menu 50, main content 301), your footer is 70 pixels high.

Mike...

Jim_Shady
04-18-2005, 02:20 PM
Thanks Mike, I'll have a play with this later and will hopefully figure it out.

Jim Shady.

Jim_Shady
04-20-2005, 06:20 PM
</div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>QUOTE ("gmcrone")</td></tr><tr><td id='QUOTE'> In the #footer CSS section, add a margin : (appx) 700 0 0 0

You will have to play with this a little bit to get the correct number of pixels.
Count the number of pixels down from the top of your page to where you want the footer to start (it is currently at 652px - header 301, menu 50, main content 301), your footer is 70 pixels high.

Mike...[/quote:e9bb2454bb]

Hiya Mike,

This is my CSS Sheet at the moment...

#header {background-color: #C0C0C0;
background-image:url(Images/MGF_Main_Thin.png)}

#menu {background-color: #800000;}

#machinerybackground {background-image:url(Images/MachineryBackgroundImage.png)}

#footer {background-color: #C0C0C0;
background-image:url(Images/MGF_Main_Thin.png)}

How and where do I add the margin that you talk about please? I've tried but it's not having it.... once you show me where I will then play with the values. Or do you mean in the actual page template?

Jim Shady.

gmcrone
04-20-2005, 09:58 PM
Like so....

#footer {margin: 700 0 0 0 ; background-color: #C0C0C0;
background-image:url(Images/MGF_Main_Thin.png)}

Now, one problem with this is as you increase the length of your columns, they may overwrite your footer as you are telling the browser to display the footer exactly 700 px down from the top.

The only other way to do this is to use margin-top: 90% (percentage must be played with also).

Play with both styles and see what works best for you...

Mike...

gmcrone
04-21-2005, 12:46 AM
I finally found a CSS hack to make your footer stay at absolute bottom


html, body, #contents {
min-height: 100%;
width: 100%;
height: 100%;
}

/*
* The "height" above is a hack for IE5+/Win. Below we adjust
* it using the child selector to hide from IE5+/Win
*/

html>body, html>body #contents {
height: auto;
}

/*
* Without this, Moz1.0 adds a vertical scrollbar
*/

body {
margin: 0;
font-family: Arial, sans-serif;
}

#contents {
position: absolute;
top: 0;
left: 0;
}

#footer {
position: absolute;
bottom: 0;
background-color: #ccffcc;
width: 70%; /* See note below */
text-align: center;
padding: 0 15%;
}

/* SBMH -- see http://css-discuss.incutio.com/?page=BoxModelHack
* Stupid hack lets IE see 100%, others see 70%.
*/
#footer {
\width: 100%;
w\idth: 70%;
}

#main {
margin-bottom: 5em;
height: auto;
padding: .5em;
}