Un container non è altro che una descrizione in codice del bordo. Uno spazio vuoto nel quale il browser non riconosce niente. Come container si possono utilizzare i tag: <div>, <p> o <span>.
Un container viene identificato tramite un id, ha una larghezza (width:300px), un’altezza (height:140px) e un z-index (sequenza).
Il valore standard per la posizione e la grandezza è impostato in pixel (px). Si possono utilizzare anche altre unità: pc (pica), pt (point), in (inch), mm (millimetri), cm (centimetri) o % (percentuale) e em.
Esempio
<div id="layer1" style="position: absolute; width: 300px; height: 150px; z-index:1; background-color: #000000; border: 1px solid #FFFFFF;"></div>
Con left: 60px e top: 40px si imposta il margine rispettivamente verso sinistra in alto. In questo modo un container può essere posizionato perfettamente.
Esempio
<div id="layer1" style="position: absolute; width: 300px; height: 150px; z-index:1; background-color: #000000; border: 1px solid #FFFFFF; left: 60px; top: 40px;"></div>
Centrare: non vi è un comando diretto per centrare un layer in css. Però si può centrare un testo o un\’immagine. Quindi si introduce “text-align: center” nel tag “body“. In questo modo però tutti gli elementi nella pagina vengono centrati. Per evitare ciò si imposta che il contenuto del layer venga impostato a sinistra con “text-align: left“. Inoltre si impostano i margini della pagina (margin) su auto.
Codice per il tag “body”:
<body style="margin: 10px 0px; padding: 0px; text-align: center;">
<div id="layer" style="width: 500px; height: 4000px; border: 1px solid #FFFFFF; margin: 0px auto; text-align: left; padding: 8px;">Contenuto del layer</div>
Una classe viene utilizzata in modo generico, può essere presente più volte in una pagina. Un id invece è più speciale, può essere presente solamente una volta in una pagina e nella gerarchia CSS sono più importanti. Un id può essere utilizzato con Javascript e hyperlinks.
<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.