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

FORMATTARE LE LISTE DI LINK  MENU 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; }

FORMATTARE LE LISTE DI LINK  MENU 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!

Ricalcare la grgilia di impaginazione TAG <div> e CSS Ricalcare la grgilia di impaginazione

UNA STRUTTURA PER I CONTENUTI 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

IL BOX MODEL Ogni box è caratterizzato da 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 <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 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