Dasar Layout 2 kolom dengan CSS

Selamat Malam sodara ! setelah sekian lama hilang dari peredaran akibat kesibukan di dunia nyata yang tiada akhirnya :D~~ , akhirnya kita dapat bertemu dan bertegur sapa kembali disini :D~~ . Semenjak muncul nya istilah Web 2.0 yang di populerkan oleh Tim O’Reilly pada tahun 2004 , Para web master dan Web designer seakan berlomba2 dalam membuat design maupun aplikasi yang interaktif , menarik , serta efisien dalam penggunaan script .

Jika dulu para pengembang web menggunakan HTML murni sebagai layout nya , maka saat ini porsi CSS lebih banyak diterapkan dalam mendesign sebuah website . Ok , penulis kira cukup sudah kata2 pendahuluan nya sampai disini :D~~ .

Kini kita akan mencoba untuk membuat sebuah layout website 2 kolom sederhana dengan menggunakan CSS . Namun sebelum kita membahas lebih jauh , penulis akan menjelaskan sebuah aturan , tata cara , atau apalah namanya :D~~ yang ada di dalam CSS . Aturan yang di maksud disini adalah “float” . apa itu “float” ??? float artinya mengambang. Setiap elemen CSS yang didefinisikan (diberi rule) float, akan mengambang di atas objek yang sudah ada dengan mengambil posisi dari pojok box model induknya. dan terus mengalir zigzag ke kanan (Z).

Mungkin seperti itu aja penjelasan dari penulis , untuk dokumentasi lebih lengkap nya , anda dapat menuju ke W3Schools Online Web Tutorial🙂
pada bagian CSS Floating yang ada di sana . Sekarang kita lanjut ke bagian coding :D~~ . Buatlah terlebih dahulu sebuah file *.html . Nantinya Kita akan memerlukan seksi (div) di dalam file *.html tersebut🙂 . Berikut ini contoh code html penulis buat :

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8´´>
<meta name=”author” content=”bufferdie”>
<meta name=”description” content=”bufferdie adalah seorang manusia tampan dan baik hati ..”>
<link rel=”stylesheet” href=”slack.css” type=”text/css” media=”screen” />
<title>bufferdie love m… :D~~</title>
</head>
<body>
<div id=”init3″>

<div id=”init1″>
<b>Header Disini Lho !</b>
</div>

<div class=”clear”></div>

<div id=”isi”>
<p><b>Bagian Isi nya di mari lho .. :)</b></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam
purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor. Nunc iaculis, nibh non iaculis aliquam,
orci felis euismod neque, sed ornare massa mauris sed velit. Nulla pretium mi et risus. Fusce mi pede, tempor id, cursus ac,
ullamcorper nec, enim. Sed tortor. Curabitur molestie. Duis velit augue, condimentum at, ultrices a, luctus ut, orci. Donec
pellentesque egestas eros. Integer cursus, augue in cursus faucibus, eros pede bibendum sem, in tempus tellus justo quis
ligula. Etiam eget tortor.</p>
</div>

<div id=”samping”>
<b>Menu</b> Letaknya Di Mari
</div>

<div class=”clear”></div>

<div id=”bawah”>
<p><b>Hak Cipta</b> Sih di mari biasanya .. :)</p>
</div>

</div>
</body>
</html>

Mungkin anda merasa bingung , knapa anda tidak menemukan Tag <table></table> pada code diatas .
Yups , Dalam Web 2.0 pengaturan sebuah layout halaman Web tidak lagi di tangani oleh html ,
melainkan di tangani oleh seorang CSS , huehue .. :D~~ .
Jika sudah anda ketikan code sperti diatas , kini anda dapat langsung mengatur layout nya
dengan CSS seperti code di bawah ini :

/*
Design by : bufferdie
inspirate by : m…
name : dasar layout 2 kolom dengan css
*/

body {text-align: center;}
p {text-align: center;}

#init3 {margin: 0 auto; width:760px; text-align: left;}

#init1 {width: 100%; height: 70px; color: #3cc000; text-align: center;}

#isi {float: left; width: 540px;}

#samping {float: right; width: 200px;}

#bawah {width: 100%; height: 50px;}

#init1,#isi,#samping,#bawah {border: 1px red solid}
#isi,#samping {min-height: 300px;} /* ni buat IE 7 kebawah */
.clear {clear: both; height: 20px;}
b { color: red; }

Ada 2 cara untuk menggunakan css yaitu dengan memasukan code nya kedalam file html dengan Tag <style> /*code css*/ </style> Atau dengan membuat file css yang di panggil dengan tag <link rel> . Pada contoh di atas tadi , penulis menggunakan cara yang kedua yaitu dengan <link rel>🙂 . Jika anda telah mengikuti coding seperti di atas , maka anda akan melihat hasil nya seperti di bawah ini :

Yups , dengan dmikian berakhir lah artikel kali ini ..
akhir kata , selamat mencoba , semoga bermanfaat dan sampai jumpa lagi .. :D~~

Sumber : Nightwalker Team

About heni
I ♡ movie, traveling, fruits Worry less smile more fell happy anyway :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: