problemino col footer!

[matteo01]

Allora, ho fatto una ricerca nel forum ma mi è sembrato di non trovare niente che rispecchi le mie esigenze!
Praticamente ho realizzato una pagina col footer sempre a fondo pagina, come descritto in questo articolo:
http://www.html.it/layout_css/layout_css_15.htm
in quell' articolo, nel caso di una pagina che supera in verticale la dimensione dello schermo, viene applicato del padding alla colonna centrale per evitare che il footer si sovrapponga ad essa!
Ora io ho la mia colonna centrale a cui ho applicato 1 bordo, che chiaramente impostando la distanza tramite il padding mi resta comunque sotto il footer..
Ho provato ad usare i margini per distanziare la colonna centrale dal footer, ma mentre in IE tutto funziona perfettamente, firefox si comporta esattamente come se non avessi impostato il margine!!
Potete suggerirmi come rimediare? grazie mille!!

[matteo01]

per il momento l' unica soluzione che ho trovato è anziche fare come nella guida:
position:absolute;
bottom: 0px;
width: 100%;
e dare alla colonna centrale un padding,

dare:
position:absolute;
bottom: -(altezza del footer)px;
width: 100%;

L' unica cosa è che mentre firefox se do bottom-altezza del footer va perfettamente, IE ha bisogno di 3 pixel aggiuntivi (boh :master. questo comporta che se do 3 pixel in più, il footer si stacca troppo e si nota il colore di sfondo del body! (in questo caso mi potrebbe andar bene ugualmente, ma..)
Credete che sia una buona soluzione o mi consigliate di continuare a provare??

[matteo01]

Un altra cosa..secondo voi come è possibile accada questo:
ho nella stessa cartella 2 pagine html, di cui una che è ancora vuota e contiene soltanto:
<link rel="stylesheet" type="text/css" href="stile.css">

<div id="container">
<div id="header"></div>
<div id="navi"></div>
<div id="center"></div>
<div id="right"></div>
<div id="footer"></div>
</div>
A questa pagina è linkato un foglio di stile, esso completamente vuoto!
nella stessa cartella c'è un foglio di stile con nome diverso da stile.css, ma nonostante ciò la mia pagina vuota eredita da quel foglio colore di sfondo e lo sfondo di un div
Se sposto quel foglio in un altra cartella, allora torna magicamente tutto a posto!!

[Vincent.Zeno]

Ciao matteo. Ho letto, ma non ho capito da dove possano arrivare i problemi...

Hai provato a dare margi-bottom alla colonna?
Ma forse poi va in conflitto col bottom del footer...non so, prova.

Invece:

Originariamente inviato da matteo01
A questa pagina è linkato un foglio di stile, esso completamente vuoto!
nella stessa cartella ...(...)

per me è megia nera. oppure una possesione

[matteo01]

Ciao! Innanzitutto grazie per la risposta! Si come ho detto sopra ho provato a usare margin-bottom per la colonna anziche il padding, ma mentre con IE tutto và alla grande in firefox la pagina non cambia minimamente il suo aspetto!!
La soluzione di dare al footer un margin-bottom negativo ti sembra sbagliata?

Invece:
quote:Originariamente inviato da matteo01
A questa pagina è linkato un foglio di stile, esso completamente vuoto!
nella stessa cartella ...(...)
per me è megia nera. oppure una possesione

Scusa sei ironico o parli seriamente? Perchè a me sembra davvero una cosa assurda, ma invece magari è normale...

[Vincent.Zeno]

Un margin-bottom negativo al footer? uhmmm.... non ho mai provato, ma non credo sia funzionale....

puoi postare tutto il codice?
oppure mettere la pagina on line che la controllo....
così faccio qualche prova.

Scusa sei ironico o parli seriamente? Perchè a me sembra davvero una cosa assurda, ma invece magari è normale...

si-si è normale che una pagina senza istruzioni si senta un po' sola e che quindi nella disperata ricerca di compagnia acchiappi pezzi di "codici volanti" per farli suoi.... :maLOL:

[matteo01]

no, non un margin-bottom al footer!
Praticamente come spiegato nella guida che ho linkato nel primo post al footer ho assegnato:

position:absolute; bottom: 0px; width: 100%;

ora ho notato che se io apecifico un altezza per il footer e al bottom do un valore negativo pari alla sua altezza, in questo modo:

position:absolute; height: 60px; bottom: -60px; width: 100%;

In FF va tutto ok, mentre in IE ho bisogno di dare:
bottom: -60,5px;
La cosa per me non sarebbe un problema, ma mi chiedevo se fosse corretta come soluzione!

quote: Scusa sei ironico o parli seriamente? Perchè a me sembra davvero una cosa assurda, ma invece magari è normale...


si-si è normale che una pagina senza istruzioni si senta un po' sola e che quindi nella disperata ricerca di compagnia acchiappi pezzi di "codici volanti" per farli suoi....

Grazie, almeno ora so questo! Spero però che almeno a pagina compilata la cosa non crei problemi!!

[Vincent.Zeno]

Non credo sia normale come soluzione, anche se funziona e potresti "accontentarti".

Posso vedere tutto il codice?

Scusa sei ironico o parli seriamente? Perchè a me sembra davvero una cosa assurda, ma invece magari è normale...

si-si è normale che una pagina senza istruzioni si senta un po' sola e che quindi nella disperata ricerca di compagnia acchiappi pezzi di "codici volanti" per farli suoi....

Grazie, almeno ora so questo! Spero però che almeno a pagina compilata la cosa non crei problemi!!

sono preoccupato.... hai capito che il tutto era ironico?

[matteo01]

Io dopo essermi accorto di ciò sto provando con una semplicissima pagina in cui per prova ho inserito nella parte centrale soltanto una semplicissima immagine alta 500px.
Adesso su internet explorer non so perchè ma non ho più quel problema!! Che invece persiste su firefox. mi sono accorto però che anzichè dare bottom: -altezza del footer, mi basta dare bottom: -1 e tutto funziona!
Comunque il codice è questo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="prima.css">
</head>
<body>
<div id="container">
<div id="header">[img]images/index/top_1.jpg[/img][img]images/index/top_3.jpg[/img][img]images/index/top_2.jpg[/img]</div>
<div id="navi">
<ul>[*]Home[*]link2[*]link 3[*]link 4[*]link 5[/list]
</div>
<div id="center">[img]prova.jpg[/img]</div>
<div id="right"></div>
<div id="footer">ò</div>
</div>
</body>
</html>

il css
html,body {
background-color: #cccccc;
color: #000000;
margin: 0px;
padding: 0px;
/*per footer a fondo pagina*/
height: 100%;
}
/*REGOLE PER IL CONTENITORE DI TUTTA LA PAGINA!!*/
div#container {
background-color: #0099ff;
/*per footer a fondo pagina*/
position: relative;
height: 100%;
}
/*regole per footer a fondo pagina in firefox*/
body>div#container {
height: auto;
min-height: 100%;
}
/*REGOLE PER L'HEADER*/
div#header {
height: 100px;
background-color: #000000;
background-image: url(images/index/top_sfo.jpg);
}
/*TITOLI POSIZIONATI NELL' INTESTAZIONE!!*/
h1 {
font: bold 10px Rockwell, Arial, Courier, verdana, sans-serif;
color: #ffffff;
letter-spacing: 4px;
margin:0px;
padding:0px;
position: absolute;
top: 0px;
left: 30%;
}
h2 {
font: bold 10px Rockwell, Arial, Courier, verdana, sans-serif;
color: #ffffff;
letter-spacing: 4px;
margin:0px;
padding:0px;
position: absolute;
top: 87px;
left: 30%;
}
/*REGOLE PER CONTENITORE DEL MENU!!!*/
div#navi {
width: 100%;
background-color: #666666;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
float: left;
}
/* regole per il menu*/

/* imposto margini, padding e elementi marcatori della lista*/
ul {
margin: 0 0 0 3%;
padding: 0;
list-style-type: none;
}
/*imposto per ogni elemento LI figlio della lista UL allineamento del testo, bordi, colore di sfondo e posizione (float)*/
ul li {
background-color: #666666;
text-align: center;
width: 19%;
border-width: 0px 1px 0px 1px;
border-style: solid;
border-color: #000000;
float: left;
}
/* Imposto tipo di font, colore larghezza e posizione per i link in stato di "riposo"*/
li a {
font: bold 12px Arial, verdana, serif;
text-decoration: none;
color: #000000;
width: 100%;
float: left;
}
/*imposto il cambiamento dei link al passaggio del mouse*/
li a:hover {
background-color: #999999;
color: #ff0000;
text-decoration: underline;
width: 100%;
}
/*REGOLE PER IL CORPO SINISTRO (principale) DELLA PAGINA*/
div#center {
font: bold 13px tahoma, verdana, serif;
color: #ffffff;
border: 1px solid #ffffff;
margin-right: 115px;
padding: 0px;
}
/*REGOLE PER IL CORPO DESTRO DELLA PAGINA*/
div#right {
width: 110px;
border: 0px;
float: right;
}
/*REGOLE PER IL FOOTER DI PAGINA*/
div#footer {
background-color: #000000;
background-image: url(images/index/bottom.jpg);
text-align: center;
/*per footer a fondo pagina*/
position:absolute;
bottom: -1;
width: 100%;
}

Probabilmente è moltoincasinato, ma provando e provando..

quote:Scusa sei ironico o parli seriamente? Perchè a me sembra davvero una cosa assurda, ma invece magari è normale...

si-si è normale che una pagina senza istruzioni si senta un po' sola e che quindi nella disperata ricerca di compagnia acchiappi pezzi di "codici volanti" per farli suoi....

Grazie, almeno ora so questo! Spero però che almeno a pagina compilata la cosa non crei problemi!!


sono preoccupato.... hai capito che il tutto era ironico?

Sinceramente non avevo capito...
Scusa ma allora come è possibile? Proveresti ancghe te, magari con 2 css nella stessa cartella..uno completamente vuoto linkato nella pagina html e uno compilato ma non linkato...per vedere se ti succede? grazie mille!!

[matteo01]

mi sono appena accorto di una cosa importantissima, e ciè che dare un valore negativo al bottom non è un metodo adatto!
Questo perchè è vero che si risolve il problema del footer che va a coprire il contenuto, ma con questo metodo se la pagina non riempie completamente o supera la dimensione dello schermo il footer non resta più sempre infondo, ma bensi segue l' altezza del contenuto..mandando a quel paese il tutto...
Possibile che non ci sia un metodo per far restare visualizzabile il bordo di un div posto sopra un footer posizionato sempre a fondo pagina?