footer e sfondo

[Kyncaid]

salve, so gia' che questo argomento e' stato ampiamente trattato ma nel forum vedo continui rimandi alla guida che ho gia' seguito e che non mi sta risolvendo il dilemma.

la mia pagina e' bene o male strutturata cosi

<container>
<header></header>
<visual></visual>
<wrapper>
<content></content>
<navigation></navigation>
<extra></extra>
</wrapper>
<footer></footer>
</container>


quella che chiamo wrapper e' sostanzialmente la parte dedicata ai contenuti e divisa in 3 colonne, una centrale dominante con i contenuti e due laterali accessorie.

Sono riuscito a realizzare il footer ma quando il contenuto supera la pagina mi si verifica quella sgradevole sovrapposizione e la guida non mi ha risolto nulla.
Inoltre il wrapper dovrebbe avere uno sfondo (fotografico) e quando il contenuto invece e' troppo corto non viene visualizzato interamente.



alcune parti del css

html,body{
    margin:0;
    padding:0;
    height: 100%;
}
body{
    font: 76% arial,sans-serif;
    text-align:center;

div#container{
position: relative;
    text-align:left;
    width:754px;
    margin:0 auto;
    height:100%;
}
body>div#container{height:auto;min-height:100%}


div#content{
position: relative;
margin: 0 150px;
padding: 0 1.5em 5em}

div#content p{
    line-height:1.4
    }
div#navigation{
padding-top:10px;
    /*background:#B9CAFF;*/
    float:left;
    width:150px;
    margin-left:-754px
}
div#extra{
padding-top:10px;
    /*background:#FF8539;*/
    float:left;
    width:150px;
    margin-left:-150px
}

div#wrapper{

padding-top:10px;
background:url('../images/body_bg.jpg');
    float:left;
    width:100%;
    height:100%;

}
div#footer{

    background: #333;
    color: #FFF;
    clear:left;
    width:754px;
    bottom: 0;
    padding: 0.5em 0;
    position:absolute;
    width: 100%
} 

[Kyncaid]

up

[ricman]

Nel #footer prova clear:both

[Kyncaid]

non è cambiato nulla

[custanz]

dovresti anche togliergli il position:absolute e aggiungiere un float

[ricman]

Quanto è fastidiosa la positio:absolute!!!
Non l'avevo neanche letta...

[Kyncaid]

Originariamente inviato da Kyncaid
non è cambiato nulla

così facendo in firefox il footer mi si piazza sullo sfondo ma il content (o meglio il suo sfondo visto che il contenuto è ok) non ci arrivano.
In safari invece il footer mi si sovrappone al content, che era la cosa che stavo cercando di evitare

[ricman]

Prova a ricontrallare il codice... magari prendi spunto da roba tipo questa:
http://css.html.it/guide/lezione/68/...-con-il-float/

[Kyncaid]

si è da quella guida che sono partito
quello è un footer standard che chiude il contenuto
a me serviva che si piazzasse a fondo pagina

è lì che sono iniziati i mie problemi.

La cosa ridicola è che so che è una cosa comunissima ma non sono riuscito a trovare una soluzione

[custanz]

scusa ma forse mi sono perso...

adesso la classe del footer è così

div#footer{
       background: #333;
       color: #FFF;
       clear:all;
       padding: 0.5em 0;
       float: right;
       width: 100%   
}