In questo CODE-IT mostreremo come centrare un box all'interno della nostra pagina, come creare una colonna con gli angoli arrotondati, come selezionare porzioni di pagina e come inizializzare le nostre pagine in maniera uniforme e pulita.

Centrare un box e' meno ovvio di quanto non possa sembrare. Il nostro primo esempio ci aiutera' a comprendere come si possono impostare i margini del box e posizionarlo al centro indipendentemente dalle dimensioni dello schermo su cui verrà visualizzato il nostro lavoro.

Innanzitutto definiamo l'altezza della pagina con l'attributo height posto al 100%. Successivamente andiamo a descrivere il nostro box con id uguale a centered, e definiamo la larghezza e l'altezza tramite le proprieta' width ed height. A questo punto poniamo il nostro box al centro della pagina grazie agli attributi top e left uguali al 50%. Se visualizziamo la nostra pagina vedremo che il box è comunque spostato verso il margine a sud est della nostra pagina.

Per completare l'effetto è sufficiente stabilire dei margini per il box centered uguali alla meta' dell'altezza e alla meta' della larghezza, in modo che il nostro box si collochi esattamente nel centro della pagina. Tutto questo diventa ancora piu' utile quando inseriamo la proprieta' position uguale ad absoute. Questa fa si che il nostro box si collochi al centro indipendentemente dal resto del contenuto del foglio.

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

div#centered {
   display:     block;
   width:       300px;
   height:      200px;
   border:		1px solid black;
   position:    absolute;
   top:         50%;
   left:        50%;
   margin:      -100px 0 0 -150px;
   background:  #ECECDC;
}

Esistono diversi modi per creare un box con angoli arrotondati. Noi abbiamo scelto di mostrare come creare una colonna dal contenuto variabile e dalla larghezza fissa.

Come prima cosa abbiamo realizzato un'immagine trasparente, larga quanto desideriamo sia largo il nostro box. Le abbiamo anche associato un effetto di ombra per rendere piu' gradevole il tutto.

Anche in questo caso è il css a far la parte piu' importante del nostro codice. Avremo un box di classe modular con dentro un altro box. Descriviamo il contenitore con classe modular con una larghezza fissa e un'immagine di sfondo che verrà inserita con le clausule no-repeat, bottom e left. In questo modo l'immagine viene collocata sullo sfondo, non viene ripetuta e prende la posizione in basso a sinistra.

La parte superiore del nostro box invece prende la stessa identica immagine di sfondo ma utilizza le proprieta' repeat-x, top e left. In questo modo viene collocata in cima a sinistra e viene ripetuta esclusivamente in orizzontale. L'unione delle due e la trasparenza ci danno quindi questo effetto. Per migliorare i nostri box, potremo fare delle immagini più lunghe o piu' larghe in modo che i contenuti stiano dentro a certi limiti e siano uniformi e ben distribuiti su tutta la pagina.

div.modular {

  width:200px;
  background:url(mod.png) no-repeat bottom left;
  padding-bottom:20px

  }

div.modular div {/*il div dentro a un div con class modular*/

  background:url(mod.png) repeat-x top left;
  text-align:justify;
  padding:15px 20px 0 10px;

  }

Il terzo esempio invece riguarda i selector. Una caratteristica molto importante introdotta dai css e che merita di essere compresa a fondo in modo che anche l'utilizzo dei framework javascript che avete visto in altri CODE-IT, risulti piu' comprensibile.

Quando andiamo a descrivere una pagina html tramite i fogli di stile, non facciamo altro che selezionare delle porzioni di codice che devono essere rappresentate graficamente con delle caratteristiche di layout particolari. E' cosi' che spesso ci ritroviamo a dare a degli elementi la stessa classe di appartenenza per selezionare tramite la notazione punto-nome della classe, tutti gli oggetti che hanno lo stesso valore dell'attributo class all'interno del tag html.

Quando descriviamo un elemento in particolare, andiamo a richiamare quell'elemento tramite l'attributo id e il simbolo cancelletto-valore dell'id. Ma queste caratteristiche, che abbiamo visto anche in altri esempi su CODE-IT non sono tutto cio' che si puo' fare con i fogli di stile. Infatti e' possibile utilizzare dei selettori piu' potenti che vanno a prendere direttamente tutti gli elementi che hanno lo stesso tag all'interno della nostra pagina. Nel nostro esempio abbiamo mostrato come dare uno sfondo nero e una scritta bianca a tutti i tag p, oppure vediamo un tipo di selector piu' potente che va a selezionare esclusivamente gli elementi p che sono direttamente figli del tag body. Come vediamo nel codice, infatti, il secondo paragrafo e' dentro a un elemento div, quindi non e' direttamente figlio di body e quindi non prende le caratteristiche grafiche definite nel css.

body > p {color: white;background:black;}

p {color: white;background:black;}/* tutti i p */

.esempio  {color: white;background:black;}

L'ultimo esempio di questo CODE-IT e' rappresentato dal foglio di stile reset punto css. Questo e' solo uno dei molti fogli di stile reset che si possono trovare su internet.

L'importanza di inserire un foglio di stile di reset in cima ad ogni nostra pagina, e' data dalla diversita' di interpretazione dei pixel nei vari browser. Inserendo un foglio di stile in questo modo riusciamo a inizializzare tutti i browser perchè partano da un punto comune di rappresentazione. Ci sono browser che necessitano di esplicitare i margini a 0 px del nostro contenitore piu' grande, altri che hanno necessita di descrivere alcune caratteristiche delle liste ul. In questo modo vediamo chiaramente la differenza tra la stessa pagina senza il foglio di stile e con il foglio di stile di inizializzazione applicato. Anche i selector che abbiamo visto prima non vengono interpretati nello stesso modo dai browser. Ma conoscerli è utile in quanto i framework javascript rendono crossbrowser anche selctor che non funzionano nativamente.

Uno dei problemi piu' grossi che possiamo avere e' il fatto di non poter visualizzare allo stesso modo la nostra pagina sui diversi browser. Grazie agli esempi che abbiamo visto in questo Code-it, possiamo creare delle pagine semplici che non avranno questo difetto.