Div esempio position absolute
 |
|
|||
Sezione del telaio dedicata alla realizzazione e |
||||
|
|
|||
..:: CSS elemento div ::.. Un div è un contenitore molto versatile e quindi utilizzato per varie necessità nelle pagine web,dalla realizzazione di layout molto complessi, a box di qualunque misura, può essere invisibile o visibile tramite colori e grafica in base a ciò che si vuole realizzare Per lo style css possiamo utilizzare una classe class da richiamare dove serve nella pagina o il selettore id per un elemento unico, in entrambi i casi si può personalizzare per ogni esigenza, larghezza e altezza, bordi, sfondi, testo, ecc, inserire i parametri specifici per la posizione che deve occupare nella pagina e si può aggiungere lo scroll 
Per scrivere un classe css class, che si può richiamare su vari elementi di una pagina web,div, table, td e paragrafo, si utilizza il punto e un nome .mia_classe ovviamente sei parametri inseriti sono compatibili con i vari elementi, altrimenti si scrivono classi specifiche Per un identificatore unico id si utilizza il cancelletto e un nome #mio_idClasse "generica" che si può richiamare nel div e in altri elementi html
In base alle necessità si può aggiungere il parametro per lo sfondo, con un colore background-color: #******;Testo o un'immagine background-image: url('https://url immagine');Testo Impostare lo spazio tra il bordo e il contenuto con il parametro paddingpadding-top padding-right padding-bottom padding-left* Si possono scrivere singolarmente o abbreviati
Impostare la posizione all'interno della pagina con il parametro positione le proprietà - static - absolute - relative - fixed - sticky - con indicazionitramite "top, bottom, left, e right", tranne static che è una posizione di default Il parametro position: absolute; si utilizza per visualizzare un elemento in un punto specifico della pagina che manterrà la posizione ovvero non seguirà lo scroll
Il parametro position: relative; si visualizza in base alle impostazioni delle proprietà "top, bottom, left, e right" nel contenitore in cui viene inserito
Un esempio pratico con position: fixed; (bottom:0px; right:15px;) lo vedete con il bottone in basso a destra che permette di tornare velocemente su in alto alla pagina, è un'impostazione che consente di visualizzare un elemento fisso nella pagina, sempre nella stessa posizione anche quando si usa lo scroll, se vi può interessare leggete il tutorial Box fisso nella pagina Con il parametro position: sticky; si può visualizzare un elemento che rimane fisso dopo lo scroll della pagina, molto utile per link, info o messaggi
 Per la realizzazione di un sito web con elementi div ci sono tanti altri parametrispecifici per la posizione dei contenitori e i box dei vari "spazi" che compongono il layout, vi consiglio una ricerca mirata in base alle vostre esigenze, ecco alcuni nomi da cui iniziare - float - clear - flex - grid -
Con il parametro overflow e i valori "auto e scroll" si aggiunge lo scroll,utile per box con contenuti corposi che occuperebbero troppo spazio nella pagina
* Classe con selettore id per uno specifico elemento div La classe con selettore id si può usare per un solo elemento della pagina, utili ad esempioper realizzare le parti specifiche di un layout, che avrà ovviamente un solo header, un body e un footer o anche per un particolare menu, o un box per le news Si possono inserire tutti i parametri descritti sopra, l'unica differenza è nel simbolo che lo definisce e nel tag di richiamo nella pagina Si può scrivere la classe con div#nome_classe o #nome_classe, io per abitudine e per non fare confusione con altri elementi e/o classi preferisco la prima versione
Con i selettori id si possono scrivere classi per qualsiasi elemento, paragrafi, table,celle, ecc, ma considerando che si possono utilizzare una sola volta nella pagina è preferibile scrivere classi "generiche" e utilizzare gli id dove è indispensabile Spero di essere stata chiara in tutti i passaggi ^_^ Vi auguro buon lavoro ma sopratutto buon divertimento! Ciao alla prossima^^ Penelope ♥
|
✨ Apprezzato
|
.gif){kind=small}
Commentario...
* Info sezione...
Mi farebbe molto piacere la condivisione
dei 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 e utilità pagine web
html tag scrittura pagine web
Script per pagina
Script per gadget
Aiutami a diffondere il più possibile informazioni
utili alle donne vittime di abusi... Grazie!
Link del telaio...
| ೡ Il telaio di Penelope ☆ Template webset e blog ☆ Un sito su AlterVista ☆ Gif & co... |
I vostri messaggi...  DanyGraphic ~ 06/04/2026 13:51:58Ciao Penny e buona Pasquetta , oggi casualmente ho dato un occhiata alle pagine con testo scorrevole che volevo sistemare e magicamente funziona tutto come prima , compreso le stelline che scendono sulle immagini .....è un caso che tu sappia ....? io non trovo nulla a riguardo, ma credo rimetterò le pagine online . Buonissima giornata ૡScritto in Home  ૡPenelope ♥ ~ 04/04/2026 17:38:15Grazie infinite Bibi e Krault un abbraccio forte forte Buona Pasqua a voi e a tutti gli amici del telaio  ૡScritto in Home  DanyGraphic ~ 02/04/2026 18:17:56Sono passata per un saluto . Sempre piacevole navigare nel tuo sito , un abbraccione e cari Auguri di buona Pasqua  ૡScritto in Home  Grazia ~ 02/04/2026 08:16:05Buongiorno carissima Penelope, sempre bellissimo e interessante qui! Ottimo il nuovo aggiornamento sulla funzione marquee :) Ti lascio un forte abbraccio e tanti carissimi auguri per una serena Pasqua. Ciao! ૡScritto in Home  ૡPenelope ♥ ~ 30/03/2026 16:18:12Ciao carissima Ahamiah non sono riuscita a lasciare un saluto nel tuo forum quindi ti ringrazio tantissimo e ti mando un forte abbraccio qui  ૡScritto in Datari con saluto more image  =ahamiah= ~ 29/03/2026 09:48:10Buona domenica delle Palme, ho riscoperto il vostro forum e vi faccio i complimenti. Ho prelevato il codice di uno dei vostri saluti con data. Grazie a buon lavoro. ૡScritto in Datari con saluto more image  Cris ~ 28/03/2026 18:34:53Ciao, sono passata per un salutino. Buon fine settimana! ૡScritto in Commenti telaio... |
|
|
html & script Tutorial è online dal 2011 e dopo una lunga pausa ripartiamo da... 2 anno, 6 mesi, 29 giorni ೡ Copyright © Penelope 2008 - 2026 Tutti i diritti riservati www.iltelaiodipenelope.it |
|
|
 |
Ciao Penny , grazie per il tuo consiglio, sei sempre un punto di riferimento . Un abbraccione a te . Ti auguro una buona serata