Pagina aggiornata... Sabato, 09 settembre 2023 * Tempo di caricamento 0.39 secondi
Link navigazione : Home telaio ೡ Home ~ Tutorial ~ Html » CSS o foglio di style - Div

..:: CSS o foglio di style - div ::..

Prima di leggere questa guida, se non lo avete già fatto, iniziate con -> CSS - basi

I div sono dei "contenitori" molto utilizzati nelle pagine web, sopratutto per
realizzarne la struttura oltre che ovviamente per postare degli accessori in punti precisi della pagina,
completamente personalizzabili ne diventa ancor più pratico l'uso con l'ausilio dei css

Come per altre classi dobbiamo stabilire un nome, ma anticipato dall'asterisco anziché dal punto,
possiamo anche evitare di scrivere "div", mettendo solo l'asterisco e il nome, ma per chi inizia
a trafficare con i css magari è meglio specificare tutto ciò che si inserisce ^_^

- Ecco un esempio pratico per un semplice boxino:

[...]

<style type="text/css">

[...]

div#box{
border:1px solid #645042;
text-align:center;
font-family: "Book Antiqua";
font-size: 14px;
color : #645042;
width: 210px;
height: 153px;
margin-left:auto;
margin-right:auto
}
</style>

- Nella pagina lo richiameremo così:

<body>

<div id="box">Qui potremmo scrivere, postare degli script, immagini ecc. ecc.</div>

</body>

Una delle particolarità dei div è la possibilità di personalizzare il punto della pagina
in cui lo vogliamo visualizzare, inserendo uno specifico parametro di posizione e la distanza
che deve avere con il bordo superiore e il bordo sinistro della pagina

[...]

<style type="text/css">

[...]

div#boxino_testo{
position: absolute;
left: 180px;
top: 175px;
border:3px solid #645042;
text-align:center;
font-family: "Book Antiqua";
font-size: 14px;
color : #645042;
width: 450px;
height: 159px;
margin-left:auto;
margin-right:auto
}
</style>

Lo posteremo nella pagina come ho illustrato sopra,
ovvero <div id="boxino_testo"></div> --> Guarda un esempio

- Sempre riguardo la possibilità di personalizzarne la posizione, un'altro parametro
che può tornare molto utile è position:fixed; che ci permette di avere un box appunto fisso
nella pagina, come sopra, occorrerà inserire i parametri per le distanze dai bordi della pagina.

[...]

<style type="text/css">

[...]

div#boxino_fisso {
position:fixed;
border:1px dotted #645042;
background-color: #f8f2e2;
text-align:center;
font-family : "Tahoma";
color : #5e402a;
font-size : 12px;
padding:5px;
top:200px;
left:50px;
width:300px;
height: 150px;
}
</style>

Comodo per postare un boxino che scrolla con la pagina, possiamo inserire
i tag di richiamo in qualsiasi punto della pagina, ovviamente sempre sotto il tag <body>
<div id="boxino_fisso"></div> --> Guarda un esempio

Nulla di complicato quindi, basta fare come il solito un po' di attenzione
nell'inserire i vari parametri necessari che ci occorrono e riportare poi il nome esatto
impostato al div quando si posta nella pagina

Come vi ho accennato, si possono utilizzare i div per realizzare una pagina web,
come per le table con o senza base grafica --> Div grafica sito

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 questa guida... Grazie ^_^
60%
Voti totali: 1
Rating... 3




Commentario...

Scrivi qui per lasciare un saluto, una richiesta di aiuto,
un suggerimento o una critica ^_^

Nickname
Home page
B i U   ^_^ o_O O_O *_* ♥ Gif...

  


- Pagina visitata da 1738 utenti


 H: 
Buon Autunno !





* 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 ::..



..:: html ::..








..:: Script page ::..




..:: Script gadget ::..




Accessori e gadget del telaio...


..: Spazio web...


Realizzare e gestire un sito web
con l'hosting free più famoso...



Gif & co... Penelope ♥


Pagina Facebook
del telaio...




 

I vostri messaggi...

Penelope
02/10/2023 17:01:02
Grazie infinite cara Grazia, mi dispiace molto vedere spazi trascurati quando poi basta avere un po' di pazienza per sistemare ti ringrazio anche per aver aggiunto informazioni molto utili
Un abbraccio forte ♥
ೡ ...commentario
 
Grazia
01/10/2023 17:51:03
Ciao Penny, buona domenica! Hai fatto benissimo a scrivere questa guida sull'HTTPS, con Altervista hanno fatto le cose per bene, anche se si installa uno spazio web "classico", come hai scritto tu, e persino se si installa WordPress è tutto automatico, con un click nel pannello di controllo, ma non tutti lo sanno, era giusto farlo presente! Wordpress (che io adoro perchè è veramente versatile) dal canto suo, offre un'infinità di plugin per attivare l'https, il fatto è che bisogna essere molto, molto attenti, altrimenti il sito praticamente si "rompe" *-* Per fortuna quasi tutte le piattaforme si sono adeguate, tranne la bellissima Eklablog, non comprendo il perchè. Ok, perdona lo "sproloquio", un abbraccio ed alla prossima!!
ೡ Scritto in... Il telaio di Penelope...
 
Penelope
27/09/2023 17:12:31
Ciao Calcifer grazie infinite anche io sono felice di essere tornata
ೡ Scritto in... 'https' Hyper Text Transfer Protocol Secure
 
Calcifer
27/09/2023 15:08:42
AAh, che bello vederti di nuovo attiva! :) Aspettavo da anni il tuo ritorno ♥
ೡ Scritto in... 'https' Hyper Text Transfer Protocol Secure
 
Cleo
25/09/2023 17:58:11
ho fatto un giretto e' tutto ancora piu' bello un abbraccio e grazie per il banner inserito un abbraccio
ೡ Scritto in... *Amici del telaio...*
 
Gabriella
25/09/2023 12:21:45
Bentornata Penelope , ho prelevato un tuo bellissimo bottone. Grazie di cuore !
ೡ Scritto in... Bottoni top pagina
 
Grazia
24/09/2023 19:16:50
Ciao Penny cara, nel messaggio precedente ho omesso di scrivere quella che sembra una ovvietà, ma la scrivo lo stesso: il tuo sito è fantastico, come sempre, la maestra dei codici è tornata 😄😄😄😄 Un abbraccio e serena domenica sera di cuore ❤️
ೡ Scritto in... Il telaio di Penelope...
 
Grazia
21/09/2023 10:24:25
Carissima Penelope, è una gioia immensa leggerti di nuovo! Sono felicissima tu sia tornata online, hai fatto benissimo, gli hobby aiutano tantissimo a risollevare l'animo ...brava! Oltre al mio piccolo blogghino per esempio io mi sto dedicando ai disegni fatti a mano e mi rilassano tantissimo! Ti cerco su Fb così ci sentiamo, se ti fa piacere, più spesso...ti abbraccio immensamente cara amica, a presto!
ೡ ...commentario
 
Cleo
20/09/2023 16:39:32
Ciao tesoro i miei banner sono qui [Link]
ೡ Scritto in... Il telaio di Penelope...
 
Cleo
20/09/2023 12:48:48
Bentornata e' bellissimo rivedere il tuo Sito on line
ೡ ...commentario
 

Referer...