Impaginazione con stili problema footer

**pattolo** · 28-06-2004, 12:46

emh io voglio che il footer stia in fondo alla pagina del browser....

**Francis87** · 28-06-2004, 12:54

ah, ecco spiegato l'arcano!

prova così

codice:

<html>
<head>
<title>xaagaf</title>
<style>
html {
 height: 100%;
}
body {
 background-color: #ffffff;
 height: 100%;
 text-align: center;
}
div#container{
    width: 775px;
    margin: 0px auto;   /*centra negli altri browsers*/
    text-align: left;   /*ripristina l' allineamento*/
	position: relative;
    font-size: 76%;
	} 

div#header{
	width: 775px;
	height: 95px
	}
	
div#downheader{
	width: 775px;
	height: 73px;

	left: 0;
    top: 95px; /*l' altezza dell' header*/
	background-image: url(images/down_header.jpg);
	background-repeat: no-repeat;
	font-size: 100%;
	color: #FFFFFF;
	padding: 0em 0 0 0px
    }

div#navigation{
	position: absolute;
	left: 0;
	top: 168px;
	width: 160px;
	\width:170px;
	w\idth:160px;
	padding: 0em 0 0 0px
	}
	
div#extra{
	position: absolute;
	right: 0;
	top: 168px;
	width: 160px;
	\width:170px;
	w\idth:160px;
	padding: 0em 0 0 0px
	}
	
div#content{
	margin: 0 170px;
	padding: 1em 10px;
	}

div#footer{
 position: absolute;
 bottom: 0px;
 left: 30%;
 text-align:center; 
 padding: 5px 0;
 background-color: #69c; 
 color: #000;
}
.clear {
 clear: both;
 border: none;
}
div {
 border: 1px solid black;
}
</style>
</head>
<body>
<div id="container">
  <div id="header">
    --ho il titolo--
   <div class="clear"></div>
  </div>
  <div id="downheader">
   --menu sotto titolo--
   <div class="clear"></div>
  </div>
  <div id="content">
   --contenuto sito--
   <div class="clear"></div>
  </div>
  <div id="navigation">
   --menu sinistra del sito a fianco del contenuto-- 
   <div class="clear"></div>
  </div>
  <div id="extra">
   --menu destra del sito a fianco del contenuto--
   <div class="clear"></div>
  </div>
   <div class="clear"></div>
</div>
<div id="footer">
 --devo metterlo sotto a tutto in fondo alla pagina...--
</div>
</body>
</html>

**pattolo** · 28-06-2004, 12:59

no nn va come hai fatto tu ti contatto icq se per te va bene..

**Francis87** · 28-06-2004, 13:03

vabbè!

ma funge sia con IE che con Mozilla.
devi solo togliere div { border: 1px solid #000000; } ke mi serviva x vedere cm eran disposti

**pattolo** · 28-06-2004, 13:10

no la cosa strana e' che se faccio pagina nuova funziona ma sulla mia no... x questo nn capisco

**Francis87** · 28-06-2004, 13:22

Originariamente inviato da pattolo
no la cosa strana e' che se faccio pagina nuova funziona ma sulla mia no... x questo nn capisco

:master:

non puoi dalla pagina nuova a mettere le cose vekkie?

**pattolo** · 28-06-2004, 14:25

nada saro' stupito ma nn funziona come "dico" io

cioe' ai menu' laterali e il content ho dato dimensione fissa ma se scrivo testo lungo i blocchi si allargano invece che mandare in auto il testo a capo...

e poi ora si il footer sta in fondo alla pagina pero' se il content e' lungo il footer nn e' che si abbassa progressivamente resta fermo piantato li e il testo gli passa in sfondo coprendolo cosi' in parte...

**Francis87** · 28-06-2004, 14:28

x ogni contenuto ke aggiungi devi mettere anke <div class="clear">&nb sp;</div> (&nb sp; attaccato).
xkè posizionando in modo assoluto togli gli elementi dal flusso della pagina, quindi è come se non ci fossero, come se galleggiassero

**pattolo** · 28-06-2004, 14:37

si pero' pur facendo cosi' il footer sta impiantato li :P :P

**span** · 28-06-2004, 15:19

la potenza è nulla senza controllo :adhone:

a no, quella era un'altra cosa... il clear è nullo senza float... magari la discussione è andata avanti in privato e ora state parlando di altro, ma nell'ultimo codice che avete postato di elementi fluttuanti non ne ho visti... quindi:

O ti rifai il layout usando float e clear http://www.google.it/search?q=layout...con+Google&lr=

O utilizzando posizioni absolute/relative http://www.google.it/search?hl=it&ie...btnG=Cerca&lr=
In quest'ultimo caso, la colonna delle tre che sarà la più "alta" NON dovrà avere position: absolute. Così, per far stare il foot dopo i contenuti, basterà scrivere <div>Foot</div> dopo i contenuti.

Il limite di questa tecnica è che devi sapere quale colonna sarà la più alta.

Discussione: Impaginazione con stili problema footer

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio