Nuovi tag. Come spingere correttamente il footer mobile in fondo alla pagina Inserire un distanziatore e combattere Internet Explorer
Questa è una specie di incubo! Perché il piè di pagina del tuo sito viene visualizzato di nuovo e cambia il design? È davvero impossibile premere correttamente il piè di pagina in fondo alla pagina con qualcosa? Almeno contenuto o mattoni! Il mattone nel monitor non si arrampica?
Vedo, quindi siediti e non fare nulla finché non leggi il nostro articolo fino alla fine.
Creare il footer giusto per il tuo sito web
Molti proprietari di siti incontrano questo problema quando il piè di pagina della pagina viene visualizzato "in alto". E poi non è chiaro cosa fare. Molto spesso, i progetti di siti Web realizzati in fretta, da soli ( cerchio "mani pazze") o webmaster principianti.
Allo stesso tempo, all'inizio della vita del sito, non succede nulla di terrificante. E un tale idillio continua finché il contenuto preme “con il proprio peso” sul seminterrato, impedendole di sollevarsi. Ma vale la pena posizionare meno materiale sulla pagina e il piè di pagina "calmo" di recente si alza immediatamente, conferendo all'intero design del sito un aspetto inappropriato.
Per eliminare questo "difetto" del template inventato, non è necessario spendere soldi per i servizi di un webmaster. Molto spesso, il piè di pagina del sito può essere posizionato tu stesso. Consideriamo tutte le possibili opzioni per eliminare un tale problema:
Primo modo
Il primo modo per "ancorare" il footer "in fondo" alla pagina è basato sui CSS. Iniziamo con il codice di esempio, quindi diamo un'occhiata più da vicino alla sua implementazione:
html ( height: 100%; ) header, nav, section, article, aside, footer ( display: block; ) body ( height: 100%; ) #wrapper ( width: 1000px; margin: 0 auto; min-height: 100 %; height: auto !important; height: 100%; ) #header ( height: 150px; background-color: rgb(0,255,255); ) #content ( padding: 100px; height:400px; background-color: rgb(51,255,102) ; ) #footer (larghezza: 1000px; margine: -100px auto 0; altezza: 100px; posizione: relativa; colore di sfondo: rgb(51,51,204); )
Per attaccare un piè di pagina in fondo al tag della pagina
html ( altezza: 100%; ) corpo (altezza: 100%; )
Imposta l'altezza minima del livello del contenitore su 100%. Nel caso in cui la larghezza del contenuto sia maggiore dell'altezza del contenitore, impostare la proprietà su auto . Grazie a ciò, il wrapper si adatterà automaticamente alla larghezza del contenuto posizionato sulla pagina:
#wrapper ( altezza minima: 100%; altezza: auto !importante; altezza: 100%; )
La riga di codice "height: 100%" è per le versioni precedenti di IE che non accettano la proprietà min-height.
Per separare lo spazio per il piè di pagina nel design della pagina, impostiamo il rientro per il tag
#contenuto ( riempimento: 100px; )
A questo punto, abbiamo una pagina Web a schermo intero più altri 100 pixel, che vengono "neutralizzati" da un valore di riempimento del piè di pagina negativo (margine: -100px ) quando posizionato rispetto ad essa ( posizione: relativo ). Quindi, con un valore di riempimento negativo, stiamo "spostando" il footer nell'area del contenitore, che ha un'altezza del 100%.
In questo esempio, il markup del documento Web viene definito utilizzando tag HTML 5 relativamente nuovi, che potrebbero essere interpretati erroneamente dai browser meno recenti. Per questo motivo, l'intero design della pagina potrebbe non essere visualizzato correttamente. Per evitare ciò, è necessario sostituire i nuovi tag dall'arsenale della versione 5 del linguaggio ipertestuale con quelli normali.
Versione migliorata
Il metodo discusso sopra su come rendere il piè di pagina in fondo alla pagina "incrollabile" non è adatto a tutti. Se in futuro hai intenzione di modificare e migliorare il design del tuo sito utilizzando i pop-up, allora è meglio abbandonare l'uso dell'implementazione precedente.
Molto spesso nell'implementazione di finestre pop-up viene utilizzata la proprietà CSS z-index. I suoi valori determinano l'ordine in cui gli strati si impilano uno sopra l'altro.
Maggiore è il valore z-index di un elemento, maggiore sarà lo stack complessivo di "stratificazione".
Ma poiché nell'esempio precedente abbiamo utilizzato un riempimento negativo del piè di pagina, la parte inferiore del popup si sovrapporrà all'area superiore del piè di pagina. Anche se avrà un valore z-index più alto. Perché il genitore del popup (wrapper ) ha ancora un valore inferiore per questa proprietà.
Ecco una versione migliore:
CSS - codice di esempio:
html, body ( height: 100%; ) .header ( height:120px; background-color: rgb(0,255,102); ) .main ( min-height:100%; position: relative; background-color: rgb(100,255,255); ) .footer ( height:150px; position: absolute; left: 0; bottom: 0; width: 100%; background-color: rgb(0,0,153); )
Come puoi vedere dal codice, abbiamo posizionato il footer come parte dell'elemento principale. Abbiamo assegnato al contenitore una posizione relativa e la posizione assoluta per il piè di pagina. Abbiamo corretto il piè di pagina nella parte inferiore del contenitore impostando la sua posizione sinistra e in alto su 0.
Variante per seminterrato ad altezza non fissa
Le implementazioni precedenti possono garantire che il piè di pagina sia sempre in fondo alla pagina. Ma solo se il piè di pagina è a larghezza fissa. Ma cosa succede se non è possibile prevedere la quantità di contenuti inseriti in esso?
Ciò richiederà un'opzione più avanzata per un seminterrato non riparato. Imposta il piè di pagina su riga di tabella per la proprietà display. Questo lo farà apparire come una riga della tabella.
Ciao, cari lettori del sito del blog. Continuiamo il tema del layout a blocchi, iniziato e continuato nei tre articoli precedenti. In linea di principio, siamo già riusciti a creare un layout del sito sia a due che a tre colonne e siamo anche riusciti a considerare le sfumature della creazione di un layout fluido.
Inoltre, nei primi articoli sul layout del sito (), sono stati presi in considerazione alcuni concetti base del webmastering, senza capirne le sfumature sarebbe piuttosto difficile.
Che problemi hai avuto con il layout del nostro sito?
Oggi cercheremo di risolvere un piccolo problema che potrebbe sorgere con il layout che abbiamo creato in precedenza. Molto spesso, questa situazione si verifica durante la visualizzazione su monitor di grandi dimensioni (ad alta risoluzione) e durante la visualizzazione di una pagina con una piccola quantità di informazioni.
In questo caso, potrebbe risultare che il piè di pagina non verrà premuto nella parte inferiore dello schermo, ma si troverà quasi a metà altezza, che nella maggior parte dei casi sembrerà brutto e antiestetico.
Tuttavia, secondo me, è necessario premere il piè di pagina fino in fondo al layout del sito, e questo sarà particolarmente vero nel caso in cui l'altezza della pagina sia inferiore all'altezza dello schermo dell'utente. Schematicamente, questo può essere rappresentato come segue:
Quelli. il corretto comportamento del footer in caso di una piccola quantità di informazioni sulla pagina e di un grande schermo utente sarà il seguente:
Per implementarlo, dobbiamo eseguire una serie di manipolazioni con il codice del nostro layout. Inoltre, apporteremo modifiche non solo al file di stile CSS Style.css, ma anche a Index.html, che contiene codice HTML e forma blocchi Div. Ma prima le cose principali.
Ad esempio, utilizzeremo il layout del sito a tre colonne creato in precedenza. In questo caso, Index.html sarà simile a questo:
E le seguenti proprietà CSS sono state scritte nel file Style.css:
Corpo, html ( margin:0px; padding:0px; ) #maket ( width:800px; margin:0 auto; ) #header( background-color:#C0C000; ) #left( background-color:#00C0C0; width:200px ; float:left; ) #right( width:200px; background-color:#FFFF00; float:right; ) #content( background-color:#8080FF; margin-left:202px; margin-right:202px; ) #footer ( colore di sfondo:#FFC0FF; chiaro: entrambi; )
Bene, il layout stesso sembrava qualcosa del genere:
Come puoi vedere, il footer non è premuto fino in fondo e, quindi, non soddisfa i nostri requisiti (si trova sempre sotto la colonna più bassa), quindi dovremo apportare modifiche al codice. Lo stesso può essere fatto per il layout a due colonne e anche per il layout fluido. Il metodo è universale.
Come spingere il piè di pagina in fondo al layout del sito
Quindi dobbiamo spostare il piè di pagina Div nella parte inferiore dello schermo. Per fare ciò, devi prima impostare l'altezza dell'intera pagina al cento per cento (occuperà l'intero schermo). Questo sarà necessario per poi ridimensionare il blocco principale con il layout anche fino al 100%.
Tutto il contenuto della pagina del sito viene inserito nei tag Body di apertura e chiusura e quindi dobbiamo aggiungere un'altra proprietà CSS per il tag Body in Style.css che imposta l'altezza al 100%:
Corpo, html ( margine:0px; riempimento:0px; altezza: 100%; )
Ciò non influirà in alcun modo sull'aspetto, ma ora il blog principale può essere esteso a tutta l'altezza dello schermo. Quelli. era una specie di fase preparatoria.
Le principali proprietà dei CSS, se lo desideri, puoi vedere. Ora impostiamo il contenitore Div che racchiude tutto il nostro layout ad un'altezza minima del 100%:
Voglio anche evidenziarlo (div con id="maket"). Per fare ciò, imposteremo una cornice utilizzando la proprietà Border () corrispondente:
La proprietà border: solid 3px black consente di impostare un bordo solido (solido) con uno spessore di 3 pixel in nero per questo contenitore. Ciò ti consentirà di vedere chiaramente che il contenitore con il layout è allungato per l'intera altezza dello schermo, anche con una piccola quantità di informazioni sulla pagina:
Ora dovremo estrarre il footer block dal contenitore generale e posizionarlo sotto, subito dopo quello generale. Cosa darà? E il fatto che, infine, il piè di pagina del layout si degni di scendere, e non si accoccolerà, come prima, alla sua colonna più lunga. In questo caso, Index.html sarà simile a questo:
Si noti che il blocco del piè di pagina non è più all'interno di un contenitore comune (maket), e quindi la sua larghezza non è più controllata dalle proprietà CSS impostate per maket nel file Style.css. Il piè di pagina verrà allungato per tutta la larghezza dello schermo, ma si troverà comunque nella parte inferiore dello schermo, immediatamente sotto il blocco principale:
Ma ancora una volta c'è un problema, perché per vedere il footer, ora devi scorrere lo schermo nel browser (vedi la barra di scorrimento nella figura sopra).
Si scopre che ciò è dovuto al fatto che il contenitore principale (layout) occupa l'intera dimensione dello schermo in altezza (questo è determinato dall'altezza minima: proprietà 100%) e il piè di pagina si trova immediatamente dietro di esso e dovrai usarlo scorrendo per visualizzarlo, che non è molto comodo e funzionale. .
Puoi risolvere questo problema dando un riempimento negativo al contenitore del piè di pagina Div in modo che si sposti di una distanza uguale alla sua altezza. In questo caso, il contenitore del piè di pagina scorrerà sul contenitore principale e si adatterà all'altezza della schermata del browser (ovvero, non sarà necessario utilizzare lo scorrimento per visualizzarlo).
Ma per impostare un rientro negativo dall'alto, devi conoscere la stessa altezza del piè di pagina, ma non lo sappiamo ancora.
Pertanto, per prima cosa impostiamo l'altezza del contenitore contenente il footer impostando la proprietà corrispondente in Style.css:
#footer( background-color:#FFC0FF; clear: both; height: 50px; )
E quindi impostiamo un riempimento negativo dall'alto a un'altezza uguale alla sua altezza:
Ciò consentirà al piè di pagina di salire esattamente alla sua stessa altezza e quindi adattarsi alla schermata del browser (ora possiamo rimuovere il bordo: proprietà CSS nera solida 3px dalla regola maket in modo che lo spessore del bordo non impedisca l'intero layout , insieme al piè di pagina, dall'inserimento nello schermo in altezza):
Come puoi vedere, ora la barra di scorrimento non appare nel browser e l'intero layout del nostro sito basato su blocchi a tre colonne si adatta a uno schermo (in caso di una piccola quantità di informazioni sulla pagina) e ha un piè di pagina situato nella molto in basso. Che è esattamente quello che dovevamo fare.
Inseriamo il distanziatore e combattiamo con Internet Explorer
Ma c'è un problema, che apparirà solo quando ci sono maggiori informazioni sulla pagina del layout e questa situazione potrebbe rivelarsi:
Si scopre che potrebbe verificarsi una situazione in cui le informazioni in una delle colonne del layout andranno a finire nel piè di pagina, il che non sembrerà carino. Ciò è dovuto al famigerato riempimento negativo che abbiamo impostato per esso, che ha contribuito a elevare il nostro piè di pagina nel contenitore del layout principale.
Quelli. si scopre che nella parte inferiore dello schermo ci sono due blocchi sovrapposti nell'area del seminterrato.
La soluzione a questo problema è aggiungere un nuovo contenitore vuoto Div (chiamato distanziatori) nel contenitore principale del nostro layout (maket), nel punto in cui prima si trovava il blocco con il piè di pagina.
Impostando l'altezza di questo nuovo contenitore all'altezza del piè di pagina, possiamo evitare che le informazioni del contenitore principale entrino in collisione con il blocco del piè di pagina. Diamo a questo contenitore un ID () chiamato Rasporka e di conseguenza Index.html del nostro layout a tre colonne sarà simile a questo:
E in Style.css scriviamo per questo ( , che imposta l'altezza di questo contenitore distanziatore uguale all'altezza del seminterrato:
#rasporka ( altezza: 50px; )
Di conseguenza, il piè di pagina verrà premuto dal basso non sull'informazione contenuta nel contenitore principale (ad esempio il testo nella colonna più alta), ma su un'area uguale in altezza al piè di pagina con un contenitore spaziatore che non contenere qualsiasi informazione.
In questo modo evitiamo collisioni e distorsioni nel nostro layout a tre colonne. Tutto sarà chiaro e bello (decenza e nobiltà):
Come accennato in precedenza, la larghezza del piè di pagina dovrebbe ora essere impostata separatamente, perché. questo contenitore non fa più parte di quello principale. Per fare ciò, devi aggiungere proprietà aggiuntive per il piè di pagina al file CSS, permettendoti di impostarne la larghezza e allinearlo orizzontalmente al centro dello schermo.
Ha senso impostare la larghezza uguale alla larghezza dell'intero layout utilizzando la proprietà Larghezza e l'allineamento orizzontale può essere eseguito come abbiamo fatto per l'intero layout sul layout del blocco.
Pertanto, dovremo aggiungere ulteriori proprietà per l'ID del piè di pagina:
#footer( background-color:#FFC0FF; clear:both; height: 20px; margin-top:-20px; width:800px; margin-left: auto; margin-right: auto; )
Usando la proprietà width:800px, la larghezza è impostata su 800px, e usando le due proprietà margin-left: auto e margin-right: auto, i margini margin-left e right del footer vengono impostati automaticamente, per cui questi margini saranno uguali e il nostro eroe si allineerà al centro:
Bene, sembra che non ci sia più niente da migliorare, ma era così. Come sempre, il nostro browser preferito Internet Explorer 6 non capisce qualcosa dalle proprietà CSS che utilizziamo. In questo browser (e probabilmente anche in altri vecchi), nonostante tutti i nostri sforzi, il footer non verrà premuto fino in fondo, ma si attaccherà comunque alla colonna più alta del layout del sito.
Questo è tutto perché ( non comprende la proprietà min-height: 100% che abbiamo usato per impostare l'altezza minima del box principale in modo che sia uguale all'altezza dello schermo.
Pertanto, per risolvere questo problema, dovremo applicare il cosiddetto hack, che ci permette di spiegare (con le dita) ai vecchi browser cosa fare. Prima dell'elenco delle proprietà CSS per maket, dovrai inserire la seguente combinazione:
* html #make ( altezza: 100%; )
Questa regola verrà applicata solo per il browser Internet Explorer 6, il resto non la terrà conto e la seguirà.
Quindi, l'aspetto finale di Style.css con il piè di pagina premuto nella parte inferiore dello schermo sarà il seguente:
Corpo, html ( margin:0px; padding:0px; height: 100%; ) * html #maket ( height: 100%; ) #maket ( width:800px; margin:0 auto; min-height: 100%; ) # header( background-color:#C0C000; ) #left( background-color:#00C0C0; width:200px; float:left; ) #right( width:200px; background-color:#FFFF00; float:right; ) #content ( background-color:#8080FF; margin-left:202px; margin-right:202px; ) #footer( background-color:#FFC0FF; clear:both; height: 50px; margin-top:-50px; width:800px; margine-sinistra: auto; margine-destra: auto; ) #rasporka ( altezza: 50px; )
Bene, la forma finale di Index.html è stata data un po' più in alto. Ecco fatto, questa serie di articoli dedicati al layout a blocchi di layout fissi e in gomma a 2 e 3 colonne si può considerare conclusa.
Puoi anche guardare il video "Lavorare con tag div HTML":
Buona fortuna a te! A presto sul sito delle pagine del blog
Potresti essere interessato
Layout a blocchi: creiamo layout a due, tre colonne e fluidi per il sito
Layout DiV - Crea blocchi per un layout a due colonne in HTML, determina le loro dimensioni e imposta il posizionamento in CSS
Stiamo iniziando la quinta lezione sulla modifica dei template in CMS Joomla 3, questa volta parleremo del footer del sito. Analizziamo le possibili opzioni di progettazione per il footer e alcuni approcci alla sua creazione.
Cos'è un piè di pagina
Il piè di pagina o piè di pagina del sito è chiamato la sua parte più bassa, che, di regola, contiene informazioni sul sito, sul copyright, ecc. Standard nel modello Protostella, il footer non contiene alcuna informazione significativa:
Il contenuto standard del footer è l'anno in corso, il nome del sito e il link "Up" che porta all'inizio della pagina. A dire il vero questa versione del footer è del tutto inutile per i visitatori del nostro sito, inoltre nel nostro caso non serve assolutamente il link “Up”, abbiamo già realizzato un bel bottone per questo scopo.
Pertanto, per cominciare, propongo di eliminare il contenuto standard del piè di pagina. Apertura del file index.php modello Protostar standard e cerca il codice responsabile della visualizzazione del piè di pagina. Il codice tra le righe 205 e 219 è responsabile della visualizzazione del footer, che si presenta così (a seconda della versione di Joomla e delle modifiche apportate al file index, le righe di codice possono differire):
E ora rimuoviamo il codice extra dalle righe da 210 a 217, di conseguenza, il codice per il piè di pagina sarà così:
Infatti abbiamo tolto tutto ciò che è possibile, lasciando solo la possibilità di visualizzare i moduli nel footer, la linea è responsabile di questo:
Salviamo il file indice, andiamo sul sito e aggiorniamo la pagina. Il contenuto del piè di pagina è sparito, che è quello che volevamo. Ora puoi aggiungere nuove informazioni al piè di pagina a tua discrezione, ma prima di aggiungerle, dovresti rispondere alla domanda: cosa può esserci nel piè di pagina del sito?
Quali informazioni visualizzare nel footer del sito
Per rendere efficace il footer, deve contenere informazioni che possono essere di interesse per i visitatori del sito. A seconda della direzione del sito, queste informazioni potrebbero differire. Ecco un piccolo esempio delle stesse informazioni che possono essere contenute nel footer:
- Menù extra- questo menu può duplicarne uno esistente o essere unico. Duplicare il menu a piè di pagina è utile quando al tuo sito si accede spesso da dispositivi mobili, il visitatore, dopo aver fatto scorrere la pagina fino in fondo, può utilizzare la navigazione aggiuntiva del sito.
- Informazioni sui contatti- per i siti di vendita, o per i siti che forniscono vari servizi, è semplicemente necessaria la presenza delle informazioni di contatto, e nel footer è il luogo.
- Pulsanti dei social media- nel mondo moderno, i social network sono tutto per molte persone, quindi tali informazioni non saranno mai superflue.
- Collegamenti vari- ad esempio, collegamenti a una mappa del sito, feed di notizie, ecc.
- Widget- è possibile visualizzare a piè di pagina le informazioni relative all'attività sul sito, contatori presenze, commenti recenti, ecc.
- Pubblicità- arriva il momento in cui vuoi ottenere dal sito non solo la sua presenza, ma anche il profitto, in questo caso il footer potrebbe non essere un cattivo contenitore per la pubblicità.
Non cercare di stipare tutto quanto sopra nel piè di pagina del tuo sito, anche una sovrabbondanza di informazioni, come la sua assenza, non porterà a nulla di buono.
D'altra parte, non importa quali informazioni saranno contenute nel piè di pagina del tuo sito, l'importante è che si adatti al design generale ed è ben progettato.
Creazione di un piè di pagina per il sito
Ora lasciamo perdere la teoria e procediamo direttamente alla creazione del footer. Esistono diversi modi per formare un piè di pagina:
- Auto- prevede l'uso di vari moduli per visualizzare determinate informazioni
- Manuale- i moduli non vengono utilizzati, tutte le modifiche vengono apportate manualmente tramite la modifica dei file modello
- Misto- in questo caso, entrambe le opzioni di cui sopra vengono utilizzate insieme
Ciascuno dei metodi è buono a modo suo, ad esempio, nella fase iniziale, l'uso dei moduli semplificherà notevolmente l'attività e il metodo quando i moduli non vengono utilizzati accelererà il caricamento della pagina. In ogni caso, a te la scelta.
Per considerare tutte le opzioni possibili, opterò per la terza opzione. Pertanto, avrai un'idea generale di cosa viene modificato e come.
Ad esempio, ho deciso di dividere il footer in tre parti verticali, a sinistra verranno visualizzati i collegamenti a determinate pagine del sito, al centro una specie di logo e a destra verrà visualizzato un piccolo testo. I moduli saranno responsabili della visualizzazione delle parti sinistra e destra del piè di pagina e scriveremo il logo manualmente nel file di indice.
Per cominciare, creiamo nuove posizioni per i moduli nel footer (abbiamo parlato di come farlo nella lezione sull'impostazione e la modifica dei modelli) per un importo di due pezzi. Poiché si troveranno sul lato sinistro e destro del piè di pagina, hanno il nome appropriato - piè di pagina a sinistra e piè di pagina a destra. Li dichiariamo in un file templateDetails.xml.
Ora apportiamo modifiche al file di indice del modello, il mio codice è risultato in questo modo:
E per chiarezza, uno screenshot:
Come vengono visualizzati i moduli è chiaro, ma voglio soffermarmi sul logo in modo più dettagliato. Il seguente codice è responsabile della visualizzazione del logo:
baseurl. "modelli/". $questo->modello . "/images/joom4all.png"?>" />
A prima vista, sembra un normale tag HTML per un'immagine, ma invece del solito percorso del file, viene scritto il codice php. A prima vista, questo codice può sembrare complicato e incomprensibile, ma in effetti, se lo smonti, diventa chiaro che non c'è nulla di complicato in esso:
- - inizio del codice php
- eco- responsabile dell'output di una stringa
- $questo->baseurl- questa riga restituisce il nome del sito
- modelli/- qui indichiamo che l'immagine è memorizzata nella cartella dei modelli
- $questo->modello- restituisce il nome del modello corrente
- /images/joom4all.png- il percorso dell'immagine all'interno della cartella principale del modello e il nome del file con l'immagine
- ?> - fine del codice php
Come risultato dell'utilizzo di questo codice php, otteniamo il percorso relativo al file immagine. In altre parole, indipendentemente dal nome del sito e dal modello utilizzato, l'immagine verrà presa dalla cartella delle immagini del modello selezionato.
Salviamo il file index.php, ora possiamo chiuderlo, non ci sarà più utile.
Ora creiamo alcuni moduli che mostreremo nelle nuove posizioni che abbiamo appena creato. Il primo modulo visualizzerà il menu a piè di pagina e il secondo visualizzerà un piccolo testo.
Nella fase successiva, creiamo i moduli - per il menu con il tipo "Menu" e per il testo con il tipo "Codice HTML" (come creare un modulo). Come posizioni per loro, seleziona le posizioni del modulo appena create:
Per distinguere il nostro menu a piè di pagina dal resto del menu sul sito, nelle impostazioni del modulo menu, aggiungi il suffisso di classe "_footer":
Per non spiegare che tipo di modulo con il tipo "codice HTML", mostrerò il principio del suo funzionamento nello screenshot:
Ho riempito questo modulo con del testo che verrà visualizzato nel footer, oltre al testo normale, ho scritto un piccolo codice php che mostra l'anno in corso:
Salviamo i moduli e andiamo sul sito per verificare il risultato e questo è quello che ho ottenuto:
Il risultato, anche se c'è, ma non molto impressionante. Ora abbiamo bisogno di stilizzare in modo più adeguato gli elementi del piè di pagina con i CSS.
Iniziamo con i nuovi blocchi a piè di pagina:
Foot-left, .foot-center(float: left;) /*allineamento blocco piè di pagina*/ .foot-left (larghezza: 20%;) /*larghezza blocco sinistra*/ .foot-center (margin-left: -6px ;) /*padding del blocco centrale*/ .foot-right ( /*blocco destro*/ float: nessuno; altezza: 60px; )
Il prossimo candidato al design è il menu, a cui ho applicato i seguenti stili:
Ul.nav.menu_footer (margine: 0;) /*zero margini del menu*/ ul.nav.menu_footer li ( /*stile del testo del menu*/ famiglia di caratteri: "Lobster", corsivo; dimensione del carattere: 16px; linea - altezza: 18px; ) ul.nav.menu_footer li.item-179 a ( /* Voce di menu Sitemap*/ margin-left: 15px; colore: #fc8f30; ) ul.nav.menu_footer li.item-180 a ( /* Voce di menu Informazioni sul sito*/ colore: #5aa426; bordo superiore: 3px solido #5aa426; ) ul.nav.menu_footer li.item-181 a ( /*Voce di menu Contatti*/ margine-sinistra: 45px; bordo-basso: 3px solido #0f70ad; colore: #0f70ad; )
E infine, separiamo il footer dalla parte principale del contenuto:
Footer.footer hr (border-top: 3px solid #fc8f30;) /*separa il footer dal contenuto principale*/
Salviamo il file di stile, andiamo sul sito e guardiamo il risultato:
Quindi abbiamo creato un footer per il nostro sito, che sembra molto più divertente di quello standard. Su questo, considero completata questa lezione e nella prossima lezione verificheremo i possibili errori di progettazione adattiva e correggeremo alcune carenze. Inoltre ti consiglio di leggere un articolo su come creare un template Joomla 3 ed in particolare un footer da zero velocemente usando Bootstrap.
HTML5 introduce diversi nuovi tag per la struttura del codice: