![Porte Aperte sul Web [logo]. Link alla home page](../../img/logopab.gif)
sei in home - tutorial - home page con xhtml strict - lezione 4
Scarica il file testata.css e leggi il codice corrispondente.
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
}
Nel body ho definito la famiglia di caratteri che utilizzeremo in questa pagina, precisandone la dimensione standard. E' importante stabilire la dimensione del carattere in %, in modo da renderlo ridimensionabile (esempio, da IE con Visualizza - Carattere). Si sconsiglia l'utilizzo degli em, in quanto IE ha un baco quando la dimensione del carattere viene definita nel body, non visualizzando correttamente l'entità del ridimensionamento e spesso rendendo illeggibile un testo in modalità di visualizzazione come carattere piccolo.
#testata {
border: 1px solid #0066CC;
position: relative;
background-image: url(../../strict/images/quadrb.gif);
background-repeat: repeat;
color: #000000;
min-height: 106px;
}
Il box #testata è definito in modo da ottenere un bordo di un pixel, continuo e di colore blu. Il testo sarà di colore nero su sfondo immagine quadrettato (quadrb.gif), ripetuto. E' stata definita un'altezza minima, per fare in modo che il box si espanda in altezza nel caso si usino caratteri molto grandi (superiori al 150%). Si osservi che la proprietà min-height non è supportata da Internet Explorer ; per questo caso si consiglia di leggere l'interessante articolo presente nel sito constile.org.
Proseguendo nell'analisi del codice del foglio di stile, troviamo le specifiche che definiscono il box logo che, interno alla #testata, contiene il logo e la scritta della scuola.
#logo {
width: 66.5%;
}
#logo img{
float: left;
margin-right: 10px;
}
.scuola {
font-size: 200%;
color: #990000;
letter-spacing: .2em;
}
Il box #logo ha una larghezza del 66,5%. L'immagine contenuta al suo interno ha il testo che scorre alla sua destra (float: left;), distanziato di 10 px dal bordo del box. Distanziare il testo dagli oggetti di 8-10 px è importante per garantirne una buona leggibilità, a vantaggio soprattutto delle persone ipovedenti.
La classe .scuola (che verrà applicata al testo del nome della scuola) permette una visualizzazione più evidenziata al nome della scuola, che avrà dimensione pari al 200% rispetto alla dimensione definita nel body, sarà di colore rosso scuro ed avrà le singole lettere leggermente spaziate (0.2 ems).
#agg {
position: absolute;
top: 5px;
right: 5px;
width: 33%;
text-align: right;
font-size: 80%;
}
Il box #agg (utilizzato in home page per contenere la data dell'ultimo aggiornamento e, nelle pagine interne, per indicare la posizione del documento all'interno del sito, è disegnato in posizione assoluta, a partire da 5 pixel dall'alto e dalla destra del margine del box che lo contiene (#testata). La larghezza di #agg è del 33%, il testo è allineato sulla destra, mentre il carattere è più piccolo (80% rispetto a quello definito nel body).
L'effetto del posizionamento assoluto di #agg è che il box viene rimosso dal normale flusso del documento e posizionato in base alle coordinate stabilite dalle proprietà top e right.
