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...  Sari ~ 19/03/2026 12:54:53Sono Sari di vocedivento e sto allestendo il mio blog pasquale. A questo scopo ho prelevato il calendarietto a fiorellini azzurri.Grazie, come sempre. Ciao ૡScritto in Calendari fiorellini  Cris ~ 16/03/2026 15:25:23Ciao. Ho preso un tuo Almanacco, è perfetto per il mio blog. Grazie! ૡScritto in Almanacco soft  Sabry ~ 10/03/2026 11:39:07Io ti adoro ... vorrei tanto essere brava come te, ti seguo da anni e rimango sempre affascinata dalla tua astuzia e bravura e creativitá ♥ Prendo spunti ♥ Grazie di ♥ ૡScritto in Sfondo pagina  Gabriella ~ 09/03/2026 18:37:40Ciao Penny, come sempre i tuoi lavori sono molto eleganti ,ne ho prelevato due per adesso ;) grazie ૡScritto in Decori pagine Primavera  soleyada ~ 07/03/2026 22:02:27Mi hai fatto tornare indietro nel tempo cara Penny, non smettere mai di splendere, è tutto stupendo qui, ti auguro il meglio, bacioni :-* ૡScritto in Countdown Primavera  Cris ~ 24/02/2026 08:17:18Ciao, e bentornata. Mi è sempre piaciuto il tuo bel sito. Ho creato da poco un blog, il tuo sito è il primo tra i miei preferiti. ૡScritto in Home  MOra Ribelle ~ 16/02/2026 12:05:35Buongiorno, contenta del tuo ritorno. Mi domando come metto anche io questo box saluti? grazie ૡScritto in Gif & co...  Sari ~ 14/01/2026 17:31:32Buon Anno Penelope. Ho prelevato un top pagina sostituendo quello natalizio. Tutto bello e utile qui, grazie. ૡScritto in Marquee con Javascript |
|
|
html & script Tutorial è online dal 2011 e dopo una lunga pausa ripartiamo da... 2 anno, 6 mesi, 5 giorni ೡ Copyright © Penelope 2008 - 2026 Tutti i diritti riservati www.iltelaiodipenelope.it |
|
|
 |
Natale, con pace, amore e tanta gioia.
Bacione ~ Frann
Ciao cara Sari mi fa molto piacere