• User Newbie

    Layout capriccioso

    Salve a tutti, sono un neofita che lentamente si sta avvicinando al mondo del webdesign, sto tutt'ora progettando un sito internet e sto creando un layout con float a tre colonne, nel creare il layout riscontro diversi "capricci" da parte del codice, in pratica su IE6 si vede correttamente cosi come in IE7...e stranamente FF mi da problemi, mi nascone lo sfondo del div#contenitore, sicuramente son errori miei...e che purtroppo non riesco ad individuare, spero che voi possiate aiutarmi nel mentre vi ringrazio.
    Simone

    CSS

    body {
    margin: 0;
    background: url(../grafica/bg.png) #0054A6 repeat-x;
    font-family: Verdana, Sans-serif;
    font-size: 0.750em;
    color: #ffffff;
    }
    
    div#header {
    width: 700px;
    height: 125px;
    margin: 0 auto;
    background: url(../grafica/header.png);
    }
    
    div#contenitore {
    width: 700px;
    height: 100%;
    margin: 0 auto;
    background: url(../grafica/sfondo.png);
    }
    
    div#left {
    width: 150px;
    float: left;
    }
    
    div#right {
    width: 150px;
    float: right;
    }
    
    div#center {
    width: 400px;
    float: left;
    }
    
    div#footer {
    width: 700px;
    height: 30px;
    margin: 0 auto;
    background: url(../grafica/footer.png);
    clear: both;
    }
    ```XHTML
    

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "h ttp://ww w.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="h ttp://ww w.w3.org/1999/xhtml" lang="it">
    <head>
    <title>Layout</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <body>
    <div id="header"></div>
    <div id="contenitore">
    <div id="left"></div>
    <div id="right"></div>
    <div id="center"></div>
    </div>
    <div id="footer"></div>
    </body>
    </html>


  • User Attivo

    Succede perché nel contenitore hai tutti elementi con float e nessuna altezza specificato. Puoi risolvere in due modi:

    • Specificare un'altezza per il <div> contenitore
    • Inserire un <div class="clear"> invisibile in fondo al <div id="contenitore> subito prima del tag di chiusura.

    </div><!--fine div center -->
    <div class="clear"></div>
    </div><!-- fine div contenitore -->

    Il css per il div clear è:

    .clear {
    clear: both;
    height: 0;
    }Per ovviare a eventuali problemi con non mi ricordo più quale browser in genere si aggiunge anche una dimensione per il font e poi un lineheight 0 per evitare che viene visualizzato un piccolo spazio, che renderebbe il div non più invisibile. Il css diventa:
    .clear {
    clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0px;
    }


  • User Newbie

    Ti ringrazio, mi hai letteralmente salvato la vita...non sapevo di questa cosa del clear div invisibile...non si smette mai di imparare 😉
    Grazie!