FORMATTARE LE LISTE DI LINK  MENU

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:activeper 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 tipoblocco: 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 tipoinline: 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 ulil rispettivo selettore con la propertydisplay: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 tipofloat: 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 • Larghezza dello spazio per i contenuti (width) • Altezza dello spazio per i contenuti (height) • Spazio fra contenuti e bordi (padding) • Bordo (border) • 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 max-width, 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à min-height, 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

FORMATTARE LE LISTE DI LINK  MENU