Visualizzazione dei risultati da 1 a 5 su 5

Discussione: footer al centro

  1. #1

    footer al centro

    ciao a tutti!
    sto diventando scema!!

    sto facendo un sito, testata, body e footer.
    con firefox tutto ok, con explorer il footer mi si sposta tutto a dx!

    ho messo il container con position relative e il footer con absolute.. dappertutto margin e padding 0 auto...
    per favore aiuto! ho girato il forum per cercare una soluzione ma non ne vengo fuori.. di sicuro c'e' qualche stuidaggine che mi sfugge!

    di seguito il css:
    codice:
    @charset "utf-8";
    /* CSS Document */
    html,body{margin:0; padding: 0;height: 100%}
    div#container{position: relative; height:100%; }
    body>div#container{height: auto; height:100%; }
    
    body{background:url(../images/fondo_pagina.gif) center top repeat;height:100%;text-align:center;margin:0;padding:0;}
    
    p { font-family:Arial, Helvetica, sans-serif;font-size:12px; font-weight:normal; color:#333333; padding:10px ; line-height:14px }
    a { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; font-weight:bold; color:#330066; text-decoration:underline} 
    a:hover { font-weight:bold; color:#cc00cc; text-decoration:underline} 
    
    ul { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; font-weight:normal; color:#000; list-style-type: none;  height:41px; width:684px; padding:0; margin:0; display: inline;  text-align:left } 
    li {  padding:0; margin:0; list-style-type:circle; list-style-position:inside} 
    
    
    #container{ width:100%; height:100%; margin:0 auto; padding:0 auto;background:url(../images/fondo_testata.jpg) center top repeat-x; position: relative; text-align:center  } 
    #bianco{ width:100%; height:100%; margin:0 auto; padding:0 auto; background:url(../images/fondo_bianco.gif) center top repeat-y; text-align:center;} 
    
                .cleared:after {
                    display		: block; 
                    visibility  	: hidden;
                    content		: "."; 
                    height		: 0; 
                    clear           : both;
                }
                
                .cleared {
                    clear           : both; /* per Gecko */
                    height		: 1%; /* per IE */
                }
    div#container{position: relative; height:100%; text-align:center }
    body>div#container{height: auto; height:100%; position: relative; }
    
    
    #testata{text-align:center; width:100%; height:200px; margin:0 auto; padding:0 auto; background:url(../images/testata.jpg) center top no-repeat; padding-top:41px}
    
    #logo{ text-align:left;width:750px; height:156px; margin:0 auto; padding:0 auto;padding-left:65px} 	
    
    #menu{ text-align:right; width:684px; height:35px; margin:0 auto; padding:0 auto;} 	
    
    
    #compagnia{ width:290px; height:385px; background:url(../images/compagnia.jpg) left top no-repeat; float:left; margin-left:-10px}
    #formazione{ width:300px; height:385px; background:url(../images/formazione.jpg) left top no-repeat; float:left; margin-left:-10px}
    #rassegne{ width:300px; height:385px; background:url(../images/rassegne.jpg) left top no-repeat; float:left; margin-left:-10px}
    #produzione{ width:300px; height:385px; background:url(../images/produzione.jpg) left top no-repeat; float:left; margin-left:-10px}
    
    
    #contenuti{text-align:center;width:100%; margin:0 auto; padding:0 auto; margin:0 auto; background:url(../images/bordo_bot.gif) center top repeat-x; position:relative } 
    
    #foglio{text-align:center; width:830px; margin:0 auto; padding:0 auto; background:url(../images/testata_foglio.gif) center top repeat-x; bottom:0px; position:relative} 
    
    #pagina{ position:relative; width:664px; margin:0 auto; padding:0 auto; text-align:left;
    font-family:Arial, Helvetica, sans-serif;font-size:12px; font-weight:normal; color:#333333; padding:10px ; line-height:14px ; padding-left:10px; padding-right:10px; background: #fff url(../images/testata_foglio.gif) center top no-repeat} 	
    
    #piede{ width:100%; bottom:0; margin:0 auto; padding:0 auto; text-align:center; position:absolute; border:#C30 solid 1px}



    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=utf-8" />
    
    <title>Ensemble Vicenza Teatro</title>
    
    
    
    
    <link href="../css/main.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="container">
    <div id="bianco">
    
    <div id="testata">
    <div id="logo">[img]../images/logo_ensemble.gif[/img]</div>
    <div id="menu">menu</div>
    
    </div>
    
    <div id="contenuti">
    <div id="foglio">
    <div id="pagina"  class="cleared">contenuto</div>
    </div>
    </div><div id="piede">
    [img]../images/piede.gif[/img]</div>
    </div>
    
    </div>
    </body>
    </html>

    grazie a tutti!
    Immagini allegate Immagini allegate

  2. #2
    Non usare le positon:absolute sarebbe un buon inizio...
    Fantasupermegafavolipermeramagicultra irresistibili
    4 10 30 100 1001 personaggi insuperabili fantaincredibili ultraimpossibili iperterribili irresistibili!!!

    "... a quell'età ... bastava un dito per fare la pace ..."
    fotine

  3. #3
    ...se tolgo il position absolute nel footer, si mi si centra ma si sbatte su subito sotto la fine del body...

    a me invece interessava mantenerlo a fondo pagina.

  4. #4
    rieccomi!

    http://hellolen.com/ensemble/

    il footer adesso e' in basso al centro.. piccolo problema!!!
    se la pagina e' piu' corta ho comunque lo scroll e il footer va sotto...

    idee su com portarlo su?

    grazie

  5. #5
    Non ho visto nel tuo link il problema che descrivi... Cmq (non ho letto il codice!!) avrai usato il metodo position relative e clear both, giusto? Quindi il footer si andrà a posizionare sotto alla colonna più alta (sguendo la logica della struttura fornita)
    Fantasupermegafavolipermeramagicultra irresistibili
    4 10 30 100 1001 personaggi insuperabili fantaincredibili ultraimpossibili iperterribili irresistibili!!!

    "... a quell'età ... bastava un dito per fare la pace ..."
    fotine

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.