footer adattabile

[duffy duck]

ciao, c'è un modo per avere il footer sempre in basso alla pagina (attaccato alla fine del browser)?

ma non in posizione fissa ma che sia libero di salire e scendere a seconda della risoluzione dello schermo, dei contenuti visualizzati, e della dimensione della finestra; e che sia distante in misura fissa dal contenuto quando questo eccede la pagina

grazie

[Dawson-]

bah, a occhio direi di scrivere nel CSS (ammettiamo che l'id del div sia #footer):

#footer {margin-bottom:10px}

in modo che rimane fisso a 10px dal bordo inferiore

facce sapè

[duffy duck]

grazie dawson

mettendo

#footer {margin-bottom:10px}

qualsiasi valore metto non cambia nulla

se metto solo

#footer {bottom:0px} si mette sotto ma poi non scorre in basso quando i contenuti superano la lunghezza della finestra

[Dawson-]

allora credo di non aver capito quello che ti serve

[nickcv]

dunque, se vuoi che scorra insieme alla pagina deve avere position:fixed, il problema a quel punto è che per quel che concerne tutti gli altri valori devi darglieli manualmente e non può con position fixed essere centrato in automatico utilizzando margin:0px auto;

pertanto ti consiglio di creare un div fixed nel quale poi inserire un altro div relative nel quale metterai realmente il contenuto in modo da poterlo centrare.

per la posizione esatta del div fixed, come dicevo prima dovrai dargl i valori manualmente (parlo soprattutto del top) , ma visto che non puoi saperli per via delle differenti risoluzioni puoi provare ad utilizzare valori percentuale, che però non sono sempre una garanzia

ps: per fare tentativi con le impaginazioni firefox, firebug e web developer sono tuoi amici, usali!

[d0sse]

guarda questo

http://www.skeletorscorpse.com/css/footer/

[fz1978]

su questo ottimo tutorial in italiano ti spiega come risolvere il tuo problema:

http://css.html.it/guide/lezione/64/il-problema-del-footer/

[duffy duck]

grazie ragazzi faccio delle prove

intanto vi spiego meglio la situazione

html, body{

margin:0;

background-color:#444;

color:#000;

font:10px "Verdana", sans-serif;

text-decoration:none;

}

#contenitore{

width:100%;

background-color:#256;

padding-bottom:86px; /*questo l ho messo per avere una distanza minima tra la fine del contenuto e l inizio del footer (#bottom) quando il contenuto super la lunghezza della finestra*/

height:auto !important; /*qui (queste tre righe) ho impostato un'alltezza massima cosi da averlo piu o meno in basso ma naturalme dipenda dalla risoluzione e dalla grandezza della finestra del browser*/

height:465px;

min-height:465px;

}

#menu{

width:54%;

margin:4% 2% auto auto;

}

#bottom{

width:99%;

height:30px;

padding-right:1%;

position:absolute;

background-color:red;

border-top:1px solid #fff;

text-align:right;

}

il file html è invece strutturato

<div id="contenitore">

<div id="menu">

.....

</div>

</div>

<div id="bottom">

....

</div>

nel contenitore ci sono tutti i contenuti del sito

grazie vado a provare un po prima di pranzo

[duffy duck]

in http://www.skeletorscorpse.com/css/footer/, credo che c è un errore, nel css manca position:absolute; senza questo il footer si mette sotto il contenuto e non a fondo finestra quindi niente, con position:absolute; i il footer è bloccato in quella posizione e non scorre con il contenuto, che quando supera la lunghezza della finestra gli passa dietro.

stesso problema con la guida di html cioè il footer che copre il contenuto che gli passa dietro

forse non l'ho detto, ma la lunghezza del contenuto varia a seconda della scheda del menu che si clicca rimanendo sempre nella stessa pagina con un accordion in javascript credo sia questo a complicare le cose

la soluzione che per adesso sembra migliore è mettere position:fixed; al posto di position:absolute; in #bottom

facendo cosi il footer è sempre in basso pero quando il contenuto supera la grandezza della finistra il footer non scorre, rimane sul bordo sempre visibile, ma compare la barra per scorrere in basso solo il contenuto, cosa che non mi piace tantissimo

questo è quello che sono riuscito a fare seguendo i vostri suggerimento specialmente quello di nickcv che però non credo di aver capito in fondo

grazie ancora, se avete altre idee sono tutto orecchie

[nickcv]

io avevo capito che volessi il footer sempre visibile e che scorresse insieme alla pagina.

se lo vuoi semplicemente a fondo pagina va benissimo il sistema che ti hanno proposto gli altri.

se vuoi che il div che contiene il corpo della pagina aumenti fisicamente di dimensioni in base alla lunghezza del testo, invece di far apparire una barra di scorrimento al suo interno allora dovrai settare il parametro height su auto.

ps: se mi linki la pagina ti scrivo esattamente le modifiche che devi fare al css...

[duffy duck]

nickcv la mia idea è di avere il footer posizionato dove finisce la finestra del browser fin tanto che ci entra il contenuto, quando il contenuto diventa piu lungo della finestra allora il footer deve scorrere mantendo una distanza minima fissata dal contenuto (non voglio che il contenuto si avvici tot al footer, ci deve essere sempre un minimo che li separi). forse cosi mi sono spiegato meglio

il sito è composto da una sola pagina dove ci sono tre righe con i titoli, cliccando su un titolo, esempio il primo, si fa scorrere gli altri 2 sotto in modo da scoprire il contenuto del primo titolo, è l'effetto accordion in javascript

purtroppo la pagina non è online, se va bene lo stesso posso postare il .css e l index.html

grazie dell'aiuto che mi stai dando

[nickcv]

allora è semplicissimo, le guide che ti hanno linkato gli altri dovrebbero andare, ma se proprio vuoi postali da qualche parte e te lo sistemo.

[duffy duck]

nickcv approfitto della tua disponibilità e tra domani sera e sabato vedo di caricarlo in rete al posto di un altro sito poi ti mando il link cosi gli dai un'occhiata

per te va bene?

[nickcv]

per me ok, ma comunque credo che le guide che ti abbiano linkato vadano benissimo, prova bene con quelle.

[duffy duck]

netsons ha temporaneamente sospeso i servizi appena li ripristina faccio l'upload :P

[duffy duck]

ciao finalmente oggi insieme a gianluca, il proprietario, ho caricato il sito www.methodika.altervista.org

manca ancora qualche contenuto ma ci penseranno gli altri ragazzi, gli altri 2 del gruppo

nickcv se ti va dagli un'occhiata per il footer anche se tutto sommato non è male cosi com'è

un altra cosa c è un errore nella validazione dell'html ho messo <h3> dentro a <a> nella parte relativa alle canzoni come posso risolvere?

e un ultima cosa ho un problema con i colori dello sfondo con safari

in conclusione come ti sembra? hai qualche consiglio da darmi?

grazie ciao

[d0sse]

basta mettere a dentro ad h3

Logicamente la devi vedere così: h3 indica un titolo (di cui può essere tutto un link ma anche solo una parte) invece non può esistere un link di cui una parte è un titolo e una parte no

<h3><a>prova</a><h3>

P.S il sito mi piace!

[duffy duck]

ciao d0sse intanto grazie, se metto a dentro h3 poi non ho il titolo della canzone grande e la scritta [nuova finestra] sotto piccola ma tutto grande come definito da h3 e su una riga

la scritta nuova finistre la inserisce il codice javascript che apre il popup e se uno ha javascript disabilitato non compare

mi fa piacere che il sito ti sia piaciuto

[d0sse]

ciao d0sse intanto grazie, se metto a dentro h3 poi non ho il titolo della canzone grande e la scritta [nuova finestra] sotto piccola ma tutto grande come definito da h3 e su una riga

la scritta nuova finistre la inserisce il codice javascript che apre il popup e se uno ha javascript disabilitato non compare

mi fa piacere che il sito ti sia piaciuto

Non ho capito molto bene cosa intendi! ma penso che puoi ovviare facendo:

<h3><span><a>prova</a></span>resto della riga</h3>

dove h3 è tutta la riga

lo span e il testo più piccolo o più grande

a è il collegmento

[duffy duck]

non va bene neanche, è sempre tutto grande come h3 come faccio a fare in modo che lo span sia piu piccolo? e poi è sempre su tutta la riga invece dovrebbero essere 2 righe

d0sse io vorrei che fosse com è adesso solo che valido, mi riferisco alla sezione album e in particolare ai link con le canzoni dove vedi il titolo della canzone è h3 invece la dimensione di [nuova finestra] è quella di <a> ma fanno parte entrambi di <a> infatti quando passi il mouse su uno si evidenziano entrambe le scritte