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 ♥
|
|
.gif){kind=small}
Commentario...
|
Scrivi qui per lasciare un saluto, una richiesta di aiuto, un suggerimento o una critica ^_^ |
H:
Felice Estate
e ...buon sabato!
..:: Basi ::..
..:: html ::..
..:: Script page ::..
..:: Script gadget ::..
Accessori e gadget del telaio...
Spazio web...
Realizzare e gestire un sito web
nell'hosting free più famoso...
Materiale grafico
Gif, mini gif, pixel, immagini, png...
Tutto il materiale grafico che ti serve,
raccolto e messo a tua disposizione!
I vostri messaggi...
|
|
|
|
html & script Tutorial è online dal 2011 e dopo una lunga pausa ripartiamo da... 10 mesi e 12 giorni ೡ Copyright © Penelope 2008 - 2024 Tutti i diritti riservati www.iltelaiodipenelope.it |
|
|
 |
