Pagina aggiornata... Lunedì, 08 gennaio 2024 * Tempo di caricamento 0.33 secondi
Link navigazione : Home telaioHome ~ Tutorial ~ Html » CSS o foglio di style - Div struttura sito

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

A meno di non utilizzarli per postare una base grafica, come ho fatto per questa sezione,
non amo i div per realizzare le mie pagine è ormai nota la mia passione per le table a tal fine ^_^
e per questa guida partiamo proprio da qui, vediamo come impostare i parametri nei css
per postare una base grafica, intera o tagliata nelle classiche 3 parti

- Parametri div per struttura sito con immagine

Molto semplice, un div invisibile ma con background-image e le misure precise della stessa

[...]

<style type="text/css">

[...]

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

- Nella pagina posteremo semplicemente:

<body>

<div id="contenitore"></div>

</body>

Come ho scritto per le table, questa soluzione per realizzare una pagina/home,
con un'immagine grande e pesante ci penalizzerà nella lentezza del caricamento della stessa
Clicca qui per vedere un esempio

- Parametri div per struttura sito con base grafica tagliata

Soluzione ideale per postare una base grafica che avremmo tagliato in tre parti,
una per l'header ovvero il logo/titolo, una parte per il body, che non avrà limiti per
quanto riguarda l'altezza height, "crescerà" in automatico in base a quanti elementi
inseriremo e un'ultima parte per il footer cioè la parte inferiore

[...]

<style type="text/css">

[...]

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

- Nella pagina posteremo così:

<body>

<div id="header"></div>

<div id="corpo"></div>

<div id="footer"></div>

</body>

Clicca qui per vedere un esempio, immagine tagliata e ricomposta

- Parametri div per struttura sito

Vediamo ora come scrivere i css per realizzare una pagina/home con la struttura in div

Di seguito ai parametri base per la pagina, i link, titoli e paragrafi aggiungeremo la classe per
un contenitore principale, quindi le altre per lo spazio logo/titolo, per la colonna, il corpo e il footer

[...]

<style type="text/css">

[...]

div#contenitore {
height: auto;
width: 900px;
border:3px solid #826748;
background-color :#dbcbb5;
margin-right: auto;
margin-left: auto;
}
div#header {
border-bottom:1px solid #826748;
background-color: #f3e8d2;
height: 200px;
padding:5px;
}
div#corpo {
background-color: #f7f2e7;
height: 300px;
padding:5px;
}
div#colonna {
border-right:1px solid #826748;
background-color: #f8f1e2;
float: left;
height: 300px;
width: 250px;
padding:5px;
}
div#footer {
border-top:1px solid #826748;
background-color: #f3e8d2;
text-align: center;
padding:5px;
height: 70px;
}
</style>

- Nella pagina posteremo così:

<body>

<div id="contenitore">
<div id="header">Logo/titolo</div>

<div id="colonna">Spazio colonna</div>

<div id="corpo">Spazio page</div>

<div id="footer">Footer</div>
</div>

</body>

Pagina esempio
- Ho colorato le varie parti con colori diversi affinché sia più facile distinguerli

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 ^_^




84%
Voti totali: 5
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 2576 utenti


 H: 
Buon Inverno !





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

Lula
15/02/2024 15:32:39
Ciao cara come stai? Spero bene sono passata per un saluto veloce ♥
ೡ Scritto in... Iframe
 
Grazia
07/02/2024 07:45:12
Ciao Penny cara, mentre continuo l'interminabile lavoro per il mio sitino nuovo, sono passata a lasciarti un salutino veloce ♥ Spero sia tutto ok :) Cerco di fare, nei limiti delle mie possibilità, molte cose in contemporanea, avendo tante passioni (a proposito, grazie del tuo voto alla mia poesia su Instagram ♥ ) e quindi sono come te sempre di corsa, ma le amiche vengono prima di tutto. Un abbraccio e mille complimenti come sempre!
ೡ Scritto in... Il telaio di Penelope...
 
Grazia
27/01/2024 08:50:44
Ciao Penny cara, sono passata per un salutino e per augurarti buon sabato ♥ Mentre lavoro con SharepointDesigner al nuovo spazio che ti dicevo di recente, un giro di saluti tra le amiche fa sempre piacere. Bacioni ♥
ೡ Scritto in... Il telaio di Penelope...
 
Penelope
21/01/2024 23:01:40
Cara Grazia WordPress è sicuramente la scelta migliore che si possa fare per avere uno spazio professionale semplice da gestire, conosco la piattaforma piuttosto bene e so che è anche molto versatile, per il mio telaio però preferisco un sito tradizionale mi piace trafficare con i codici ^_^ Un abbraccio forte a te
ೡ Scritto in... Iframe
 
Grazia
21/01/2024 08:21:23
Buongiorno e buona domenica Penelope! ❤️ Sai, io adoro come te i siti statici, ma per quel che riguarda gli spazi che personalmente costruisco con WordPress, sono tutti realizzati con software esterni acquistati di editing tecnico-grafico, nel mio caso non utilizzo le basi pronte fornite da Altervista, ma decido ogni singolo componente (anche la struttura interna delle pagine ecc.). Avevo bisogno di un blog per argomentare e WordPress era la scelta più professionale a disposizione! È sempre un piacere passare a trovarti, un abbraccio forte forte a te e ai ragazzi ed a presto
ೡ Scritto in... Iframe
 
Penelope
20/01/2024 22:57:04
Grazie carissima Grazia i tuoi complimenti sono davvero graditi, gli iframe sono una grande risorsa web e capire come utilizzarli al meglio può essere molto utile, spero ^_^ ho provato ad utilizzare WordPress con Altervista ma non fanno per me i cms, preferisco un sito indipendente da codici preimpostati Un abbraccio forte
ೡ Scritto in... Iframe
 
Grazia
19/01/2024 16:27:52
I nostri adorati iframe... :) Complimenti per la chiarezza, mi è piaciuto molto come hai descritto i vari passaggi, sei stata come sempre bravissima! Chi utilizza WordPress (ad es. su Altervista) ha la comodità di un blog e la possibilità anche di caricare pagine web complete, per questo lo adoro, c'è pure l'accesso FTP alla cartella dei contenuti, volendo...♥ Ma i siti prettamente statici hanno sempre il loro fascino....un abbraccio carissima!
ೡ Scritto in... Iframe
 
Grazia
12/01/2024 16:39:08
Buon pomeriggio, carissima Penelope, sono passata per lasciarti un salutino, io tutto bene, grazie di essere passata nel Taccuino! in questi giorni mi sto dedicando a tante attività creative/manuali e di scrittura...ad ogni modo spero che anche a te sia tutto ok! Passare qui è sempre un piacere. Un abbraccio forte ed alla prossima ♥
ೡ ...commentario
 
Lula
11/01/2024 10:50:29
Ciao carissima Penny, auguri di buone feste passate. Spero tu le abbia trascorse con serenità e in salute! io dietro ai fornelli e ai bimbi. ma sono felice^^ anche se un po' stanca e con la schiena a pezzi ^^Un abbraccio!!!
ೡ Scritto in... Il telaio di Penelope...
 
Grazia
03/01/2024 10:40:42
Ciao carissima Penny, auguri di buon anno a te e ai ragazzi anche qui :) Sono venuta a prendere una giffina per la grafica nuova del Taccuino ♥ Grazie mille un abbraccio forte
ೡ Scritto in... Il telaio di Penelope...
 

Referer...



Gestisci le opzioni di privacy