Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    sfondo body altezza 100%

    Ciao a tutti, provo a spiegarvi il mio problema, avrei necessità di realizzare un sito che avesse come sfondo del body una foto (larghezza 940px ALTEZZA 180px) che deve stare al centro della pagina SEMPRE allineata in basso e sempre visibile.
    Voglio che sia visibile anche con poco contenuto, in poche parole la voglio allineata in fondo al centro del body, utilizzando una tabella ce l'ho fatta e non ho problemi,ho fatto una tabella alta 100% con 2 righe di cui la prima senza altezza e la seconda riga alta come l'immagine dello sfondo quindi 180px,se nella prima riga metto molto contenuto la seconda riga con altezza fissa ovviamente viene spinta in basso, però vorrei iniziare ad usare i div e abbandonare le tabelle per quel che riguarda i layout....ecco se uso i div con firefox ho sempre dei problemi di visualizzazione pur impostanto html e body alti 100%.
    per farvi un'idea vi incollo il codice html e il relativo css di come ho risolto la questione usando una tabella.
    se qualcuno può aiutarmi ad ottenere lo stesso effetto usando dei div gli sarei molto grato.
    saluti e auguri a tutti.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <link href="../css/stili.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <table cellpadding="0" cellspacing="0" class="contentitore">
    <tr>
    <td valign="top">

    xxxx</p>
    </td>
    </tr>
    <tr>
    <td style="height:180px;"></td>
    </tr>
    </table>
    </body>
    </html>


    body{
    margin: 0px;
    padding: 0px;
    font-size: 76%;
    background-color: #ede6d6;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    height:100%;
    }
    html{
    height:100%;
    }
    .contentitore{
    width:940px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    border:0px;
    background-image: url(../img/bg-tour.jpg);
    background-repeat: repeat-y;
    background-position: bottom center;
    height:100%;
    }

  2. #2
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    questa soluzione può andare bene?

    codice:
    html, body { height: 100%; }
    
    body {
       background : url(../img/bg-tour.jpg) bottom center no-repeat;
    }
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  3. #3
    ho risolto cosi leggendo questo articolo:
    http://css.html.it/guide/lezione/64/...ma-del-footer/


    html,body{margin: 0;padding:0;height:100%;}
    body{font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;;font-size: 76%;text-align: center;background-color: #ede6d6;}
    div#container{position:relative; width: 956px; height: 100%;margin: 0 auto;
    text-align: left; background-color:#85a9d9;border-right: 1px solid #052754;border-left: 1px solid #052754;}
    body>div#container{height:auto;min-height:100%}
    div#footer{position: absolute;bottom:0; width: 100%; height:180px;}



    div#footer{
    background-image: url(../img/bg-tour.jpg);
    background-repeat: repeat-y;
    background-position: bottom center;
    }
    div#content{
    padding: 0em 0em 180px 0em;
    width:940px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    margin-bottom:0px;
    }

    <div id="container">
    <div id="content">
    <div style="background-color:#c5d2e8">
    <h2 style="margin:0px;">spazio contenuti</h2>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    </p>


    xxx</p>
    </div>
    </div>
    <div id="footer"></div>
    </div>

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.