Sezione del telaio dedicata alla realizzazione e |
||||
..:: Box fisso che scrolla con la pagina ::.. Box che scrollano insieme alla pagina nei quali poter postare dal classico"Torna su" ad un particolare menu, i bottoni dei social network, informazioni specifiche, ecc. ecc. sicuro non passeranno inosservati ^_^ tra l'altro sono semplicissimi da settare, basta scrivere l'apposita classe nei css e il relativo richiamo nella pagina - la pagina in cui andremo ad inserire un box deve essere completa di dichiarazione "Doctype" ovvero il tag che ci consente di specificare che tipo di documento abbiamo preparato, quindi per pagine html sarà:
Come procedere...Per realizzare questi box occorre un contenitorediv e il parametro "position:fixed;" Una classe css ci permetterà di inserire qualsiasi personalizzazione e con i parametri [top, bottom, left e right] indicheremo quale sarà la posizione del box nella paginaPer non fare confusione, vediamo cosa indicano questi parametri:
In base a cosa deve contenere il box scriveremo nella classe css come si deve visualizzare il div, ci può servire invisibile, con bordi e sfondo colorato o background-image e ovviamente aggiungiamo i parametri per il font se dobbiamo scrivere del testo. - In questi esempi il div è invisibile e i parametri per la posizione è impostata agli angoli estremi della pagina, cioè con la prima classe il box sarà fisso in basso a destra, con la seconda fisso in alto a destra, con la terza fisso in basso a sinistra e nella quarta fisso in alto a sinistra. E' sufficiente inserire solo due dei quattro parametri - Per impostare le misure del contenitore width: xx px; height: xx px; regolatevi con ciò che deve contenere affinché si visualizzi tutto all'interno del box Potete prelevare queste classi base dalle textarea e incollare direttamente nella pagina tra i tag <head> e </head> ovviamente se già avete impostato lo style csseliminate i tag di inizio e fine dichiarazione <style type="text/css"> </style>
Per il gufetto che vi invita a vedere altri esempi, ho impostato top:400px; left:20px; i valori si possono personalizzare per ogni esigenza e in armonia con la grafica della pagina, se ne possono inserire più di uno e una volta scritta la classe o le classi basterà riportare il nome nel div, postate sotto il tag <body> perché comunque la posizione è già impostata nella classe css
# Prelevate qui il codice di richiamo * Attenzione alla sintassi della/e classe/i, scrivete tutti i parametri in maniera corretta, ad esempio inseriamo sempre px; dopo il valore dato per il bordo, tipo, "top:xx px;" altrimenti il boxpotrebbe non visualizzarsi bene, specie con IE. Se volete inserire più box, per evitare confusione, scrivete dei nomi specifici, tipo div#boxtoppage, div#boxmenu, div#boxmex, ecc. ecc. Nella pagina consigliata del mio gufetto ci sono più box diversi fra loro per stile e contenuto, un esempio pratico di come si possono personalizzare e utilizzare per varie necessità, ovviamente è meglio non abusare, si rischia di avere pagine confuse, inoltre i div hanno una posizione fissa nello spazio della pagina ciò significa che si sovrapporranno al resto del contenuto se si visualizzerà su uno schermo con dimensioni ridotte, considerate le differenze tra i vari monitor pc, tablet e smartphone La mia pagina esempio serve solo per mostrarvi che trattandosi di un contenitore div non c'è limite alle personalizzazioni di style ne al contenuto, che sia testo, link o script. I link si visualizzeranno con lo style impostato per la pagina, se si vogliono differenti si scrive una classe apposita o se proprio dovete in linea direttamente nel link Vediamo nel dettaglio classi e contenuto dei box nella pagina esempio
Spero di essere stata chiara in tutti i passaggi ^_^ Vi auguro buon lavoro ma sopratutto buon divertimento! Ciao alla prossima^^ Penelope ♥ Dai un giudizio a questo tutorial... Grazie ^_^
~ Pagina visitata da 2985 utenti |
Segui il telaio su Facebook * Info sezione...Mi farebbe molto piacere la condivisionedei miei tutorial ma vi sarei anche molto grata se evitaste di fare copia e incolla su altri spazi del mio lavoro, linkate le pagine, avvisatemi ricambierò senza problemi. Grazie ♥ ..:: Basi ::.. ..:: html ::.. ..:: Script page ::.. ..:: Script gadget ::.. Accessori e gadget del telaio... Spazio web... Realizzare e gestire un sito web Materiale grafico Gif, mini gif, pixel, immagini, png... |
I vostri messaggi...
|
|
|