• User Newbie

    Div "footer" del sito non se ne sta in fondo...

    Mi serve un aiuto di qualche esperto di css per questo sito che sto realizzando:

    http://www.fattoriabiologica.com/

    Avendo usato sempre tempalte altrui... ora che ne sto usando uno "mio" mi trovo con un problema: il DIV FOOTER non si allinea come vorrei, ovvero in fondo dopo tutto il resto.
    In particolare in Explorer il testo del DIV COLONNADX si infila sotto il footer... mentre in Opera e *Firefox *ancora peggio.

    Evidentemente non è scritto in modo corretto.

    Mi aiutate?

    Grazie 🙂


  • Moderatore

    Ciao purno e benvenuto nel Forum GT

    Bisognerebbe vedere come richiami i div nell'index.php per poterti aiutare


  • User Newbie

    Questo è il codice:

    /*
    url : www.fattoriabiologica.com
    realizzato : Settembre 2007

    */
    html,body{margin:0;padding:0}
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
    table{border-collapse:collapse;border-spacing:0;}
    fieldset,img{border:0;}
    cite,code,em,strong,th{font-style:normal;font-weight:normal;}
    ol,ul{list-style:none;}
    th{text-align:left;}
    h1,h2,h3,h4{font-size:100%;}
    q:before,q:after{content:'';}
    i {font-style: italic; color: #776655;}
    b, strong {font-weight: bold; color: #222;}
    .rosso { font : bold 16px georgia, times, Arial, sans-serif; padding : 5px 0; margin : 0; color : #900; }
    .georgia { font : bold 10pt georgia, times, Arial, sans-serif; padding : 0; margin : 0; color : #333}
    .color {color: #bbb;}
    .red {color: #AF0024;font-size: 1.0em;}
    .hide {display: none;}
    img { border : none;}
    body{
    background-image:url(bg.jpg); background-repeat:repeat-x; background-position:top;
    font-family: lucida,verdana,Arial,"Times New Roman", Times, serif; font-size: 80%;
    font-size: 80%; text-align:center;}
    #container {width:780px; margin:0 auto; text-align:left}

    /* Header /
    #header {background: url(headerbg.jpg) repeat-x; width: 100%; height: 35px; }
    h1{font-weight: normal; color :#666; padding: 10px 0 15px 0; text-align:center; font-size: 8pt;}
    /
    Partners */
    #partners {text-align:left; padding:5px 0 10px 0; font-size:12px;}
    a:link, a:visited{color:#03c; text-decoration: underline;}
    a:active, a:hover{color:#369; text-decoration: none;}
    a.flag1 {background-image: url(immagini/flag/ita1.gif); width: 33px;}
    a.flag1:hover {background-image: url(immagini/flag/ita2.gif); width: 33px; height: 23px;background-position: center top;}
    a.flag2 {background-image: url("immagini/flag/de1.gif"); width: 33px; height: 23px;}
    a.flag2:hover {background-image: url("immagini/flag/de2.gif"); width: 33px; height: 23px;}
    a.flag3 {background-image: url("immagini/flag/en1.gif"); width: 33px; height: 23px;}
    a.flag3:hover {background-image: url("immagini/flag/en2.gif"); width: 33px; height: 23px;}
    a.flag4 {background-image: url("immagini/flag/fra1.gif"); width: 33px; height: 23px;}
    a.flag4:hover {background-image: url("immagini/flag/fra2.gif"); width: 33px; height: 23px;}

    /* box1: contiene menu e foto piccola */
    #box1 {background: url(headerbg.jpg) repeat-x; width: 100%;}
    #menu { margin : 0; width : 480px; padding :15px 0; border-top : 1px dotted #669999; border-bottom : 1px dotted;
    float : left; height : 85px; color :; font-size:14px; font-family:georgia, times, Arial, sans-serif}
    img { border :none;}
    #fotopiccola{ margin : 0; padding : 15px 0 15px 0; width : 270px; border-top : 1px dotted; border-bottom : 1px dotted;
    float : right; height : 85px;}

    /* fotogrande e slogan */
    #fotogrande{ margin: 0; padding: 15px 0; float:left; width:480px;}
    #slogan {margin: 15px 0 0 0; float:right; width:270px; height: 240px; background-image: url('sfondi/123.gif')}
    #testoslogan {margin: 0;padding: 15px 20px;}
    h1{ font : 18px georgia, times, Arial, sans-serif; padding : 5px 0; margin : 0; color :;}

    /* box2: contiene testo e colonnadx */
    #box2 {margin:0; padding: 0; clear:both; width:100%}
    #testo{ margin: 0; padding: 15px 0; float:left; width:480px; border-top : 1px dotted;}
    #colonnadx {margin: 0; padding: 15px 0; float:right; width:270px; height: 240px;border-top : 1px dotted;}

    /* footer */
    #footer { padding: 0; color: #111; width: 780px;}
    {height: 80px; margin: 20px 0; background-image: url('sfondi/sfondo_footer.jpg');
    border-top : 1px dotted; padding: 10px 0 0 0; font-size : 8pt}
    p {font-size: 1.0em; line-height: 1.8em; margin: 0; padding: 0;}
    a {color : #990000; text-decoration : none; font-weight : normal; text-decoration : underline;}
    a:hover {color :; text-decoration : none; font-weight : normal; text-decoration : none;}

    /* Fine */


  • User Attivo

    Ciao Purno,
    prova ad aggiungere:

    #footer { clear:both; }
    

    L'ho testato con Firefox.


  • User Newbie

    grazie.... in parte risolto... meglio che parto da capo.


  • User

    /* CSS Document */
    html,body{margin:0; padding: 0;height: 100%}
    div#container{position: relative; height:100%}
    body>div#container{height: auto; min-height: 100%}
    div#content{padding: 0 1.5em 5em}
    div#footer{position:absolute;bottom: 0;width: 100%}


    Se puo' aiutare questa e' la base che utilizzo io per manterene il footer sul fondo della pagina