• Y
    User •

    Problema footer con FF e Opera

    Ho un layout dove sotto la barra di navigazione e la sezione con le bandierine ho dei div che contengono a sinistra delle foto (box_foto) e a destra del testo (box_testo), il tutto è all'interno di un div contenitore (box_foto_testo).

    Fin qui tutto ok... il problema è il footer che sono riuscito a posizionare con IE ma non con FF e Opera questo è il risultato:

    http://www.lalocandailtrovatore.com/2_0/index.asp

    Il footer Oltre a non apparire il colore di sfondo non si allinea sotto il container principale (div#container).

    Credo di aver fatto tutto correttamente: ho dato height:auto al container, margin-bottom:0 al footer e 100% a height e min-height di htm, body e #container.

    

<div id="box_foto_testo">
<div id="box_testo">...</div>
<div id="box_foto"><img src="img/home_foto_sx.jpg" alt=""></div>
<div id="footer"></div>

/*stili per il layout*/
html,body{margin: 0;padding:0; background-color:#fc9}
body{font-family: arial,sans-serif;font-size: 76%;}

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

/*Contenitore principale*/
div#container{
position: relative; 
width: 700px; 
height: 723px; 
min-height: 100%;
margin: 10px auto; 
background-color: #F8E9C3;
border: 1px solid #333}

/*Testata*/
div#testata{
background-color:#f90; 
background-image: url("img/bkg_logo.gif");
background-repeat: no-repeat;
margin:0; 
display: inline;
width:700px; 
height:124px}

/*Contenitore di servizio: barra di navigazione, flash, lingue, telefono*/
div#box_service{
background-color:#c60; 
margin:0; 
width:700px; 
height:236px}

/*Box contenente la barra di navigazione*/
div#box_nav{
background-color:#FFDA7F; 
margin:0; 
width:160px; 
height:236px;
float:left
}

/*Menu di navigazione*/
a.tlinks,div.tlinks {
padding-left:25px;
font-weight:700;
}

div.menuselected {
display:block;
border-bottom:1px dashed #CC6600;
background-color:#993300;
background-image:url("img/frec_onsel.gif");
background-position:center left;
background-repeat:no-repeat;
padding-left:25px;
text-decoration:none;
color:#fff;
font-weight:700;
}

div#menulinks {
border:0;
position:relative;
text-align:left;
font-size:10px;
font-family:Verdana,Arial,Helvetica;
width:160px;
line-height:20px;
margin-bottom:2px;
margin-top:0;
font-weight:700;
padding:0;
}

div#menulinks img {
display:block;
}

div#menulinks a {
display:block;
border-bottom:1px dashed;
text-decoration:none;
background-image:url("img/puntatore_off.gif");
background-position:center left;
background-repeat:no-repeat;
color:#993300;
font-weight:700;
}

div#menulinks a.selezione {
background-color:#C60;
background-image:url("img/frec_onsel.gif");
padding-left:25px;
color:#F5F1E7;
font-weight:700;
}

div#menulinks a:hover {
background-color:#FF6600;
background-image:url("img/frec_on.gif");
color:#fff;
font-weight:700;
}

/*Animazione flash, foto*/
div#box_flash{
margin:0; 
width:540px; 
height:152px;
float:right; 
}

/*Scelta lingua*/
div#box_lang{
margin:0; 
width:540px; 
height:84px;
background-color:#C60;
float:right
}

div#box_sardmap{
margin:0; 
width:94px; 
height:84px;
border-color:#fc9;
border-style:dashed;
border-width:0 1px 0 0;
}

div#lang_eng{
margin:0; 
padding: 23px 0 23px 0; 
width:60px; 
height:38px;
float:right;
}

div#lang_fra{
margin:0; 
padding: 23px 0 23px 0; 
width:60px; 
height:38px;
float:right;
}

div#lang_deu{
margin:0; 
padding: 23px 0 23px 0; 
width:60px; 
height:38px;
float:right;
}

div#lang_esp{
margin-right:5px; 
padding: 23px 0 23px 0; 
width:60px; 
height:38px;
float:right;
}

div#infoprenotazioni{
margin:0; 
width:177px; 
height:84px;
border-color:#fc9;
border-style:dashed;
border-width:0 0 0 1px;
float:right;
}

.noborder {border: none}

div#box_foto_testo{
background-color:#F8E9C3; 
margin:0; 
width:700px; 
min-height:360px;
}

div#box_foto{
background-color:#FFDA7F; 
margin:0; 
width:160px; 
height:360px;
min-height:360px;
float:right;
}

div#box_testo{
background-color:#F8E9C3; 
margin:0; 
padding:10px 10px 10px 10px;
width:520px; 
height:330px;
min-height:330px;
float:right;
color:#990000;
text-align:justify;
}

/*Footer*/
div#footer{
text-align:center;
width:100%;
height:40px; 
margin-bottom:0; 
background-color:#c60; 
color:#FFFFCC;
font-size:12px;
border-color:#333;
border-style:solid;
border-width:1px 0 0 0;
}
div#footer a{color: #FFFFCC;text-decoration: underline}
    0
  • M
    User •

    Innazi tutto ti consiglio di scaricarti FIREBUG per FF.

    Poi in #container hai utilizzato un Fixed height e un min-height. Da premettere che min-height non funziona in IE6 quindi sarebbe meglio utilizzare questo "hack" in:
    **
    min-height:700px;
    height:auto !important;
    height:700px;

    **In questo modo hai risolto il problema del footer nel container.
    Questo è quello che farei io per il footer stesso:

    div#footer** {**
    background-color:#CC6600;
    border:1px solid #000000;
    color:#FFFFCC;
    font-size:12px;
    height:40px;
    margin-left:170px;
    text-align:center;
    width:520px;
    **}
    **
    milez

    0
  • Y
    User •

    @mileZ said:

    Innazi tutto ti consiglio di scaricarti FIREBUG per FF.

    Lo sto provando...molto utile. Uso Web Developer ma per il debug non è molto specifico, grazie per il consiglio.

    Questo è quello che farei io per il footer stesso:

    div#footer** {**
    background-color:#CC6600;
    border:1px solid #000000;
    color:#FFFFCC;
    font-size:12px;
    height:40px;
    margin-left:170px;
    text-align:center;
    width:520px;
    **}
    **mmm... **margin-left:170px ewidth:520px **non vanno bene. Voglio che il footer sia largo quanto tutto il container, non quanto box_testo.

    Ho fatto cosi:

    **/Contenitore principale/
    div#container{
    position: relative;
    width: 700px;
    min-height:723px;
    height:auto !important;
    height:723px;margin: 10px auto;
    background-color: #F8E9C3;
    border: 1px solid #333}

    **/Contenitore foto e testi/
    **div#box_foto_testo{
    background-color:#F8E9C3;
    margin:0;
    width:700px;
    height:auto !important;
    min-height:360px;

    }

    div#box_foto{
    background-color:#FFDA7F;
    margin:0;
    width:160px;
    height:auto !important;
    min-height:360px;
    float:right;
    }

    div#box_testo{
    background-color:#F8E9C3;
    margin:0;
    padding:10px 10px 10px 10px;
    width:520px;
    min-height:340px !important;
    height:340px;
    float:right;
    color:#990000;
    text-align:justify;
    }

    /Footer/
    div#footer{
    background-color:#CC6600;
    border:1px 0 1px 0 solid;
    color:#FFFFCC;
    font-size:12px;
    height:40px;
    text-align:center;
    width:100%;
    }

    **In questo modo sono riuscito a tirare giù il footer a fondo pagina, però non visualizza il colore di sfondo nonostante abbia messo background-color:#CC6600 :bho:

    0
  • M
    User Attivo •

    Ciao Yalesh,
    premetto che ho dato un'occhiata veloce al codice, e non sono riuscita a capire fino in fondo in che modo hai progettato la struttura e i float.
    L'unica cosa che ho provato, è il famoso "Barbatrucco" (ma va li ricordate i barba-papà? ... sono troppo vecchia!?!?) del:
    <div style="clear:both"></div>
    prima del footer, nell'html, naturalmente...

    In bocca al lupo!

    meryk

    0
  • Y
    User •

    @Meryk said:

    Ciao Yalesh,
    premetto che ho dato un'occhiata veloce al codice, e non sono riuscita a capire fino in fondo in che modo hai progettato la struttura e i float.
    L'unica cosa che ho provato, è il famoso "Barbatrucco" (ma va li ricordate i barba-papà? ... sono troppo vecchia!?!?) del:
    <div style="clear:both"></div>
    prima del footer, nell'html, naturalmente...
    meryk

    Ehhh si che me li ricordo... resti di stucco è un barbatrucco! 😄
    Purtroppo non ha funzionato :bho:

    0
  • Y
    User •

    @Meryk said:

    L'unica cosa che ho provato, è il famoso "Barbatrucco" (ma va li ricordate i barba-papà? ... sono troppo vecchia!?!?) del:
    <div style="clear:both"></div>
    prima del footer, nell'html, naturalmente...

    Grazie Meryk, c'eri quasi arrivata, ho risolto aggiungendo clear:right al footer (nel css), anche se devo ammettere che non ho capito cosa ho fatto :D.

    Ho un altro piccolo problema: mi resta un piccolo scarto di 3px tra il #container e il #footer, credevo fosse un'inezia invece non riesco a risolverlo... anche questa volta solo su FF e opera.

    http://www.lalocandailtrovatore.com/2_0/index.asp

    ecco il codice:

    /*Contenitore principale*/
div#container{
position: relative; 
width: 700px; 
min-height:718px;
height:auto !important;
height:718px;margin: 10px auto; 
background-color: #F8E9C3;
border: 1px solid #333}

/*Contenitore foto e testi*/
div#box_foto_testo{
background-color:#F8E9C3;
margin:0;
width:700px;
height:auto !important;
min-height:360px}

div#box_foto{
background-color:#FFDA7F;
margin:0;
width:160px;
height:auto !important;
min-height:360px;
float:right;
}

div#box_testo{
background-color:#F8E9C3;
margin:0;
padding:10px 10px 10px 10px;
width:520px;
min-height:340px !important;
height:340px;
float:right;
color:#990000;
text-align:justify;
}

/*Footer*/
div#footer{
background-color:#CC6600;
color:#FFFFCC;
font-size:12px;
height:40px;
text-align:center;
width:100%;
margin-bottom:0;
clear:right
}
    0
  • J
    User •

    @yalesh said:

    Ho un altro piccolo problema: mi resta un piccolo scarto di 3px tra il #container e il #footer, credevo fosse un'inezia invece non riesco a risolverlo... anche questa volta solo su FF e opera.

    Lo scarto è dato dal fatto che hai messo clear:right al footer. In pratica quando un elemento viene reso float, viene escluso dal flusso del foglio, permettendoti di posizionare elementi uno affianco all'altro, e non uno sotto l'altro. Il clear ti permette di ripristinare il normale flusso: un elemento con clear viene posizionato subito sotto un elemento float. Quel margine superiore purtroppo non è eliminabile, in quanto viene aumentato automaticamente per evitare che il bordo superiore tocchi il margine esterno inferiore del elemento float.

    Dovrebbe essere cosi! (correggetemi pure se ho detto una cavolata :D)

    0
Effettua l'accesso per rispondere