Facile CSS piè di pagina
Ho visto un sacco di tutorial su come per avere un piè di pagina utilizzando i CSS. La maggior parte di essi richiedono tutti i tipi di div annidati's, wrapper, e così via. E 'davvero molto semplice, e questo codice può essere copiato e incollato in quasi ogni modello di sito web senza modificare l'intero creato. Vedi sotto.
File CSS: . footer_spacer ( height: 60px;) / * Questa altezza deve essere uguale o superiore alla piè di pagina. assicura il suo contenuto non è tagliato fuori dal tuo piè di pagina * / # footer ( posizione: fisso; / * mantiene da movimento a tutti i * / basso: 0; / * mantiene nella parte inferiore dello schermo * / larghezza: 100%; / * si estende per riempire la larghezza del corpo etichetta * / height: 30px; / * Imposta l'altezza. deve essere uguale o inferiore al footer_spacer altezza * / )
HTML: <div class = "footer_spacer"> </ div> <! - Nulla va qui. Questo è solo uno spacer. -> <div id = "footer"> Piè di pagina Inserisci i contenuti qui </ div> <! - Questa è la effettivo piè di pagina. Utilizzare CSS per stile alle vostre esigenze ->
E che è. Il footer_spacer div crea un "cuscinetto" al di sotto del resto della tua pagina per il resto a piè di pagina in modo da eliminare qualsiasi contenuto da tagliare. Se la vostra pagina web utilizza galleggianti, a leggere. Se non, allora si dovrebbe essere in grado di copiare e incollare questo tuo esistente nella pagina web senza problemi. Testato in IE7, FF2, FF3 e Safari. Dovrebbe operare in IE6 come bene.
Se si utilizza galleggianti, come alcune delle mie pagine fare, è sufficiente fare una piccola modifica. Il footer_spacer div Può essere necessario aumentare per accogliere la posizione del tuo galleggianti. Inoltre, assicurarsi di aggiungere uno stile <div = "clear:both;"> </ div> prima della footer_spacer div per assicurarsi che sia posizionato correttamente. Tutte le questioni ottenere questo installato e funzionante, sentitevi liberi di e-mail a dcostalis@gmail.com.
| 2,9 |
Stumble it! Post Info
Questa voce è stato postato su Domenica, 9a dicembre 2007 ed è elencato sotto css, lo sviluppo. Ha 1.244 punti di vistaCommenti feed. | Lascia un commento | Lascia Trackback.
Post Precedente: Wordpress non è perfetto, e così è la mia grammatica »
Prossimo post: Windows Vista Service Pack 1 RC1 »
March 19th, 2008 11:32
Salve,
grazie per il codice sopra, questo è veramente incredibile che questo problema con piè di pagina / intestazione può essere realizzato in modo facilmente con solo poche righe di codice CSS.
Purtroppo non funziona in IE6. Potrebbe dirmi come arrivare a questo e in esecuzione in questo *** browser come bene?
thanks a lot
Robert
27 marzo 2008 23:26
Robert --
Grazie per il commento! Una cosa che ho notato è che IE6 solo farlo lavorare se si specifica il DOCTYPE. (più su che a http://www.w3.org/QA/2002/04/valid-dtd-list.html).
In breve, aggiungere questa linea fino alla cima della pagina:
<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
e dovrebbe funzionare bene in IE6. Grazie ancora!
28 Aprile 2008 00:21
div layout myspace ...
Cordiali saluti, ...
16 maggio 2008 03:49
Il regime transitorio doctype mezzi di IE è in quirks mode e questo introdurrà tutta una serie di altri problemi di impaginazione. Se vi prendete cura di come appare in Internet Explorer, questa tecnica non è sufficiente. (Sì, dovrebbe essere solo questo semplice, ma in realtà, non è.)
16 maggio 2008 18:30
Andrew -
VERO. Tuttavia, non ho notato alcun modo per rendere IE6 comportarsi il modo in cui essa dovrebbe ... o se non si specifica transitorie o rigoroso, ci saranno ancora problemi che devono essere affrontati quando si tenta con ogni sorta di tecnologie avanzate per il layout.