Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 19
  1. #1
    Utente di HTML.it L'avatar di Ashry
    Registrato dal
    Jul 2002
    Messaggi
    586

    come allineare il footer in basso ed evitare che si sovrapponga agli altri div

    Dovrei posizionare il footer i modo che sia o in fondo alla pagina se il testo è < della lunghezza della pagina o sotto al testo se è > ma non ci rieso.

    Vi posto il codice

    CSS:

    /* CSS Document */
    html,body{margin:0;padding:0;height:100%;min-height:100%;}

    body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 72%;
    color: #CCCCCC;
    }
    Body{
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color:#383838;
    }
    html>body, html>body div#container {height:auto;min-height:100%;}



    /*-----------------------------------------------------------box principali--------------------------------------------------------*/
    div#container{ position:absolute;
    height: 100%;
    width:740px;
    padding-left:12px;
    padding-right:12px;

    left:50%;
    top:0;

    margin:0 0 0 -382px;

    color:#212121;
    background-color:transparent;
    background-image:url(../images/bg.jpg);
    background-repeat:repeat-y;
    background-position:center top;
    }

    #top{text-align:right;
    width:740px;
    height:160px;
    background-image:url(../images/top.jpg);
    background-repeat:no-repeat;
    background-position:center top;}

    #text{ text-align:left;
    width:537px;
    float:left;
    margin-left:12px;
    }

    #dx{width:203px;
    height:250px;
    float:right;}

    #footer{
    clear:both;
    position:absolute;
    bottom:0px;
    width:740px;
    height:124px;
    background-image:url(../images/bottom.jpg);
    background-repeat:no-repeat;
    background-position:center top;
    }

    /*----------------------------------------------------MENU------------------------------------------*/

    #immagini{width:203px;
    text-align:center;
    border-top:3px solid #FFFFFF;}

    #linkList{width:203px;
    border-bottom:6px solid #91C02D;
    border-top:6px solid #91C02D;}

    #linklist img{ border:0px; margin:0px; padding:0px;}


    HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>:: POLYPIU'::</title>
    <style type="text/css">
    @import url("../_css/style.css");
    </style>
    </head>
    <body>
    <div id="container">
    <div id="top"></div>
    <div id="text">
    aa
    </div>
    <div id="dx">
    <div id="linkList">
    <ul>
    [*]AZIENDA
    [*]DOVE SIAMO
    [*]PRODOTTI
    [*]DEVO REALIZZARE
    [*]NEWS
    [*]CONTATTACI
    [*]CERTIFICAZIONI
    [*]GARANZIE
    [/list]
    </div>
    <div id="immagini">a</div>
    </div>
    <div id="footer">Privacy</div>
    </div>
    </body>
    </html>

    Mi potreste aiutare?

  2. #2
    Nel tuo CSS, elimina position:absolute; da #footer

  3. #3
    Utente di HTML.it L'avatar di Ashry
    Registrato dal
    Jul 2002
    Messaggi
    586
    ma così non rimane in fondo alla pagina se il testo è scarno

  4. #4
    Prova.

  5. #5
    Utente di HTML.it L'avatar di Ashry
    Registrato dal
    Jul 2002
    Messaggi
    586
    l'ho già fatto e ho provato anche con il fixed

    non riesco proprio a venirne a capo

  6. #6
    Scusa.
    In fondo vuol dire, allineato sempre e comunque al margine inferiore dl tuo div contenitore?

  7. #7
    Originariamente inviato da gra-fichetto
    Scusa.
    In fondo vuol dire, allineato sempre e comunque al margine inferiore dl tuo div contenitore?
    In caso positivo, sposta fuori dal contenitore il tuo footer; cioè:

    La tua pagina modificata:

    codice:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>:: POLYPIU'::</title>
    <style type="text/css">
    @import url("style.css");
    </style>
    </head>
    <body>
    <div id="container">
    	<div id="top"></div>
    	<div id="text">
    	aa
    	</div>
    
    	<div id="dx">
    		<div id="linkList">
    		<ul>
    		[*]AZIENDA
    		[*]DOVE SIAMO 
    		[*]PRODOTTI
    		[*]DEVO REALIZZARE 
    
    		[*]NEWS
    		[*]CONTATTACI
    		[*]CERTIFICAZIONI
    		[*]GARANZIE
    		[/list]
    	</div>
    	<div id="immagini">a</div>
    
    	</div>
    	
    	</div>
    <div id="footer">Privacy</div>
    </body>
    </html>
    Il tuo CSS modificato:

    codice:
    html,body{
    	width: 100%;
    	margin: 0 auto;
    	padding: 0;
    	height: 100%;
    	min-height: 100%;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 72%;
    	color: #CCCCCC;
    	background-color:#383838;
    	}
    
    
    /*
    html>body, html>body div#container {height:auto;min-height:100%;}*/
    
    
    
    /*-----------------------------------------------------------box principali--------------------------------------------------------*/
    div#container{ 
    margin: 0 auto;
    height: 100%;
    width: 740px;
    padding: 0 12px 0 12px;
    color: #212121;
    background-color: transparent;
    background-image: url(../images/bg.jpg);
    background-repeat: repeat-y;
    background-position: center top
    }
    
    #top{
    text-align: right;
    width: 740px;
    height: 160px;
    background-image:url(../images/top.jpg);
    background-repeat:no-repeat;
    background-position:center top
    }
    
    #text{
    text-align: left;
    width: 537px;
    float: left;
    margin-left: 12px;
    }
    
    #dx{
    width: 203px;
    height: 250px;
    float: right;
    }
    
    #footer{
    clear:both;
    margin: 0 auto;
    width:740px;
    height:124px;
    background-image:url(../images/bottom.jpg);
    background-repeat:no-repeat;
    background-position:center top;
    padding: 0 12px 0 12px
    }
    
    /*----------------------------------------------------MENU------------------------------------------*/
    
    #immagini{width:203px;
    text-align:center;
    border-top:3px solid #FFFFFF;}
    
    #linkList{width:203px;
    border-bottom:6px solid #91C02D;
    border-top:6px solid #91C02D;}
    
    #linklist img{ border:0px; margin:0px; padding:0px;}

  8. #8
    Utente di HTML.it L'avatar di Ashry
    Registrato dal
    Jul 2002
    Messaggi
    586
    Mitico
    Grazie

  9. #9
    Di nulla.

  10. #10
    Utente di HTML.it L'avatar di Ashry
    Registrato dal
    Jul 2002
    Messaggi
    586
    Scusa ieri poi non ho avuto il tenpo di postare

    Ho testato il codice diminuendo il testo e il totale della lunghezza della pagina mi risulta essere il 100% + l'altezza del footer sia in firefox che in IE, inoltre in firefox se ridimensiono la finestradel browser il mio di contenitore "scompare"


    ho provato così:

    CSS

    /* CSS Document */

    html,body{margin: 0;padding:0;height:100%;}


    body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80%;
    color: #CCCCCC;
    }
    Body{
    margin: 0px auto;
    background-color:#383838;
    text-align:center;
    }

    img{ border:0px; margin:0px;}

    div {
    text-align: left;
    margin: 0px auto 0px auto;
    }




    /*-----------------------------------------------------------box principali--------------------------------------------------------*/

    div#container{ position:relative;
    margin: 0 auto;
    border:0px;
    height:100%;
    width:740px;
    padding: 0 12px 0 12px;
    color:#212121;
    background-color:transparent;
    background-image:url(../images/bg.jpg);
    background-repeat:repeat-y;
    background-position:center top;
    }

    body>div#container{height:auto;min-height:100%;}

    html,body{margin:0;padding:0;height:100%;}


    #top{text-align:right;
    width:740px;
    height:160px;
    background-image:url(../images/top.jpg);
    background-repeat:no-repeat;
    background-position:center top;}

    div#contenuto{ width:740px;padding-bottom:124px;height:auto; clear:right; margin:0 auto; display:table;}

    #text{ text-align:justify;
    width:497px;
    float:left;
    padding-left:20px;
    padding-right:20px;
    display:table-cell;
    }

    #dx{width:203px;
    height:250px;
    float:right;
    display:table-cell;}

    #footer{ position:absolute;
    border:0px;
    bottom:0px;
    left:12;
    width:720px;
    padding-top:100px;
    padding-right:20px;
    height:24px;
    background-image:url(../images/bottom.jpg);
    background-repeat:no-repeat;
    background-position:center bottom;
    text-align:right;}
    #footer a,#footer a:visited {
    text-decoration:none;
    border-bottom: none;
    color:#FFFFFF;
    font-size:90%;
    }

    #footer a:hover {
    text-decoration:none;
    color:#CCCCCC;
    font-size:90%;

    }
    /*----------------------------------------------------MENU------------------------------------------*/

    #immagini{width:203px;
    text-align:center;
    border-top:3px solid #FFFFFF;}

    #linkList{width:203px;
    border-bottom:6px solid #91C02D;
    border-top:6px solid #91C02D;}

    #linklist img{ border:0px; margin:0px; padding:0px;}



    HTML


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>:: POLYPIU'::</title>
    <style type="text/css">
    @import url("../_css/style.css");
    </style>
    </head>
    <body>
    <div id="container">
    <div id="top"></div>
    <div id="contenuto">
    <div id="text">Testo</div>
    <div id="dx">
    <div id="linkList">
    <ul>
    [*]AZIENDA
    [*]DOVE SIAMO
    [*]PRODOTTI
    [*]DEVO REALIZZARE
    [*]NEWS
    [*]CONTATTACI
    [*]CERTIFICAZIONI
    [*]GARANZIE
    [/list]
    </div>
    <div id="immagini">immagini </div>
    </div>
    </div>
    <div id="footer">link footer<div>
    </div>
    </body>
    </html>

    funziona in IE ma in firefox il footer si sovrappone al testo :master:


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 © 2026 vBulletin Solutions, Inc. All rights reserved.