Layout con intestazione

Le due colonne sono quasi sempre precedute da una sezione di intestazione comune contenente logo, titolo, sottotitolo, … …      …      …      …      … La sezione #contenuto semplifica il posizionamento delle due colonne precedenti rispetto all’intestazione body {    margin: 0px;    padding: 0px; } #intestazione {   … Leggi tutto

Categorie CSS

Layout 2 colonne

Un layout di un certo successo comprende, oltre alle normali informazioni dall’alto verso il basso, una colonna a sinistra con l’elenco dei link principali, il menu … Meglio resettare le distanze del browser… body {     margin: 0px;     padding: 0px; } Il menu è largo 180 pixel e distante 20 px da … Leggi tutto

Categorie CSS

Layout Position

Si possono specificare le distanze del box dai vicini con top, sopra left, da sinistra right, da destra L’attributo position: absolute specifica che la distanza si riferisce alla finestra del browser (piuttosto che all’elemento parent) 100 pixel dal bordo superiore … 100 pixel dal bordo sinistro … 100 pixel dal bordo destro … Un secondo … Leggi tutto

Categorie CSS

Layout al centro

Una disposizione dei blocchi comune è al centro, cioè con spazio sia a destra che a sinistra div {    width:80%;    margin: auto;    … } Rimane il 10% di spazio automaticamente sia a destra che a sinistra. Purtroppo funziona con Mozilla* ma non con MS IE per il quale è necessario ricorrere a … Leggi tutto

Categorie CSS

Box model

Intervenendo sulla cornice, spazio intorno, distanza tra, … di ogni sezione si crea l’effetto box molto interessante div { border: 4px dashed #000080; margin: 40px; padding: 10px; } Si ottiene che ogni sezione è incorniciata con border: 4px dashed #000080, bordo tratteggiato blu di 4 pixel margin: 40px, margine di 40 pixel (distanza della sezione … Leggi tutto

Categorie CSS