SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
FORMATTARE LE LISTE DI LINK  MENU
• Uno metodi migliori per realizzare un menu in XHTML è utilizzare liste di
collegamenti:
<ul>
<li><a href="…">Collegamento 1</a></li>
<li><a href="…">Collegamento 2</a></li>
<li><a href="…">Collegamento 3</a></li>
<li><a href="…">Collegamento 4</a></li>
<li><a href="…">Collegamento 5</a></li>
</ul>
• Tuttavia, il classico aspetto delle liste rende poco “attraente” un menu
realizzato in questo modo
SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
FORMATTARE LE LISTE DI LINK  MENU
• Per ottenere un menu verticale dall’aspetto più accattivante a partire da una
lista, come prima cosa dovremo letteralmente eliminare la formattazione “a
lista”
ul { margin:0; padding:0; }
li { display:inline; }
SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
FORMATTARE LE LISTE DI LINK  MENU
• Quando si usano i CSS per gestire un menu di collegamenti è
possibile sfruttare le pseudo-classi a:link, a:visited,
a:hover, a:active per creare effetti roll-over senza
utilizzare il javascript, con ovvi vantaggi
• Avendo eliminato le varie proprietà della lista, per fornire
l’aspetto desiderato al menu dovremo agire direttamente sui
tag <a> e le loro pseudo-classi
a:pseudoclasses
• a:link viene usato per elaborare lo stile di un link non ancora visitato
• a:active colore del link all’atto del click.
• a:visited colore del link dopo averlo visitato
• A:active dovrebbero venire dopo gli a:hover (se presente) nella
definizione CSS in modo da essere efficace!
TAG <div> e CSS
Ricalcare la grgilia di impaginazione
PRIMA PARTE: XHTML
UNA STRUTTURA PER I CONTENUTI
• Oltre a caratterizzare i contenuti (titoli, paragrafi, liste,
collegamenti), il linguaggio di marcatura ha il compito di
realizzare la struttura in cui inserire i contenuti stessi
• Per raggruppare elementi da trattare come un oggetto
unico, l’elemento chiave è il tag <div>
• Il tag <div> è un contenitore generico.
Modello visuale di CSS – Box Model
• La visualizzazione di un documento con CSS avviene identificando lo spazio di
visualizzazione di ciascun elemento del documento.
• Il flusso di dati è sempre dall’alto verso il basso
• Ogni elemento è definito da una scatola all'interno del quale sta il contenuto. Le
scatole sono in relazione alle altre come segue:
• Le scatole degli elementi contenuti stanno dentro alla scatole dell'elemento genitore.
• Flusso normale di tipo blocco: le scatole sono poste l'una sopra l'altra in successione
verticale (come paragrafi).
• L’elemento che contiene le varie scatole, assume la dimensione massima data dalla somma
delle dimenzioni degli elementi in esso contentui
• La posizione di ogni elemento è relativa agli elementi vicini e agli elementi che lo
contengono.
Modello visuale di CSS – Box Model
• Flusso normale di tipo inline: le scatole sono poste l'una accanto all'altra in successione
orizzontale (come parole della stessa riga)
• Gli elementi stanno tutti uno accanto all’altro su una linea orizontale.
• La posizione di ogni elemento è relativa agli elementi vicini e agli elementi che lo
contengono.
• Si utilizza molto per orientare le voci di un menu, realizzato con una lista non odinata ( <ul>
e rispettivi <li>)
• Di solito, per un menu orizzontale, si dichiara una lista non ordinata
• Si dichiarano le voci di menu (“home”, “chi siamo”, “dove”, “contatti”) come dei list item.
• Si associa ad un elemento li e ul il rispettivo selettore con la property display:inline;
li a {
color: white;
display:inline;
padding:10px;
font-weight: bold;
height: 40px;
line-height: 50px;
text-decoration: none;
}
Modello visuale di CSS – Box Model
• Flusso di tipo float: le scatole sono poste all'interno del contenitore e poi spostate
all'estrema sinistra o destra della scatola, lasciando che le altre scatole vi girino intorno.
• La posizione di ogni elemento è relativa agli elementi vicini e agli elementi che lo
contengono.
• Dichiarando un elemento come “float”, è come se lo si staccasse dal normale flusso di
lettura dei blocchi dall’alto verso il basso e lo si stesse posizionando sulla destra o sulla
sinistra del foglio.
Modello visuale di CSS –Box model
• Alcune proprietà controllano il tipo di posizionamento e di
scatola:
• DISPLAY (inline | block | … | none): il tipo di scatola da utilizzare per
l'elemento: un blocco, un inline, una lista, una cella di tabella, ecc.
• POSITION (relative): il posizionamento rispetto al flusso del documento.
• FLOAT (left | right | none): un float è una scatola scivolata all'estrema
destra o sinistra del contenitore muovendo le altre per farle posto.
• TOP, BOTTOM, LEFT, RIGHT: coordinate della scatola
• WIDTH, HEIGHT: dimensioni
A seguire: Un esempio di
posizionamento (1)
20/35
Un esempio di posizionamento (1)
A seguire: Un esempio di
posizionamento (2)
21/35
PRIMA PARTE: IL BOX MODEL
IL BOX MODEL
Ogni box è caratterizzato da
1. Larghezza dello spazio per i
contenuti (width)
2. Altezza dello spazio per i contenuti
(height)
3. Spazio fra contenuti e bordi
(padding)
4. Bordo (border)
5. Spazio fra il bordo e gli altri oggetti
della pagina (margin)
PRIMA PARTE: IL BOX MODEL
IL BOX MODEL
<div>Ex nostrum … </div>
<div>Indoctum … </div>
body {
margin: 0;
padding: 0;
}
div {
width:300px;
padding:10px;
border:5px solid #600;
margin: 20px;
}
Si noti che i margini superiori e inferiori adiacenti
collassano
PRIMA PARTE: IL BOX MODEL
IL BOX MODEL
• Internet Explorer per Windows versione
5.5 e precedenti ha un modo differente
di interpretare il box model: anziché
aggiungere il padding e il border alla
larghezza dei contenuti, toglie spazio ai
contenuti
• La larghezza totale del box (bordi e
padding compresi) è pari al valore
assegnato alla proprietà width.
PRIMA PARTE: IL BOX MODEL
LARGHEZZA E ALTEZZA
• Se non si specifica la larghezza (width) dei contenuti del box, questo si
allargherà (margini compresi) per riempire tutto lo spazio a sua
disposizione
• Se non si specifica la altezza (height) dei contenuti del box, questo si
espanderà in verticale il minimo possibile per ospitare gli oggetti al suo
interno
• La larghezza e la altezza del box possono essere espresse:
• In percentuali rispetto alle dimensioni del box contenitore
• Tramite le unità di miusra em, px, (ex, pt, mm)
• Tramite il valore auto
PRIMA PARTE: IL BOX MODEL
LARGHEZZA E ALTEZZA
• Quando si specifica la larghezza di un box, questa diviene
indipendente dalla dimensione effettiva dei suoi contenuti
• Internet Explorer per Windows in realtà allarga il box quando i suoi contenuti (ad
esempio un’immagine o una stringa molto lunga) eccedono la larghezza del box
• È possibile anche indicare una larghezza minima e una
larghezza massima tramite le proprietà min-width e maxwidth, ma Internet Explorer (Win/Mac) non supporta tali
proprietà
PRIMA PARTE: IL BOX MODEL
LARGHEZZA E ALTEZZA
• Quando si specifica l’altezza di un box questo non si espanderà per
ospitare eventuali contenuti che richiedono maggiore spazio
• Per ottenere un simile comportamento esiste infatti la proprietà minheight, ma questa non è supportata né da Internet Explorer né da Safari.
Esiste anche la proprietà max-height ma presenta le stesse
incompatibilità di min-height
• A meno di altre dichiarazioni, IE/Win interpreta la proprietà height come
fosse min-height
• Quando espressa in ‘%’, l’altezza di un box si riferisce all’altezza
esplicitamente del box genitore, quando definita tramite la proprietà
height