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

    Problema Footer fisso in basso

    Ciao a tutti!

    Sono ormai giorni che sto sbattendo la testa con il footer di un sito che sto facendo.

    Il problema è che non riesco a farlo stare fisso in basso, ma si alza a seconda della risoluzione.
    Ho cercato in rete vari aiuti, tutorial, .push etc...ma niente!!

    Qualcuno mi aiuta a capire qual'è la soluzione??
    Grazie in anticipo.

    LINK del sito di riferimento

    Edit:

    aggiungo codice

    HTML
    codice:
    <body> <div id="TopBar"></div>  <div id="wrapper">  		  		  		 <div id="leftcolumn"> 		          [img]images/logojolie.gif[/img]
                <ul id="navigation">     <li id="aboutus">Aboutus     <li id="whyorganic">Why organic?[/list]<div class="affiliates"> 	     [img]images/btn/products_btn.gif[/img]<span class="menu" id="menu1">Pure collection
     Candy Collection</span>     [img]images/btn/press_btn.gif[/img]     [img]images/btn/contacts_btn.gif[/img]          </div>    		  		 </div> 		  		  		  		  		 <div id="content"> 		              <div class="slider-wrapper theme-default">         <div id="slider" class="nivoSlider">                 [img]images/jolie1.jpg[/img]                 [img]images/jolie2.jpg[/img]                 [img]images/jolie3.jpg[/img]         </div>        </div>                                [img]images/text.gif[/img]       <div class="push"></div> </div> 		  		  		  		 <div id="rightcolumn"> 		  [img]images/heart_baloon.gif[/img]		</div>     </div> 		  		  		     		 <div id="footer">          	<div class="one_third">[img]images/heartdotted.jpg[/img]            </div> <div class="one_half">     
    
    JOLIE POUPÉE È 300% ECOLOGICA E CERTIFICATA!
         © Copyright Jolie Poupée Ltd 2011 - All right reserved. Jolie Poupée is a trademark ™.
         Termini del servizio | Privacy Policy    
         </p> </div>             <div class="one_mail">                
    
    ISCRIVITI ALLA NEWSLETTER
                      [img]images/btn/facebook.jpg[/img] [img]images/btn/twitter.jpg[/img]
                    </p>              </div></div>  		                          </body> </html>


    CSS:

    codice:
    /* LAYOUT */ #TopBar{height:20px;text-align:center;width:100%;z-index:9999;background-attachment:scroll;background-color:#655146;background-image:url(../images/linedotted.png);background-repeat:repeat-x;background-position:center center} #wrapper{ 	width:1050px; 	margin-top: 0; 	margin-right: auto; 	margin-bottom: -150px; 	margin-left: auto; 	padding-left: 60px; } #header{color:#333;width:1000px;float:left;height:100px;margin-right:0;margin-bottom:0;margin-left:0;padding-bottom:5px;padding-top:10px} #leftcolumn{height:350px;width:230px;float:left;margin:10px 10px 0 -20px;padding:3px} #content{	height:auto !important; /*per gli altri browser*/ height:100%; /*per IE 6*/float:left;color:#333;height:100%;width:600px;display:inline;margin:50px 0 80px;padding:0 10px 100px;} .products-master{list-style-type:none;display:inline;text-align:center;float:left;width:345px;height:355px;margin-right:20px;border:1px dashed gray;background-color:#FFF;vertical-align:middle;padding:8px} .products-text{list-style-type:none;display:inline;text-align:left;float:right;width:340px;height:450px;background-image:url(../images/product_border.gif);background-repeat:no-repeat;padding:0 20px 20px} .products-thumb li{margin-top:20px;list-style-type:none;text-align:center;float:left;width:50px;border:1px dashed gray;background-color:#FFF;margin-right:32px;height:50px} ul.thumbtext{float:left;list-style:none;width:365px;padding-top:10px;text-align:center;margin:0} ul.thumb{float:left;list-style:none;width:400px;text-align:center;margin-top:-80px;margin-bottom:209px;margin-left:0;display:inline} ul.thumb li{float:left;position:relative;width:70px;height:70px;margin-right:26px;border:1px dashed gray;background-color:#FFF} ul.thumb li img{width:60px;height:60px;position:absolute;left:3px;-ms-interpolation-mode:bicubic;border:0;top:3px;padding:3px;-ms-interpolation-mode:bicubic;} ul.thumb li img.hover{border:0} .products-master img,.products-thumb li img{border:none} #rightcolumn{height:350px;width:200px;float:left;margin:50px 0 0 -100px} #footer{clear:both;float:left;width:100%; position: relative; bottom: 0px;background-color:#655146;background-image:url(../images/linedotted.png);background-repeat:repeat-x;background-position:center 5px;padding-top:15px} .one_half{width:35%;margin-bottom:20px;float:left;text-align:left} .one_third{width:4%;margin-bottom:20px;float:left;margin-left:20%;text-align:left} .one_mail{width:20%;margin-bottom:20px;float:left;text-align:left} .column-last{margin-right:0!important;clear:right} /* END LAYOUT */

  2. #2
    Utente di HTML.it
    Registrato dal
    Jan 2006
    Messaggi
    526
    A parte che un codice copiato e incollato così, tutto su una riga... è inutile... chi lo legge? chi lo capisce!?!?!?!

    E cmq, io ho visualizzato il tuo sito su uno schermo FULL HD e lo vedo bene... dovresti spiegare meglio quale è il problema e magari postare uno screenshot che mostra l'anomalia che riscontri

  3. #3
    Intanto grazie per la risposta! Potrei sapere quanti pollici è il tuo monitor?
    Allego screenshot ottenuto facendo CTRL – (nel mac Command –)
    Hai ragione. Mi sono accorto tardi che è stato formattato così.

    Riprovo a postarlo qui sotto:

    HTML
    codice:
    <body>
    <div id="TopBar"></div>
    
    <div id="wrapper">
    
    		 
    		 
    		 <div id="leftcolumn">
    		          [img]images/logojolie.gif[/img]
    
           
       <ul id="navigation">
        <li id="aboutus">Aboutus
        <li id="whyorganic">Why organic?[/list]
    
      <div class="affiliates">
    	<a href="#" onclick="return toggleMenu('menu1')">
        [img]images/btn/products_btn.gif[/img]</a><span class="menu" id="menu1">Pure collection
    
    Candy Collection</span>
        [img]images/btn/press_btn.gif[/img]
        [img]images/btn/contacts_btn.gif[/img]
    
            </div>
    
    
    
    		 
    		 </div>
    		 
    		 
    		 
    		 
    		 <div id="content">
    		       
          <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                    [img]images/jolie1.jpg[/img]
                    [img]images/jolie2.jpg[/img]
                    [img]images/jolie3.jpg[/img]
            </div>
    
          </div>                        
    
          [img]images/text.gif[/img]
          <div class="push"></div>
    </div>
    		 
    		 
    		 
    		 <div id="rightcolumn">
    		 
    [img]images/heart_baloon.gif[/img]		</div>
     
     
    </div>
    		 
    		 
    		 
       		 <div id="footer">
             	<div class="one_third">[img]images/heartdotted.jpg[/img]
               </div>
    <div class="one_half">
        
    
    JOLIE POUPÉE È 300% ECOLOGICA E CERTIFICATA!
    
        © Copyright Jolie Poupée Ltd 2011 - All right reserved. Jolie Poupée is a trademark ™.
    
        Termini del servizio | Privacy Policy    
    
        </p>
    </div>
                <div class="one_mail">
                   
    
    ISCRIVITI ALLA NEWSLETTER
    
                     [img]images/btn/facebook.jpg[/img] [img]images/btn/twitter.jpg[/img]
    
                   </p>
                 </div></div>
    
    		 
    
                 
    
       
       
    </body>
    </html>
    CSS (ho tralasciato le parti meno rilevanti di formattazione e font)
    codice:
    * { padding: 0; margin: 0; }
    img { border: none;}
    body{font-family:MuseoSans100, Arial, Helvetica, sans-serif;font-size:13px;background-color:#FFF;background-image:url(../images/bgMain.gif);background-repeat:repeat-y;background-position: 50% 0px;border:0}
    .menu{display:none;margin-left:50px;line-height:15px;font-size:15px;font-family:MuseoSans100, "Palatino Linotype", Georgia, Times, serif;font-weight:400;margin-bottom:-500px;margin-top:-50px}
    
    /* LAYOUT */
    #TopBar{height:20px;text-align:center;width:100%;z-index:9999;background-attachment:scroll;background-color:#655146;background-image:url(../images/linedotted.png);background-repeat:repeat-x;background-position:center center}
    #wrapper{
    	width:1050px;
    	margin-top: 0;
    	margin-right: auto;
    	margin-bottom: -150px;
    	margin-left: auto;
    	padding-left: 60px;
    }
    #header{color:#333;width:1000px;float:left;height:100px;margin-right:0;margin-bottom:0;margin-left:0;padding-bottom:5px;padding-top:10px}
    #leftcolumn{height:350px;width:230px;float:left;margin:10px 10px 0 -20px;padding:3px}
    #content{	height:auto !important; /*per gli altri browser*/ height:100%; /*per IE 6*/float:left;color:#333;height:100%;width:600px;display:inline;margin:50px 0 80px;padding:0 10px 100px;}
    .products-master{list-style-type:none;display:inline;text-align:center;float:left;width:345px;height:355px;margin-right:20px;border:1px dashed gray;background-color:#FFF;vertical-align:middle;padding:8px}
    .products-text{list-style-type:none;display:inline;text-align:left;float:right;width:340px;height:450px;background-image:url(../images/product_border.gif);background-repeat:no-repeat;padding:0 20px 20px}
    .products-thumb li{margin-top:20px;list-style-type:none;text-align:center;float:left;width:50px;border:1px dashed gray;background-color:#FFF;margin-right:32px;height:50px}
    ul.thumbtext{float:left;list-style:none;width:365px;padding-top:10px;text-align:center;margin:0}
    ul.thumb{float:left;list-style:none;width:400px;text-align:center;margin-top:-80px;margin-bottom:209px;margin-left:0;display:inline}
    ul.thumb li{float:left;position:relative;width:70px;height:70px;margin-right:26px;border:1px dashed gray;background-color:#FFF}
    ul.thumb li img{width:60px;height:60px;position:absolute;left:3px;-ms-interpolation-mode:bicubic;border:0;top:3px;padding:3px;-ms-interpolation-mode:bicubic;}
    ul.thumb li img.hover{border:0}
    .products-master img,.products-thumb li img{border:none}
    #rightcolumn{height:350px;width:200px;float:left;margin:50px 0 0 -100px}
    #footer{clear:both;float:left;width:100%; position: relative; bottom: 0px;background-color:#655146;background-image:url(../images/linedotted.png);background-repeat:repeat-x;background-position:center 5px;padding-top:15px}
    .one_half{width:35%;margin-bottom:20px;float:left;text-align:left}
    .one_third{width:4%;margin-bottom:20px;float:left;margin-left:20%;text-align:left}
    .one_mail{width:20%;margin-bottom:20px;float:left;text-align:left}
    .column-last{margin-right:0!important;clear:right}
    /* END LAYOUT */
    Immagini allegate Immagini allegate

  4. #4
    Utente di HTML.it
    Registrato dal
    Jan 2006
    Messaggi
    526
    Uhmmmm ammetto che non lo capisco... un consiglio: prova ridurre all'osso il layout, cancella selettivamente tutto quando è ridondante, fino a quando il problema non si presenta più (o non puoi più cancella nulla), poi riposta un link di riferimento e vediamo di capirci qualcosa (quello che non c'è... non può interferire... heheeheh ).

    P.S. x lo schermo: volutamente non ti avevo detto i pollici ma solo la risoluzione, Full HD, perché è questa quella che conta, non i pollici ovviamente......... cmq è un 27 e sul mio schermo il problema si pone solo se riduco lo zoom della pagina..........

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.