Hari ini ada seorang desainer dengan id YM cutandfeld yang sudah tidak sabar belajar CSS dan meminta diajarkan tentang layouting dengan CSS. Dengan bantuan Pastie, tool untuk highlighting code, kita bisa mengikuti proses pembelajaran mengenai bagaimana membuat layout sederhana dua kolom dengan CSS. Semoga tutorial dadakan ini bermanfaat

(8:51:36) cutandfeld: io mau belajar layout css nih hari ini sampe jam 1an, tapi bingung mulainya darimana
(8:51:41) cutandfeld: bisa di bimbing
(8:51:47) cutandfeld:
(8:52:38) cutandfeld: sori ga basa basi langsung tembak aja
(8:58:45) siriokun: weiss, sori barusan mandi, hayuk atuh!
(8:59:02) cutandfeld: sok atuh bimbing
(8:59:05) cutandfeld: heh
(8:59:08) cutandfeld: hehe
(9:00:25) siriokun: ok, teorii html dan css sudah dikuasai?
(9:00:39) cutandfeld: sedikit
(9:00:42) cutandfeld:
(9:00:52) cutandfeld: kayanya dari awal aja io, bisi ada yang kelewat
(9:01:03) cutandfeld: masalahnya belajarnya otodidak
(9:01:06) cutandfeld: bisi ada yang kelewat
(9:01:34) siriokun: berarti konsep layout html semantic sudah mengerti ya
(9:02:18) cutandfeld: blum io… dari awal aja
(9:02:45) cutandfeld: belajar nya cuman download css free terus di otak atik
(9:02:47) cutandfeld: gitu hungkul
(9:02:48) cutandfeld:
(9:03:04) siriokun: atau gini aja, topik apa yg paling lu pingin tau?
(9:03:18) cutandfeld: ok ok
(9:03:22) cutandfeld: gini
(9:03:55) cutandfeld: cara table, atauu layer di css
(9:04:08) cutandfeld: ke jauhan ga?
(9:04:16) cutandfeld: atau masih ada yang lebih dasar lagi
(9:04:19) cutandfeld: ?
(9:04:52) siriokun: berarti konsep positioning ya, ok, mari kita mulai
(9:05:09) cutandfeld: siap pa dosen
(9:05:43) siriokun: pertama tentukan doctype
(9:07:06) cutandfeld: dokumen type nya html linkrel ke css gitu
(9:07:10) cutandfeld: maksudnya
(9:07:10) cutandfeld: ?
(9:09:38) siriokun: http://pastie.org/873154
(9:09:59) cutandfeld: ok cek dulu TKP
(9:10:20) cutandfeld: wah editor langsung ya
(9:10:30) siriokun: kita tentukan dg doctype xhtml transitional
(9:10:39) cutandfeld: ok
(9:11:46) cutandfeld: terus
(9:11:51) siriokun: kemudian, kita buat styling default (sementara kita gunakan inline styling biar cepet)
(9:12:07) cutandfeld: sip
(9:12:21) cutandfeld: nah inline style dah tau cara penulisannya
(9:12:25) cutandfeld:
(9:15:25) cutandfeld: cara nulis nya aja tapi
(9:16:35) siriokun: http://pastie.org/873168
(9:18:21) siriokun: kemudian buat tag yg akan diterapkan, misalnya div
<div>
<h1>Belajar Positioning Layout</h1>
</div>
(9:18:45) cutandfeld: itu di dalam body ya
(9:19:19) siriokun: iya
(9:19:48) cutandfeld: sip di coba
(9:19:56) cutandfeld: ini cara penulisan embeded ya
(9:19:58) cutandfeld: >
(9:20:21) cutandfeld: kan kalo inline mah sama kaya sistem penulisan di HTML?
(9:20:27) cutandfeld: atau salah ya
(9:20:30) cutandfeld: :-/
(9:20:34) cutandfeld: ok
(9:20:43) cutandfeld: sambil di coba ya
(9:21:26) siriokun: iya stylenya inline di head, tp nanti bisa kita link ke file
(9:22:04) cutandfeld: sip sip
(9:22:07) cutandfeld: lanjut aja
(9:22:12) siriokun: lanjut ya, kita kasih warna background biar kliatan
(9:22:24) siriokun: trus atur biar rata tengah
(9:22:35) cutandfeld: ok
(9:22:36) siriokun: dg margin:0 auto
(9:22:38) siriokun: http://pastie.org/873179
(9:25:10) cutandfeld: itu backgroun di belakang font nya
(9:25:14) cutandfeld: sip
(9:25:17) cutandfeld: dah di coba
(9:26:41) cutandfeld: kalo <div> tuh nama class buat di atur di atas nya ya,,,p sip
(9:28:27) siriokun: kemudian atur spacing seperti padding dan kita kasih warna putih biar kliatan lebih nyaman di mata, http://pastie.org/873187
(9:29:49) cutandfeld: ok di coba dulu
(9:33:50) cutandfeld: sip io
(9:34:05) cutandfeld: text nya berubah jadi putih semuanya
(9:34:49) siriokun: sip sekarang kita mulai positioning elemen baru, misal dua kolom
(9:35:04) cutandfeld: ok
(9:35:05) cutandfeld: siap
(9:41:06) siriokun: ok, lanjut, kita buat kolom kiri dan kolom konten
(9:41:13) siriokun: http://pastie.org/873199
(9:42:12) siriokun: kolom kiri kita beri background putih dan warna teks biru, agar terlihat kolom bagian kirinya
(9:42:12) cutandfeld: ok
(9:42:15) cutandfeld: di cek dulu
(9:43:45) siriokun: eh misstype di bagian css, .kanan ganti jadi .konten
(9:44:42) cutandfeld: .kiri, .kanan diganti sama .kiri, .content?
(9:44:45) cutandfeld: sip
(9:49:47) cutandfeld: text kanan ga pake kolom ya
(9:49:48) cutandfeld: ?
(9:49:52) cutandfeld: kolom putih
(9:49:53) cutandfeld: ?
(9:50:33) siriokun: kemudian kita perlihatkan overflow yang biasa terjadi dalam positioning layout, yaitu area yg diberi float akan keluar dari elemen yang mengelilinginya, untuk melihatnya tambahkan text sehingga konten di area yg difloat menjadi lebih panjang dari area yg mengelilinginya
(9:53:29) siriokun: http://pastie.org/873210
(9:54:15) siriokun: bukan ga pakai kolom rip tp krn ga dikasih background aja jdnya ga kliatan kolomnya, biar keliatan kita kasih background aja
(9:54:27) cutandfeld: oh gitu ya
(9:54:28) cutandfeld:
(9:54:31) siriokun: misal kita kasih background pink
(9:54:33) cutandfeld: kenapa beda hasil nya ya
(9:54:34) cutandfeld:
(9:54:48) cutandfeld: mari kita cocok kan dulu biar ga terlalu jauh
(9:55:34) cutandfeld: bentar di kopiin dulu
(9:56:31) cutandfeld: wah ga bisa di buka uy
(9:56:32) cutandfeld:
(9:56:40) cutandfeld: nanti di kopiin ke yang tadi aja
(9:56:41) cutandfeld: ya
(9:57:22) cutandfeld: http://pastie.org/873213
(9:57:27) siriokun: agar area kiri tidak keluar jalur seperti yg kita lihat di http://pastie.org/873210 maka kita perlu menambahkan overflow:hidden pada area yg mengelilinginya
(9:57:29) cutandfeld: ini ada beberapa di tambahin
(9:58:51) siriokun: http://pastie.org/873216
(10:00:26) siriokun: kmu bueda hasilnya krn divnya dikasih class kontent, bukannya konten T_T
(10:01:12) cutandfeld: oh iya
(10:01:14) cutandfeld:
(10:01:20) cutandfeld: sip
(10:02:18) cutandfeld: io punten
(10:02:26) cutandfeld: coba ulangi fungsi float
(10:02:28) cutandfeld: teh
(10:03:52) siriokun: tambahkan overflow:hidden di area yg mengelilingi area yg difloat:
.syarip {
background:#3CF;
color:#fff;
margin:0 auto;
padding:10px;
width:960px;
overflow:hidden
}
(10:04:07) siriokun: http://pastie.org/873216
(10:04:56) cutandfeld: wah keren io
(10:05:03) cutandfeld: udah bisa 2 kolom ya
(10:05:07) cutandfeld: dan rapih
(10:05:09) cutandfeld: ok
(10:05:38) cutandfeld: sebeluim lanjut, di kasih latihan dulu ya setengah jaman…
(10:05:50) cutandfeld: takutnya
(10:05:52) cutandfeld: jadi puyeng
(10:05:56) cutandfeld: kebanyakan
(10:05:58) cutandfeld:
(10:06:04) cutandfeld: biar di latih dulu setengah jaman
(10:06:07) cutandfeld: OK
(10:06:21) cutandfeld: gimana?
(10:06:35) cutandfeld: atau masih ada beberapa langkah lagi? sebelum latihan?
(10:07:48) siriokun: rio rasa cukup untuk basic layout dua kolom
(10:08:01) cutandfeld: sip
(10:08:06) cutandfeld: setengah jaman di coba dulu ya
(10:08:10) cutandfeld: dan di kembangkan
(10:08:20) cutandfeld: nanti hasil nya di laporin ke rio
(10:08:22) cutandfeld: ok
(10:09:15) cutandfeld: makasih pisan tutorial nya…. nge bantu bnangetttt
(10:09:43) siriokun: sip2, senang bisa membantu
(10:10:07) siriokun: eh, jadiin postingan ah di 80tasks nyehehehe
(10:10:13) cutandfeld:
(10:10:15) cutandfeld: oOK
(10:10:20) cutandfeld: sip keren tuh
(10:10:27) cutandfeld: ngebantu buat yang baru belajar layout

Berikut Hasil akhir Tutorial CSS Positioning 2 Kolom.

---

Posted by Rio - http://siriokun.com/