Allora:
Prima di realizzare qualsiasi sezione devi avere un idea abbastanza generica di cosa vuoi inserirci al suo interno.Dichiariamo all'interno del documento Xhtml questa sezione:
<div id="container">
</div>
In questo caso la nostra sezione è vuota e non presenta alcun tipo di codice al suo interno.
Ipotizzando di non sapere cosa ci debba essere all'interno della sezione per creare un contenuto fisicamente presente all'interno del documento Xhtml è necessario dichiarare al suo interno questo codice:
codice:
<div id="container>
& n b s p; /*tutto attaccato*/
</div>
Adesso vediamo di distinguere due cose importanti:
1)dichiariamo un altezza fissa per la sezione "container":
Codice Css:
codice:
html,body {
margin: 0;
padding: 0;
text-align: center; /*centra la sezione per IE*/
}
#container {
background-color: silver; /* colore di sfondo grigio*/
width: 50%; /*larghezza relativa*/
height: 1000px; /* altezza fissa*/
margin: 0 auto; /* per centrare la sezione nella finestra del browser*/
}
In questo caso nel browser predefinito che utilizzi vedrai la sezione appena creata con uno sfondo grigio e centrata nel view-port di esso(ossia la finestra)
2)Dichiariamo un altezza relativa per la sezione "container":
Codice Css:
codice:
html,body {
margin: 0;
padding: 0;
text-align: center;
}
#container {
background-color: silver;
width: 50%;
height: 100%;
margin: 0 auto;
}
Da qui possiamo fare subito due distinzioni.Il valore espresso in px è un valore fisso mentre quello espresso in % è un valore relativo.Piu precisamente è relativo all'elemento genitore della sezione "container"(per quanto riguarda la sua posizione) che in questo caso è l'elemento <body> ed è anche relativo al contenuto interno della sezione.
Esiste un'importante differenza tra i due esempi che ho appena realizzato:
Nel primo esempio il contenuto si estende per un altezza di 1000px(ossia un altezza ben definita).
Nel secondo esempio dichiarando un altezza del 100% vale questa affermazione:
Rendi l'altezza della sezione uguale al 100% dell'altezza del contenuto.Percui se vuoi avere una sezione alta quanto la finestra del browser basta semplicemente creare un immagine con una larghezza da te scelta e altezza di 1px e farla ripetere verticalmente all'interno della tua sezione.
Per fare tutto cio utilizza la proprietà abbreviata,quale:
background: valori;
Permessi di invio
Rispondi quotando