footer problem

4 messages

footer problem

Reply Threaded

Hi people,
I have a major problem with any footer at my layouts with Firefox and
IE.I want to stick it in bottom of page but this can't be done.for
example if i put it in position:absolute all work fine for a 100%
height.The problem rises in my dynamic layouts where data increase and
footer position is in middle of page.I have read many articles about
this problem and try them bit none really helped me.My layouts have
the below structure:

<div id="container">
<div id="header">
..........
</div>
<div id="content">
..........
</div>
</div>
<div id="footer">
........
</div>

and my css:

* {
margin:0;
padding:0;
}

html
{ height: 100%;
}

#container{
min-height: 100%;
height: auto;
height: 100%;
clear:both;
padding-bottom: 40px;
position:relative;
margin:0 auto;
}

#footer { width:100%;
position: absolute;
bottom:0;
background-color:#0099FF;
clear:both;
height:40px;
margin-top:-40px;

}

#header { width:100%;
position: absolute;
top:100px;
background-color:#0099FF;
height:40px;
}

body {height: 100%;
background: url('../img/loggo.png');
background-repeat: no-repeat;
background-color:#B4B4CD;
font-family:"Times New Roman", Times, serif;
font-size:12px;
font-style:normal;
}

Any help would be so kind!
Many thanks in advance,
Paulos

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "CakePHP" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/cake-php?hl=en
-~----------~----~----~----~------~----~------~--~---

John Andersen

Re: footer problem

Reply Threaded

In your footers CSS, add:

bottom:0px;

so that the footers absolute position is calculated from the bottom of
the browsers window.

If you don't want it to be there always, just add a minimum height to
your container block before the footer.
Enjoy,
John

On Nov 5, 1:15 am, Paulos23 <[hidden email]> wrote:

> Hi people,
> I have a major problem with any footer at my layouts with Firefox and
> IE.I want to stick it in bottom of page but this can't be done.for
> example if i put it in position:absolute all work fine for a 100%
> height.The problem rises in my dynamic layouts where data increase and
> footer position is in middle of page.I have read many articles about
> this problem and try them bit none really helped me.My layouts have
> the below structure:
>
> <div id="container">
> <div id="header">
> ..........
> </div>
> <div id="content">
> ..........
> </div>
> </div>
> <div id="footer">
> ........
> </div>
>
> and my css:
>
> * {
> margin:0;
> padding:0;
>
> }
>
> html
> { height: 100%;
>
> }
>
> #container{
> min-height: 100%;
> height: auto;
> height: 100%;
> clear:both;
> padding-bottom: 40px;
> position:relative;
> margin:0 auto;
>
> }
>
> #footer { width:100%;
> position: absolute;
> bottom:0;
> background-color:#0099FF;
> clear:both;
> height:40px;
> margin-top:-40px;
>
> }
>
> #header { width:100%;
> position: absolute;
> top:100px;
> background-color:#0099FF;
> height:40px;
>
> }
>
> body {height: 100%;
> background: url('../img/loggo.png');
> background-repeat: no-repeat;
> background-color:#B4B4CD;
> font-family:"Times New Roman", Times, serif;
> font-size:12px;
> font-style:normal;
>
> }
>
> Any help would be so kind!
> Many thanks in advance,
> Paulos

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "CakePHP" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/cake-php?hl=en
-~----------~----~----~----~------~----~------~--~---

John Andersen

Re: footer problem

Reply Threaded

DISREGARD! Just amazing how ones eyesight fails with the morning
light :D

All my suggestions are in place, except that minimum height should not
be a percentage!

Only other option is to make the footer float at the bottom, using z-
level:9;

Enjoy,
John

On Nov 5, 8:24 am, John Andersen <[hidden email]> wrote:

> In your footers CSS, add:
>
> bottom:0px;
>
> so that the footers absolute position is calculated from the bottom of
> the browsers window.
>
> If you don't want it to be there always, just add a minimum height to
> your container block before the footer.
> Enjoy,
> John
>
> On Nov 5, 1:15 am, Paulos23 <[hidden email]> wrote:
>
> > Hi people,
> > I have a major problem with any footer at my layouts with Firefox and
> > IE.I want to stick it in bottom of page but this can't be done.for
> > example if i put it in position:absolute all work fine for a 100%
> > height.The problem rises in my dynamic layouts where data increase and
> > footer position is in middle of page.I have read many articles about
> > this problem and try them bit none really helped me.My layouts have
> > the below structure:
>
> > <div id="container">
> > <div id="header">
> > ..........
> > </div>
> > <div id="content">
> > ..........
> > </div>
> > </div>
> > <div id="footer">
> > ........
> > </div>
>
> > and my css:
>
> > * {
> > margin:0;
> > padding:0;
>
> > }
>
> > html
> > { height: 100%;
>
> > }
>
> > #container{
> > min-height: 100%;
> > height: auto;
> > height: 100%;
> > clear:both;
> > padding-bottom: 40px;
> > position:relative;
> > margin:0 auto;
>
> > }
>
> > #footer { width:100%;
> > position: absolute;
> > bottom:0;
> > background-color:#0099FF;
> > clear:both;
> > height:40px;
> > margin-top:-40px;
>
> > }
>
> > #header { width:100%;
> > position: absolute;
> > top:100px;
> > background-color:#0099FF;
> > height:40px;
>
> > }
>
> > body {height: 100%;
> > background: url('../img/loggo.png');
> > background-repeat: no-repeat;
> > background-color:#B4B4CD;
> > font-family:"Times New Roman", Times, serif;
> > font-size:12px;
> > font-style:normal;
>
> > }
>
> > Any help would be so kind!
> > Many thanks in advance,
> > Paulos

Paulos23

Re: footer problem

Reply Threaded

John thank you for your quick reply.I just replace min-height:100% with 980px and some pages work fine for long text but those in short the footer sticks in bottom and you have to scroll page to see it.This problem is making me really angry.Another thing i 'd like to say is that in my home page i see all divs appear twice.So footer has double size etc and i think this has to do with default layout.I need to change the code inside to make data apper once and correctly.

2009/11/5 John Andersen <j.andersen.lv@gmail.com>

DISREGARD! Just amazing how ones eyesight fails with the morning
light :D

All my suggestions are in place, except that minimum height should not
be a percentage!

Only other option is to make the footer float at the bottom, using z-
level:9;

Enjoy,
John

On Nov 5, 8:24 am, John Andersen <[hidden email]> wrote:
> In your footers CSS, add:
>
> bottom:0px;
>
> so that the footers absolute position is calculated from the bottom of
> the browsers window.
>
> If you don't want it to be there always, just add a minimum height to
> your container block before the footer.
> Enjoy,
> John
>
> On Nov 5, 1:15 am, Paulos23 <[hidden email]> wrote:
>
> > Hi people,
> > I have a major problem with any footer at my layouts with Firefox and
> > IE.I want to stick it in bottom of page but this can't be done.for
> > example if i put it in position:absolute all work fine for a 100%
> > height.The problem rises in my dynamic layouts where data increase and
> > footer position is in middle of page.I have read many articles about
> > this problem and try them bit none really helped me.My layouts have
> > the below structure:
>
> > <div id="container">
> > <div id="header">
> > ..........
> > </div>
> > <div id="content">
> > ..........
> > </div>
> > </div>
> > <div id="footer">
> > ........
> > </div>
>
> > and my css:
>
> > * {
> > margin:0;
> > padding:0;
>
> > }
>
> > html
> > { height: 100%;
>
> > }
>
> > #container{
> > min-height: 100%;
> > height: auto;
> > height: 100%;
> > clear:both;
> > padding-bottom: 40px;
> > position:relative;
> > margin:0 auto;
>
> > }
>
> > #footer { width:100%;
> > position: absolute;
> > bottom:0;
> > background-color:#0099FF;
> > clear:both;
> > height:40px;
> > margin-top:-40px;
>
> > }
>
> > #header { width:100%;
> > position: absolute;
> > top:100px;
> > background-color:#0099FF;
> > height:40px;
>
> > }
>
> > body {height: 100%;
> > background: url('../img/loggo.png');
> > background-repeat: no-repeat;
> > background-color:#B4B4CD;
> > font-family:"Times New Roman", Times, serif;
> > font-size:12px;
> > font-style:normal;
>
> > }
>
> > Any help would be so kind!
> > Many thanks in advance,
> > Paulos