Con alcuni parametri CSS si possono preparare delle liste orizzontali e liste verticali con il tag LI.

Interessante soprattutto nel caso che si voglia visualizzare un menu in formato orizzontale o verticale.

Una lista si visualizza orizzontalmente introducendo il parametro “display: inline;” nel file CSS.

La lista in formato HTML con il bordo

La lista visualizzata in un browser con il bordo

Le voci del menu vengono divise tra loro da una linea colorata orizzontale o verticale, a seconda del menu. In questo modo l’ultima voce del menu riceve anche una linea che rimane quasi sola nel vuoto.

Come soluzione si prepara una classe (in questo caso: “noline“) con la quale si indica “border= 0px” e la si introduce nel tag LI dell’ultima voce del menu.

La lista in formato HTML senza bordo

La lista visualizzata in un browser senza bordo

Di seguito una parte del file CSS con le proprietà del menu verticale:

I parametri CSS con bordo per il menu verticale

Di seguito una parte del file CSS con le proprietà del menu orizzontale:

I parametri CSS con bordo per il menu orizzontale

C’è un modo per centrare il testo e le immagine all’interno di una pagina, indipendentemente dalla risoluzione del monitor o dalla grandezza della finestra del browser dell’utente.

Per centrare tutto il contenuto della pagina bisogna introdurre un DIV container nel quale viene introdotto tutto il contenuto della pagina: inizia subito dopo aver aperto i tag body e finisce subito prima di chiudere il tag body.

Il DIV viene formattato con la classe “centrato”, in cui si definisce la posizione assoluta del DIV, la sua larghezza e la sua altezza. Se si vuole centrare il contenuto orizzontalmente si definisce il parametro “left” a 50% e il parametro “margin-left” alla metà negativa della larghezza del DIV. Con questo si fa in modo che il contenuto della pagina rimanga perfettamente centrato anche nel caso che venga variata la dimensione della finestra del browser.

Lo stesso vale nel caso si volesse centrare verticalmente il contenuto della pagina usando i parametri “top” e “margin-top”.

.centrato{
position: absolute;
width: 600px;
height: 400px;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -200px;
}

Il posizionamento degli elementi è uno dei campi di applicazione del CSS, i fogli di stile. Con CSS gli elementi si lasciano posizionare a piacere.

CSS code float left and right

clear

"clear" indica se vicino ad un elemento si possano trovare altri elementi o meno. Possono essere dichiarati i valori: "all", "none", "left", "right" e "both".

display

"display" indica come deve essere visualizzato un elemento. Descrive il tipo di elemento con il quale deve essere visualizzato. Possono essere dichiarati i valori: "block", "inline", "list-item" e "none". Con CSS2 Level 2 si sono aggiunti diversi altri valori.

float

"float" indica se un elemento deve essere scorrevole e dove può o deve esserlo. Possono essere dichiarati i valori: "left" (l’elemento deve scorrere verso sinistra), "right" (l’elemento deve scorrere verso destra) e "none". Lo scorrere si intende che per questo elemento è possibile raggiungere l’elemento successivo nella pagina e passarci sopra o addirittura ridurlo di dimensioni.

height

"height" indica l’altezza di un elemento. Possono essere dichiarati i valori: "auto" (l’altezza deve essere calcolata automaticamente a seconda del contenuto) o un valore numerico esatto (che indica l’altezza fissa).

width

"width" indica la larghezza di un elemento. Possono essere dichiarati i valori: "auto" (la larghezza deve essere calcolata automaticamente a seconda del contenuto) o un valore numerico esatto (che indica la larghezza fissa).

clip

"clip" descrive il piazzamento di una parte di un elemento, la cui proprietà "overview" abbia un altro valore di "visible". In questo caso un elemento contiene un altro elemento il quale potrebbe essere posizionato in modo che si trovi fuori dall’elemento principale. "clip" descrive quindi come il contenuto di questo elemento posizionato debba essere piazzato. Descrive quanto contenuto dell’elemento posizionato sia visibile.

min-height e max-height

"min-height" e "max-height" indicano l’altezza minima e rispettivamente massima di un elemento. Possono essere dichiarati sia valori numerici che percentuali.

min-width e max-width

"min-width" e "max-width" indicano larghezza minima e rispettivamente massima di un elemento. Possono essere dichiarati sia valori numerici che percentuali.

top, bottom, left, e right

"top", "bottom", "left", e "right" sono le caratteristiche principali per il posizionamento degli elementi. Descrivono la distanza dal bordo della finestra della pagina. "top" indica la distanza dell’elemento verso l’alto, "left" verso sinistra, "bottom" verso il basso e "right" verso destra. Possono essere dichiarati valori numerici, percentuali e "auto".

overflow

"overflow" indica come si devono comportare gli elementi che si sovrappongono l’uno sull’altro. Il contenuto si sovrappone quando un elemento è inferiore ad un altro elemento, nel posizionamento però il box del’elemento inferiore si posiziona fuori dal box dell’elemento superiore. Possono essere dichiarati i valori: "auto", "hidden", "scroll" e "visible".

overflow-x e overflow-y

"overflow-x" e "overflow-y" sono simili a overflow. L’unica differenza è che overflow-x descrive la zona nel caso passa sopra orizzontalmente e overflow-y la zona che passa sopra verticalmente.

position

"position" descrive il metodo di posizionamento dell’elemento. Possono essere dichiarati i valori: "absolute", "fixed", "relative" e "static".

visibility

"visibility" dichiara se e come deve essere visualizzato un elemento. Possono essere dichiarati i valori: "collapse" (viene utilizzato per le celle delle tabelle, colonne, gruppo di celle o gruppo di colonne: l’elemento viene eliminato senza che in questo modo venga toccato il layout della tabella), "hidden" (può essere utilizzato con tutti gli elementi: l’elemento non viene visualizzato) e "visible" (può essere utilizzato con tutti gli elementi: l’elemento viene visualizzato).

z-index

"z-index" descrive su quale layer deve essere l’alemento nel caso che più elementi siano l’uno sopra l’altro. Il layer più in alto viene visto, gli altri sotto no.

Un testo delimitato da una casella, magari con un determinato colore ed un angolino di un altro colore, può rendere più simpatico il layout di una pagina.

Per effettuare ciò servono 2 container CSS. Il container esterno determina la larghezza ed il colore di sfondo della casella, così come la formattazione, la scrittura ed altro.

Il secondo container (interno) contiene le istruzioni per l’angolino della casella come la dimensione, il colore ed il posizionamento della stessa all’interno della casella. Con "float" si posiziona la casella a destra ("right").

Per fare in modo che il contenuto (testo) non tocchi il margine destro e sinistro della casella utilizzo "padding" (margine interno). Ma attenzione, se metto "padding" questa istruzione vale anche per il container dell’angolino e quindi mi sposterebbe l’angolino con il valore del margine interno. Per evitare ciò introduco un ulteriore container che contiene le istruzioni del "padding" per il container interno e non per quello esterno.

<div style="width: 260px; border: 1px solid black; background-color: #DEDEDE;font-family: verdana;font-size: 12px;">
<div style="border: 0px solid black;width: 16px; height: 16px;background-color: #FFCC00;float: right;"> </div>

<div style="padding: 10px;">CONTENUTO</div>
</div>

La casella con testo bordo ed angolino viene visualizzata correttamente da tutti i browser.

Nel generare tabelle con CSS si definiscono 2 cose: l’aspetto esteriore del bordo ed il colore o l’immagine di sfondo.

Bordo: la prima e più importante proprietà è "border-collapse" che descrive il comportamento del bordo. Ci sono due possibilità: con il valore "collapse" due bordi vicini vengono uniti in uno (non c’è spazio tra i due bordi). Con il valore "separate" ogni cella come ogni tabella prende un determinato spazio.

Esempio:

<style type="text/css">
<!-
table, td { border: solid 1px red; }
table { border-collapse: separate; border-spacing:3px;}
->
</style>

Come si può vedere c’è anche la proprietà "border-spacing", con la quale si definisce lo spazio tra i bordi (quando "border-collapse" è impostato su separate).

Immagine o colore di sfondo: le proprietà "background-image" e "background-color". Come valore si prende l’URL o il codice del colore. In CSS gli URL vengono impostati all’interno di url().

Esempio:

<style type="text/css">
<!-
th { background-color: white; font-weight: bold; }
table { background-image: url (backgroung.gif); width: 400px;}
->
</style>

Si possono anche disattivare le celle vuote con la proprietà "empty-cells". Come valore: "hide" (per nasconderle) o "show".

Esempio:

<style type="text/css">
<!-
table, td, th { border: solid 1px red; }
table { border-collapse: separate; border-spacing:3px; empty-cells: show;}
->
</style>

Con la propietà "caption" (poco usata) si hanno dei titoli per la tabella. Con "caption-side" si definisce la posizione del testo. Proprietà: "top", "bottom", "left" e "right".

Esempio:

<table style="caption-side: bottom;" border="1">
<caption>firma</caption>
<tr>
<td> ... </td>
</tr>
</table>

Allineamento del testo: si ha con la proprietà "text-align": destra, sinistra, centrato o giustificato.

Con la proprietà CSS table-layout: fixed non è più il contenuto della colonna che ne determina la larghezza. Con questa proprietà il browser controlla la larghezza che si è data nel valore di width del CSS. In questo caso la larghezza della colonna non è più calcolata automaticamente.

Con alcuni comandi in CSS si può stampare una pagina con margine sinistro e/o destro oppure con un altro colore rispetto a quello del video.

Le pseudo classi :left e :right servono a definire le varianti del documento quando vi sia una interruzione di pagina nel caso si stampi il documento.

Queste 2 pseudo classi descrivono come sia il margine del documento nel caso lo stesso venga stampato come pagina sinistra (:left) o destra (:right).

Questa funzione è interessante nel caso si voglia bucare il margine del foglio stampato per introdurlo in una teca e non bucare (eliminare) delle lettere dello stesso.

Questo è il codice CSS da introdurre nella pagina.

Per il margine sinistro:

@page: left { margin-right: 3cm; margin-left: 2cm; }

Per il margine destro:

@page: right { margin-right: 2cm; margin-left: 3cm; }

Per stampare il testo di una pagina con scritta nera su sfondo bianco, anche se la pagina ha la scrittura di un altro colore, si può utilizzare un comando CSS. Si possono utilizzare formati CSS per tipi di output diversi (stampante, video).

@media screen{
body {background-color:#003300;}
p {color:#CCFFCC;}
}
@media print{
body {background-color:#FFFFFF;}
p {color:#000000;}
}

Per il video (@media screen) si può mettere il colore del testo su un verde chiaro (#CCFFCC) ed il colore di sfondo su un verde scuro (#003300).

Se la pagina venisse stampata (@media print) allora il testo verrà stampato in nero ed il colore di sfondo sarà bianco.

In codice HTML non si ha la possibilità di influire sulla distanza da avere tra una riga scritta ed un’altra.

Come soluzione si può utilizzare un’immagine trasparente di 1×1 px. Ma la soluzione migliore si ha utilizzando una proprietà in CSS.

Per la definizione dello spazio tra una riga ed un’altra si usa line-height.

Si consiglia uno spazio che sia 1,5 volte la grandezza della scrittura. Si utilizza l’unità di misura em, la quale corrisponde all’unità di misura della scrittura.

p {font-size: 10px; line-height: 1,5em;}

1,5em corrispondono quindi a 15 px se si utilizza una scrittura con 10 px.

E con il tag HR
Introducendo il tag hr in una pagina viene introdotta anche una nuova linea e lo spazio superiore ed inferiore al tag sono predefiniti. Con l’introduzione di questo style CSS inline si può ridurre il margine superiore di 20 pixel:

hr style="margin: -20px"

Con questo non viene ridotto però anche il margine inferiore, per ridurre il quale bisogna introdurre nuovamente lo stile con valore negativo bel nell’elemento html successivo.

Lo sfondo delle pagine può essere impostato in 2 modi: impostando un colore o un’immagine. E questo di solito si imposto nel codice HTML. Ma si può utilizzare anche Cascading Stylesheets (CSS).

Nel file CSS esterno introdurre:

body {background-color:#000099;}
per impostare un colore di sfondo
body {background-image: url("background.jpg");}

per impostare un’immagine di sfondo.

Di solito l’immagine è più piccola della finestra del browser. E l’immagine si ripete verso destra e verso il basso. Ma se non si volesse ripetere l’immagine di sfondo,

background-repeat:no-repeat;

e l’immagine apparirà nell’angolo sinistro in alto.

Impostando il formato:

background-repeat:repeat-x;

e

background-repeat:repeat-y;

l’immagine si ripete in una sola direzione, verso destra (x) o verso il basso (y).

Si può anche associare un colore di sfondo:

body {background-image: url("background.gif");
background-repeat:repeat-x; background-color:#000099;}

Se si volesse lasciare l’immagine fissa, sempre ferma anche se il testo si scrollasse verso il basso, con

background-repeat:no-repeat;

si fa in modo che l’immagine non si ripeta.

Per centrare:

background-position: center center;

il primo parametro centra in orizzontale, il secondo in verticale.

background-attachment:fixed;

fissa l’immagine in una posizione.

Per fissare l’immagine in una posizione determinata:

background-position: right bottom;

oltre a center ci sono i parametri top, bottom, left e right.

Per fissare preciso sui pixel

background-position: 500px 30px;

fissa l’immagine 500 px da sinistra e 30 px dal margine superiore. Il primo valore è orizzontale, il secondo in verticale.

Per fissare l’immagine relativamente alla grandezza della finestra del browser:

background-position: 80% 10%;

80% da sinistra e 10% dall’alto in basso.

Sono possibili anche dei valori negativi, per lasciare una parte dell’immagine fuori dalla finestra:

body {background-image: url("background.gif");
background-position: -50px 50%;}

I valori standard delle distanze tra i diversi elementi di una pagina non vengono interpretati ugualmente dai diversi browser, per cui le pagine possono essere viste in un modo diverso a seconda del browser utilizzato.

Per esempio: se non vengono definiti i margini (margin) con Internet Explorer l’elemento body viene posizionato più a destra e più in basso rispetto all’angolo superiore sinistro della finestra di come viene visualizzato con Mozilla o Opera.

Con un unico comando CSS si possono portare tutti i valori di tutti gli elementi a 0 per tutti i browser, così che la base di partenza del layout sia uguale per tutti.

Per fare questo si definisce una classe con il segno *, le cui proprietà si riferiscono a tutti gli elementi.

Per definire le distanze interne ed esterne di tutti gli elementi a 0 bisogna codificare:

*
{margin: 0px;
padding: 0px}

Nella pagina mettete testi importanti, liste di link o riassunti di notizie in infobox. Questi possono essere preparati o con campi di una tabella o con un div.

Una classe di esempio potrebbe essere:

.box { float: left; width: 20%; height: 40%; margin: 5px; background: #CCCCCC; border: solid thin black; color: black;}

Il riferimento float dirige il flusso del testo intorno all’infobox. Con gli altri parametri viene definita la grandezza ed il colore.

Il box lo introducete nella pagina con la riga seguente:

<div class="box"> testo dell'infobox </div>