Pagina aggiornata... Lunedì, 08 Dicembre 2025 * Tempo di caricamento 0.74 secondi
Link navigazione : Home telaio ೡ Home ~ Tutorial ~ Html » Style css div per struttura sito

..:: CSS div per struttura sito ::..

Nella pagina Style css elemento div abbiamo visto come impostare le classi, generiche e uniche
per un elemento div con esempi di piccoli box da utilizzare per degli accessori ma come vi ho anticipato
questi contenitori estremamente versatili sono utilissimi per la struttura di uno spazio web, per realizzare
basi semplici come questa nel telaio a layout più professionali e responsive per dispositivi mobili

Si può realizzare la home di un sito partendo da una base grafica di sicuro effetto ma ovviamente
poco indicata ormai alla richiesta dell'adattabilità di un sito responsive, o come per il telaio,
dividere la pagina in tre blocchi, header, corpo e footer utilizzando delle basi grafiche ed anche
in questo caso però non sarà ottimizzato per i dispositivi mobili

Oppure la scelta più ovvia, sfruttare al massimo la flessibilità di questi contenitori,
riducendo al minimo gli elementi grafici e utilizzando le proprietà specifiche per realizzare
un sito totalmente responsive, adatto quindi ad ogni dispositivo, l'argomento è impegnativo
quindi ho pensato di scrivere un tutorial specifico che potete leggere in
Sito responsive con css e Flexbox

Un sito web può essere uno spazio professionale quanto la "stanzetta" di un hobby e in tal caso
poco importa che non sia estremamente ottimizzato, inoltre visto che può essere di allenamento
per capire come gestire i contenitori div vediamo come si scrivono i css delle altre opzioni...

css per un sito (Home) con base grafica

La base grafica deve essere abbastanza grande in cui poter inserire dei brevi contenuti,
presentazione e info e un menu per i link delle altre pagine ma non deve essere eccessiva
e troppo pesante altrimenti si rallenterà molto il tempo di caricamento della pagina

Classe per il div contenitore

<style type="text/css">
[...]

/* Classe contenitore */
div#contenitore {
border-style: none;
background-image: url('url pagina immagine');
text-align:center;
width: ****px;
height:****px
margin-left:auto;
margin-right:auto;
}
</style>

La classe per il contenitore si aggiungerà ai parametri già scritti per la pagina * CSS basi
e sarà con un identificatore unico id, eviteremo confusione con altri contenitori.

Un div ovviamente senza bordo (border-style: none;) con l'immagine di sfondo (background-image) e
con misure in larghezza (width) e altezza (height) che corrispondono a quelle del'immagine (base grafica)
non ci sono i parametri per il font perché per scrivere avremo bisogno di altri contenitori,
che posizioneremo dove occorre sopra la base grafica utilizzando la proprietà position: absolute

Classi per i div contenuti

[...]

/* Colonna */
div#navigazione {
position: absolute;
left:390px;
top:166px;
border: none;
text-align:center;
font-family : "Garamond";
color : #5b4a37;
font-size : 16px;
width: 250px;
height: 530px;
}
/* Corpo pagina */
div#pager {
position: absolute;
left: 714px;
top: 119px;
border: none;
text-align:center;
font-family : "Garamond";
color : #5b4a37;
font-size : 16px;
width: 336px;
height: 558px;
}

In base all'immagine grafica realizzata si posizioneranno questi contenitori negli spazi predisposti,
la proprietà position: absolute; servirà a bloccare i div e con i valori left e top indicheremo dove,
rispetto alla parte superiore e a sinistra della pagina, occorre inoltre impostare i valori per la larghezza
e l'altezza, (width e height) l'immagine è statica per cui bisognerà fare molta attenzione quando si
inseriranno i contenuti affinché non si visualizzino al di fuori dei contenitori e quindi dalla base grafica
Qui potete vedere un esempio di ciò che si può realizzare # Home su base grafica

* Se avete dato un'occhiata al codice sorgente, vi ho messo il link nella "Home", avrete notato
che i contenitori per i contenuti sono all'esterno del contenitore principale questo perché i div
si sovrappongono a ciò che c'è nella pagina, caratteristica che li rende così flessibili ma con questo
tipo di struttura la pagina non si visualizzerà correttamente sui dispositivi mobili

css per struttura sito con base grafica "tagliata"

Per questo tipo di struttura si realizza una base grafica che comprende la parte "header"
ovvero logo/nome spazio e la parte footer, l'estremità inferiore del sito, per la parte body è
preferibile impostare il colore di sfondo principale, affinché sia meno pesante da caricare
in pratica è la struttura del telaio, prima o poi mi adeguerò anche io ad un sito responsive...

La base che ho usato per l'esempio è una vecchia grafica di questa sezione, dove c'era anche
la parte per il body, come vedete ne basta un pezzetto, si ripete e segue l'altezza dei contenuti, questa
opzione dipende dal tipo di grafica che si realizza, evitare però troppe immagini è sempre da preferire

Classi per i div contenitori


<style type="text/css">
[...]
div#header {
border-style: none;
background-image: url('url pagina immagine');
text-align:center;
width: ****px;
height:****px
}
div#corpo {
border-style: none;
background-image: url('url pagina immagine');
text-align:center;
font-family : "Garamond";
color : #5b4a37;
font-size : 16px;
width: ****px;
}
div#footer {
border-style: none;
background-image: url('url pagina immagine');
text-align:center;
width: ****px;
height:****px
}
</style>

Anche in questo caso è meglio utilizzare un identificatore unico id, non sarà necessario impiegare
la proprietà position perché saranno centrati nella pagina con il valore impostato nella classe body,
semplici div invisibili, basterà impostare le misure in larghezza (width) e altezza (height) corrispondenti a
quelle delle basi grafiche, in pratica ci serviranno esclusivamente per ricomporre la base grafica "tagliata"
i contenuti saranno inseriti in una table che crescerà in altezza man mano che si aggiungeranno

In base alla grafica che si realizza servirà una table anche nella parte header per scrivere
ad esempio una frase di benvenuto, e ovviamente in quella del footer base finale della grafica in cui
si può prevedere uno spazio per scrivere il copyright, per queste due parti però occorrerà fare
attenzione alla misura in altezza che non deve superare quella della grafica

Un po' laborioso ma si potranno inserire tutti i contenuti che servono, qui potete vedere
un esempio # Home con base grafica purtroppo non sarà ottimizzato per i dispositivi mobili

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 ^_^
80%
Voti totali: 4
Rating... 5





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 2537 utenti


 H: 
Buon Inverno !





Segui il telaio su Facebook

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

Natale menu
..Natale menu..

ೡ Istruzioni per prelevare e postare
nel proprio spazio accessori e gadget del telaio

Sito o forum
Blogger-Blogspot

Spazio web...

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

Un sito su Altervista

Materiale grafico

Gif, mini gif, pixel, immagini, png...
Tutto il materiale grafico che ti serve,
raccolto e messo a tua disposizione!

Gif & co...




I vostri messaggi...

Sari
18/12/2025 22:01:59
Ciao Penelope, ti seguo da anni e tanto ho imparato dalle tue lezioni: grazie. Ti auguro un Natale sereno e, nonostante i tempi che stiamo vivendo, in allegria. Buon Natale
ೡ Scritto in... Home
 
filod'arianna
14/12/2025 09:32:05
Ciao Penelope, ho preso un countdown Grazie mille per averli messi a disposizione, sono deliziosi! Ne userò più d'uno sicuramente:-)
ೡ Scritto in... Countdown stagioni e feste
 
Elise
13/12/2025 18:12:05
Ciao carissima Penelope, quante meravigliose creazioni di Natale che hai realizzato, ne hopresa una, il caminetto con le calze, STUPENDO!!!!!Grazie tesoro un abbraccio grande e Buone Feste a te e tutta la tua famiglia.Elise
ೡ Scritto in... Decori pagine Natale
 
Grazia
06/12/2025 16:01:26
Ciao carissima Penelope💓 Wow bellissime le tue novità natalizie! A me tutto ok, ti ringrazio di essere passata nel Taccuino 🥰 Lascio un fortissimo abbraccio a te e ai ragazzi. A presto carissima 💖
ೡ Scritto in... Home
 
ೡPenelope ♥
04/12/2025 02:20:20
Cara filod'arianna sistemato il link un abbraccio
ೡ Scritto in... *Amici del telaio...*
 
filod'arianna
03/12/2025 11:57:26
Ti devo chiedere una gentilezza Penelope ^_^ ho modificato il dominio, potresti correggere il link del mio banner da librandosi.forumfree.it - a librandositralepagine.forumfree.it ? 🙏
ೡ Scritto in... *Amici del telaio...*
 
filod'arianna
03/12/2025 10:40:55
Ciao carissima , ho preso un decoro per l'home natalizia ♥
ೡ Scritto in... Decori pagine Natale
 
ೡPenelope ♥
29/11/2025 18:34:13
Grazie a te carissima Marilinc
ೡ Scritto in... Settimanelli natalizi
 
ೡPenelope ♥
29/11/2025 18:30:37
Merci beaucoup chère Maleah, vous trouverez ici des modèles prêts à l'emploi pour Blogspot [Link] e ne peux pas réaliser de travaux sur commande, désolé
ೡ Scritto in... html e script Tutorial...
 
MARILINC
29/11/2025 08:59:51
Grazie infinite meravigliosi c'è solo l'imbarazzo della scelta!
ೡ Scritto in... Settimanelli natalizi