Visualizzazione dei risultati da 1 a 3 su 3

Discussione: Footer Sfalzato

  1. #1
    Utente di HTML.it
    Registrato dal
    Oct 2007
    Messaggi
    26

    Footer Sfalzato

    Salve a tutti e gia da un paio d'ore che sto dietro ad un piccolo problema di allineamento del footer, mi spiego:
    Ho creato una pagina con il 100% di height ma quando vado a impostare il footer a fondo pagina esso si va a posizionare al di sotto del campo visivo della finestra creandomi la scrollbar laterale anche se non ce ne bisogno e sopratutto un allineamento anomalo rispetto a ciò che imposto nel CSS. (allego qualche screen e il codice)



    CSS
    codice:
     
    body {	
    	background-image: url("../img/bg.bmp");
    	background-position: top left;
    	background-repeat: repeat-x;
    	text-align: center;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 0.9em;
    	margin: 0;
    	padding: 0;
    	height: 100%;
    	background-color: #0e0e0e;
    }
    	
    html {
    	margin: 0; 
    	padding: 0;
    	height: 100%;
    }	
    	
    .head {
    	margin-top: 20px;
    	height: 85px;
    	/*background-color:#FFF;*/
    	color: #FFF;
    }
    
    .contenitrice {
    	position: relative;
    	min-height:100%;
    	height: auto !important;
    	height: 100%;
    	text-align: left;
    	margin-right: auto;
    	margin-left: auto;
    	width: 1000px;
    }
    
    #underlinemenu {
    	margin: -30px;
    	padding: 0;
    }
    	
    #underlinemenu ul {
    	margin: 0;
    	margin-bottom: 1em;
    	padding-left: 0;
    	float: right;
    	font-weight: bold;
    	width: 100%;
    }
    
    * html #underlinemenu ul { /*IE only rule. Delete extra margin-bottom*/
    	margin-bottom: 30px;
    }
    
    #underlinemenu ul li {
    	display: inline;
    }
    	
    #underlinemenu ul li a {
    	float: right;
    	color: #585555;
    	font-weight: bold;
    	padding: 2px 6px 4px 6px;
    	text-decoration: none;
    }
    
    #underlinemenu ul #current a {
    	color: #585555;
    	background-color: #FFFFFF;
    	border-bottom: 2px solid red;
    	padding-bottom: 0;
    }
    
    #underlinemenu ul li a:hover {
    	color: #585555;
    	background-color: #FFFFFF;
    	border-bottom: 2px solid red;
    	padding-bottom: 0;
    }
    
    .left-ChiSiamo {
    	float: left;
    	width: 628px;
    }
    
    .inside-left {
    	margin-top: 30px;
    	padding: 6px;
    	font-size: 13px;
    }
    
    .right-ChiSiamo {
    	float: right;
    	width: 371px;
    }
    
    .inside-right {
    	margin-top: 5px;
    	float: right;
    }
    
    * html .inside-right { /*IE only rule. Delete extra margin-bottom*/
    	margin-top: -11px;
    }
    
    .footer {
    	position: absolute;
    	bottom: 0 !important;
    	bottom: -1px;
    	height: 40px;
    	color: #003399;
    	font-size:9px;
    	font-family: Lucida Grande, Arial Unicode MS, sans-serif;
    	text-align: center;
    	margin-right: auto;
    	margin-left: auto;
    }
    HTML
    codice:
    <html>
    	<head>
    		<title>Ottica Bonanno.it | Chi Siamo</title>
    		<link rel="shortcut icon" href="../favicon.ico" >
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    		<link href=".././css/style.css" rel="stylesheet" type="text/css" />
    	</head>
    	<body>		
    	<div class="contenitrice"> 
    	  <div class="head">[img]../IMG/logo1.gif[/img] 
    	  </div>
    	  <div id="underlinemenu"> 
    		<ul>
    		[*]Contatti
    		[*]Servizi
    		[*]Prodotti
    		[*]Dove Siamo
    		  <li id="current">Chi Siamo
    		[/list]
    	  </div>
    	  <div class="left-ChiSiamo"> 
    		<div class="inside-left"> [img]../IMG/who_is.jpg[/img] 
    		  
    
    		  <span class="testo"> <span class="verde">Ottica Bonanno, una tradizione 
    		  leader del settore completamente rinnovata, giovanile e dinamica.</span> 
    		  
    
    		  
    
    		  
    
    		  Un punto di riferimento per chi ha problemi visivi e per chi
    
    		  desidera proteggere o potenziare il proprio sistema visivo
    
    		  grazie all'innovativa tecnologia di cui si avvale la nostra azienda.
    
    		  
    
    		  La qualità dei migliori prodotti con il migliore rapporto qualità-prezzo 
    		  certificata dal sistema <span class="nero">ISO 9001:2000.</span>
    
    		  
    
    		  Ottica Bonanno mette a disposizione dei clienti un programma specifico di 
    		  servizi 
    
    		  in grado di soddisfare i clienti piu esigenti, 
    
    		  grazie all'esperienza maturata in più di vent'anni di attività 
    
    		  con competenza tecnica, professionalità e serietà. 
    
    		  </span> </div>
    	  </div>
    	  <div class="right-ChiSiamo"> 
    		<div class="inside-right">[img]../IMG/Ritagli.jpg[/img] 
    		</div>
    	  </div>
    	</div>
    	<div class="footer">&copy; 2007 - 2008 Ottica Bonanno, S.n.c. Tel: 091 - 6162426 
    		P.iva: 03331390827 </div>
    	</body>
    </html>

  2. #2
    Utente di HTML.it
    Registrato dal
    Mar 2007
    Messaggi
    106
    Perchè tu dai al div class="contenitrice" un'altezza del 100%, quindi l'altezza del footer verrà aggiunta ad essa causando lo scroll.
    Quello che vuoi fare tu si realizza coi posizionamenti assoluti, dai un'occhiata qui o cerca footer sempre in basso su google.

  3. #3
    Utente di HTML.it
    Registrato dal
    Oct 2007
    Messaggi
    26
    Ok, quindi in teoria basterebbe mettere il footer all'interno del DIV contenitrice no? Ma se faccio cosi non cambia la cosa su firefox, anzi su IE non si vede piu la scritta ma sparisce la scrollbar laterale.

    Per quanto riguarda il posizionamento invece?

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.