Box annidati con i css

Nell' esempio che ho creato è stata inserita una gabbia con colore di sfondo grigio, all' interno di quella più grande, con lo sfondo bianco. Mentre il box esterno è un #DIV, quello interno è una classe, in modo tale da poter essere riutilizzata all' interno della stessa pagina più volte. Il codice per il #DIV contenitore è il seguente:

#container {
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: auto;
margin-left: auto;
background-color: #fff;
border: 1px solid #000;
width: 80%;
text-align:left;
}

mentre il codice per la gabbia interna è il seguente:

.boxinterno {
padding: 10px;
margin: 10px 0px 5px 0px;
border: 1px solid #000;
text-align:left;
background-color:#999;
}

Come scritto prima, il secondo codice dichiara una classe e non un box. Se volessi inserire, all' interno di container, un numero imprecisato di gabbie con classe boxinterno, potrei farlo senza nessun problema. Diverso sarebbe, se avessi dichiarato anche il box interno come un #DIV; avrei potuto richiamarlo solo una volta nella pagina XHTML, per via dell' ID univoco. Ho introdotto l' argomento delle gabbie annidate in quanto queste possono tornarci utili quando le utilizziamo ai piedi di un documento. Nell' esempio ho creato due box delle stesse dimensioni. Per far sembrare che si tratti di una unica gabbia, ho impostato a zero i margini inferiori e superiori, inoltre ho eliminato il bordo superiore della gabbia contenente i 3 link. Ecco il codice dei due box:

#container{
padding: 10px;
margin-top: 5px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto;
background-color: #fff;
border: 1px solid #000;
width: 80%;
text-align:left;
}

e questo è il codice della barra di navigazione:

#barranav {
padding: 0px 10px 0px 10px;
margin-top: 0px;
margin-bottom: 5px;
margin-right: auto;
margin-left: auto;
background-color: #fff;
border-top: 0px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
width: 80%;
text-align: right;
font-size:10px;
}

Come si può vedere, possiamo ottenere pagine con risultato pari all' uso con le tabelle, con la differenza (in meglio, secondo me) di una migliore gestione e di un minore peso delle stesse pagine.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati