Visualizzazione dei risultati da 1 a 8 su 8
  1. #1
    Utente di HTML.it
    Registrato dal
    Apr 2011
    Messaggi
    3

    il solito maledetto footer :D

    Ciao ragazzi ho un problema con il footer sto facendo delle pagine usando css per imparare e ho incontrato il seguente problema: la pagina si vede bene ma il footer va troppo in basso..in pratica per poterlo vedere devo utilizzare lo scroll anche se nella pagina ci sono 2 righee lo schermo è a 1900x1200

    vi posto il mio layout:
    codice:
    body {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	position: absolute;
    }
    #container {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    #masthead {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    #sidebar {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    #content {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    #footer {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	width: auto;/* originale*/;
    	clear: both;/* originale*/;
    	overflow: auto;/* originale*/;
    	background: #336699;
    	text-align: center;
    	position: absolute;
    	z-index: auto;
    	vertical-align: bottom;
    }
    .float_right {
    	float:right;
    }
    Grazie a chiunque mi aiuterà

  2. #2
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    Perché quel position:absolute sul body e perché il posizionamento assoluto anche sul footer? Che effetto devi ottenere?

    Intanto puoi semplificare il css evitando di azzerare margini padding e border su ciascun elemento e impostandoli attraverso il selettore universale:

    codice:
    * {
       margin:0;
       padding:0;
       border:0;
    }

  3. #3
    Moderatrice di Grafica, Cerco e offro lavoro L'avatar di Myaku
    Registrato dal
    Nov 2006
    Messaggi
    10,349
    visto che non hai postato l'html, la butto lì: non è che per caso stai usando i posizionamenti assoluti in relazione alla finestra del browser? per quale motivo stai posizionando il footer, ed il body?


    edit: ops, arrivata tardi

  4. #4
    Effettivamente manca l'HTML.
    Con il CSS che leggo (precisando che trovo inappropriato definire absolute il body), aggiungi bottom:0 al footer.
    CODENCODE \ Branding \ Design \ Marketing
    www.codencode.it

  5. #5
    Utente di HTML.it
    Registrato dal
    Apr 2011
    Messaggi
    3
    Scusatemi giustamente non vi ho postato l'html

    codice:
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    
    <title></title>
    
    <link href="styles/style2.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    body {
    	background: url(images/sfondo%20sito%20senza%20logo%20corto.jpg) repeat-y scroll;
    }
    .auto-style1 {
    	border-width: 0;
    }
    .auto-style3 {
    	text-align: left;
    	font-family: Arial;
    	color: #336699;
    	font-size: larger;
    }
    </style>
    </head>
    
    <body>
    
    
    <div id="container">
    	
    	<div id="masthead"> <a href="default.html">
    		[img]images/logo.gif[/img]</a>
    		
    
    ufficio 12345678
    
    		fax 12345678
    
    		e-mail: info@GIGIO.com</p>
    </div>
    	
    	
    	<div id="page_content" style="left: 0px; top: 0px; height: auto">
    		
    		<div id="sidebar">
    			<ul>
    				[*]Home
    				[*]Informazioni su
    				[*]News
    				[*]Domande frequenti
    				[*]Prodotti
    				[*]Servizi
    				[*]Contatti[*]Dove siamo[/list]</div>
    		
    		
    		<div id="content">
    			
    			<h2>Titolo 2</h2>
    			
    
    inserire qui il contenuto</p>
    			</div>
    		</div>
    	
        <div id="footer">
    		
    
    Home | Informazioni su | Contatti | 
    		Tecnici | </p>
        
    
    | Domande frequenti | Raccolta foto | Prodotti | Servizi | Mappa del sito</p>
    		
    
    Copyright © 2011GIGIO SRL. Tutti i diritti riservati.</p>
        </div>
    </div>
    </body>
    
    </html>
    e questo è lo style
    codice:
    @import url("layout.css");
    body {
    	font-family: Arial, sans-serif;
    	font-size: medium;
    	color: #000;
    }
    #container {
    	width: 100%;
    	height: 100%;
    }
    #masthead {
    	width: 100%;
    	overflow: auto;
    	text-align: right;
    }
    #page_content {
    	position: relative;
    }
    #sidebar {
    	position: relative;
    	float: left;
    	width: 140px;
    	background-color: #336699;
    }
    #content {
    	margin-left: 140px;
    	padding: 10px;
    	background-color: #fff;
    	font-style: italic;
    }
    #footer {
    	clear: both;
    	width: 99%;
    	overflow: auto;
    	padding-top: 1%;
    	padding-right: 0;
    	padding-bottom: 1%;
    	padding-left: 1%;
    	background: #336699;
    	color: #FFF;
    	font-size: x-small;
    	vertical-align: bottom;
    	bottom: -231px;
    }
    #masthead img {
    	float: left;
    	margin: 0 0 0 0 px;
    }
    #masthead p {
    	font-size: small;
    	margin: 0 0 0 10;
    	margin-right: 1%;
    }
    h1,h2,h3,h4,h5,h6 {
    	font-family: Arial Black;
    }
    /* Stili per la struttura */
    #sidebar ul {
    	list-style-type: none;
    	width: 100%;
    	display: block;
    	margin: 0;
    	padding: 0;
    }
    #sidebar li {
    	display: block;
    	border: 1px solid #cb8;
    }
    #sidebar a {
    	font-weight: bold;
    	text-decoration: none;
    	color: #000;
    	padding: 5%;
    	display: block;
    	border-bottom-width: 1px;
    	border-bottom-style: solid;
    	border-bottom-color: #336699;
    }
    #sidebar a:hover {
    	font-weight: bold;
    	text-decoration: none;
    	color: #000;
    	background: #336699;
    	border: 1px solid #000;
    }
    /* Stili per il piè di pagina */
    #footer p {
    	color: #fff;
    	font-size: x-small;
    	margin-top: 2px;
    	margin-bottom: 6px;
    }
    #footer a {
    	color: #FFF;
    	text-decoration: underline;
    	font-weight: bold;
    }
    #footer a:hover {
    	color: #000;
    	text-decoration: none;
    }
    a {
    	color: #393939;
    	text-decoration: underline;
    		height: auto;
    }
    a:hover {
    	color: #00F;
    	text-decoration: underline;
    	font-size: large;
    }
    .style_bold {
    	font-weight: bold;
    }
    .style_italic {
    	font-style: italic;
    }
    L'effetto che voglio ottenere è quello che alla fine del contenuto ci sia il footer indipendentemente dalla grandezza dello schermo e del contenuto per questo l'ho impostato absolute
    e questi sono i problemi e l'effetto che desidero impostare



    Ditemi che vi serve sapere di più

    Grazie

    PS: Riguardando il layout mi sono accorto che era solo una prova che avevo fatto ed effettivamente avevo tolto l'absolute dal body
    codice:
    body {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    #container {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    #masthead {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    #sidebar {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    #content {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    #footer {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	width: auto;/* originale*/;
    	clear: both;/* originale*/;
    	overflow: auto;/* originale*/;
    	background: #336699;
    	text-align: center;
    	position: absolute;
    	vertical-align: bottom;
    }
    .float_right {
    	float:right;
    }

  6. #6

  7. #7
    L'effetto che voglio ottenere è quello che alla fine del contenuto ci sia il footer indipendentemente dalla grandezza dello schermo e del contenuto per questo evita assolutamente position absolute
    se poi in realtà vuoi il footer in basso rispetto alla finestra
    cerca sticky footer (è una delle varie tecniche che si possono usare)

  8. #8
    Utente di HTML.it
    Registrato dal
    Apr 2011
    Messaggi
    3
    mi sono accorto che c'era un bottom: -231px;
    nel footer dello style..-.- ancora una distrazione tra le 10000 prove che ho fatto..-.-

    il problema sembra diminuito ovvero ora è attaccato al container cosa che se va bene se le pagine sono lunghe ma se sono corte mi ritrovo il footer in mezzo alla 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.