Onsitus.it:
css web designer (creazione siti web, personalizzazione template, conversione da psd a xhtml) - flash designer (banner pubblicitari, animazione flash, introduzione flash)

home servizi portfolio chi sono css3 css tutorials css template css menu contatti sitemap

CSS3 multi-column

Pagina di prova delle proprietÓ css3 per il modulo multi-column / Testing page for the property css3 multi-column

CompatibilitÓ: Safari e Firefox con equivalenti css3 -webkit e -moz

Compatibility: Safari and Firefox with equivalent css3 -webkit and -moz

Ultimo aggiornamento / Last update: 05/09

IT: Articolo completo - EN: Full article

Regole css di base / Basic css rules:

.multi_column_css3{
border: 1px solid gray;
padding: 20px;
width: 800px;
}

column-count: 3;

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

3 colonne specificate. La larghezza delle colonne si adatta automaticamente allo spazio disponibile

3 columns specified. The width of the columns adapts itself to the available space

column-width: 150px;

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Colonne di 150px specificate. Il numero di colonne si adatta automaticamente allo spazio disponibile

Column of 150px specificied. The number of columns adapts itself to the available space

column-gap: 20px; column-count: 3;

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

3 colonne specificate con uno spazio di 20px tra di loro. La larghezza delle colonne si adatta automaticamente allo spazio disponibile

3 columns specified with a space of 20px in between them. The width of the columns adapts itself to the available space

column-rule: 2px solid black; column-gap: 20px; column-count: 3;

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Una riga nera continua di 2px. Questa riga verticale si posiziona esatamente in mezzo dello spazio tra le colonne. Non visualizzato su Firefox.

A solid black line of 2px. This vertical line is positioned exactly in the middle of the space in between the columns. Not viewed on Firefox.

La seguente proprietÓ css3 column-span non Ŕ supportata / the following property css3 is not supported:

#multiColumn h2{column-span: 2;}

Sono un elemento h2 attraverso 2 colonne

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Il contenuto dell'elemento h2 dovrebbe coprire la larghezza di 2 colonne

The content of the h2 element should cover the width of 2 columns

home servizi portfolio chi sono css3 css tutorials css template css menu contatti sitemap

Onsitus.it: css web designer (creazione siti web, personalizzazione template, conversione da psd a xhtml) - flash designer (banner pubblicitari, animazione flash, introduzione flash)