Cataloged Autobiography BERKENAAN SAYA  Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca.. | The Readable Journal MENEROKA ARTIKEL  Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini | Astrolab Tool KATEGORI ARTIKEL  Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini |
 BINA BERBILANG COLUMN DALAM BLOG POST |
| July 30, 2009 Posted by: Fauzie |
Berbilang Kolum atau "Multiple column" bermaksud mengatur teks dalam bentuk seperti surat khabar. Dalam web design, web designer membina "layout" seperti surat khabar ini dengan dua cara: dengan menyatakan (set) lebar (width) untuk setiap column dan juga dengan menyatakan jumlah column yang diperlukan.
Bagi cara pertama ia dilakukan dengan menggunakan column-width dan untuk cara yang kedua ia dibuat dengan kod column-count. Diantara satu column dengan satu column yang lain, ia dipisahkan dengan "space"/"gap" dengan menggunakan kod column-gap.
Dengan CSS3, kita mampu membuat layout seperti surat khabar. Contoh di bawah ini adalah multi-column layout dengan memperkenalkan column-width.
Ini ialah contoh multi-column. Ia boleh dilihat dengan jelas dalam browser Firefox dan Safari.
Wouldn't it be great to have the text of an article is arranged over several columns just like newspaper and print layout method? And how about doing it with just simple CSS codes? The CSS3 specification has made it possible to have multi-column layout module.
The width is done by column-width and the number of column is done by column-count. To have space between column, we need to specify a width for column-gap.By defining column-rule, we can have a line in between columns.
One of the best features about this CSS3 module is that, the ability for content to flow from one column to another within liquid layouts.
Layout Module
Browser support may be patchy, but by employing CSS rule prefixes such as -moz- and -webkit- in the style sheet, a multi-column layout in website presentation is possible by defining a width for each column, or by defining a number of column.The width is done by column-width and the number of column is done by column-count. To have space between column, we need to specify a width for column-gap.By defining column-rule, we can have a line in between columns.
One of the best features about this CSS3 module is that, the ability for content to flow from one column to another within liquid layouts.
Kod-kod CSS3 dan HTML untuk membuat multi-column ini adalah seperti berikut. Dalam contoh ini kita tidak meletakkan kod untuk lebar atau width. Ini adalah kerana content boleh "mengalir" (flow) secara otomatik dari satu kolum ke kolum lain(layout dalam bentuk liquid).
<html>
<head>
<style type="text/css">
.multiplecolumns {
-moz-column-width: 140px;
-webkit-column-width: 140px;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-moz-column-count: 3;
-webkit-column-count: 3;
-moz-column-rule: 1px solid #ddccb5;
-webkit-column-rule: 1px solid #ddccb5;
border:1px solid red;
padding: 10px;
}
</style>
</head>
<body>
<div class="multiplecolumns">Wouldn't it be great to have the text of an article is arranged over several columns just like newspaper and print layout method? And how about doing it with just simple CSS codes? The CSS3 specification has made it possible to have multi-column layout module.<h2>Layout Module</h2>Browser support may be patchy, but by employing CSS rule prefixes such as -moz- and -webkit- in the style sheet, a multi-column layout in website presentation is possible by defining a width for each column, or by defining a number of column.
The width is done by <span style="font-style: italic;">column-width</span> and the number of column is done by <span style="font-style: italic;">column-count</span>. To have space between column, we need to specify a width for <span style="font-style: italic;">column-gap</span>.By defining <span style="font-style: italic;">column-rule</span>, we can have a line in between columns.
One of the best features about this CSS3 module is that, the ability for content to flow from one column to another within liquid layouts. </div>
<body>
</html>
<head>
<style type="text/css">
.multiplecolumns {
-moz-column-width: 140px;
-webkit-column-width: 140px;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-moz-column-count: 3;
-webkit-column-count: 3;
-moz-column-rule: 1px solid #ddccb5;
-webkit-column-rule: 1px solid #ddccb5;
border:1px solid red;
padding: 10px;
}
</style>
</head>
<body>
<div class="multiplecolumns">Wouldn't it be great to have the text of an article is arranged over several columns just like newspaper and print layout method? And how about doing it with just simple CSS codes? The CSS3 specification has made it possible to have multi-column layout module.<h2>Layout Module</h2>Browser support may be patchy, but by employing CSS rule prefixes such as -moz- and -webkit- in the style sheet, a multi-column layout in website presentation is possible by defining a width for each column, or by defining a number of column.
The width is done by <span style="font-style: italic;">column-width</span> and the number of column is done by <span style="font-style: italic;">column-count</span>. To have space between column, we need to specify a width for <span style="font-style: italic;">column-gap</span>.By defining <span style="font-style: italic;">column-rule</span>, we can have a line in between columns.
One of the best features about this CSS3 module is that, the ability for content to flow from one column to another within liquid layouts. </div>
<body>
</html>
Kod berwarna maroon adalah kod-kod CSS dan kod berwarna biru mewakili kod-kod HTML.
Nota: Multi-column ini lebih sesuai dan kemas bila dilihat melalui browser Firefox
