almuth.web.id » HTML dan CSS http://www.almuth.web.id sekedar tempat berbagi Tue, 15 Jun 2010 08:52:38 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Membuat tampilan dua kolom yang fleksibel http://www.almuth.web.id/2008/12/15/membuat-tampilan-dua-kolom-yang-fleksibel.html http://www.almuth.web.id/2008/12/15/membuat-tampilan-dua-kolom-yang-fleksibel.html#comments Mon, 15 Dec 2008 15:10:07 +0000 almuth http://www.almuth.web.id/?p=62 Bagaimana membuat tampilan website dua kolom yang fleksibel? Yang saya maksud tampilan yang fleksibel adalah tampilan website yang bisa melebar dan menyempit sesuai dengan ukuran layar browser. Dengan menggunakan tabel masalah ini dengan mudah ditangani, tetapi bagaiman jika tidak menggunakan tabel? sesuai dengan tren desain saat ini yaitu tableless alias tanpa table. Hal inilah yang akan saya bahas pada tulisan ini.

Misalnya kita akan membuat tampilan website dengan dua kolom fleksibel yang dilengkapi dengan header dan footer dan area utama berada di sisi kanan seperti pada gambar berikut.

layout2kolom

Untuk membuat dua kolom yang fleksibel kita bisa menggunakan margin negatif. Margin negatif memungkinkan area utama menjauh dari sisi browser dan memberikan tempat untuk bagian samping (sidebar).

Kode HTML

Pertama kita buat kode html untuk merepresentasikan layout seperti pada gambar di atas.

<div id="header">HEADER</div>
<div id="content-wrapper">
	<h1>Lorem Ipsum</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mauris nulla, sollicitudin at, lobortis ac, sollicitudin a, ipsum. Sed nec urna. Nunc varius. Aliquam sit amet enim. Donec lorem. Sed hendrerit nisl ac ligula. Etiam faucibus lectus vel ipsum. Praesent tincidunt, risus quis interdum iaculis, justo tellus posuere dui, vel interdum libero purus venenatis sem. Curabitur dictum, lacus at imperdiet ultrices, nulla dui consectetur ligula, tincidunt rutrum enim elit ac est. Aliquam erat volutpat. Nulla ornare. Donec euismod tortor vel urna. Nullam vel nisi non orci volutpat semper.</p>
	<p>Aliquam erat volutpat. In accumsan tempus est. Etiam id elit nec ligula suscipit convallis. Aenean et risus non massa sodales scelerisque. Vestibulum a nunc nec sapien lacinia tristique. Phasellus ullamcorper pede at arcu. Nulla vel nisi vitae diam aliquet pretium. Nullam condimentum. Pellentesque molestie ullamcorper nulla. Aliquam sodales. Nullam mattis libero at libero. Praesent vehicula consectetur neque. Suspendisse id nunc at quam eleifend placerat.</p>
	<p>Donec quis ante a ligula congue luctus. Suspendisse arcu dolor, blandit et, ornare non, tincidunt nec, eros. Morbi nec nisl nec sapien ultricies porttitor. Fusce eu pede vitae velit euismod vulputate. Curabitur vehicula, urna non laoreet ornare, odio diam feugiat sem, sit amet lobortis est elit et nunc. Maecenas ut orci vitae quam sodales facilisis. Duis augue lorem, fringilla eget, mollis vel, imperdiet nec, magna. Sed cursus sapien a augue. Maecenas lorem. Morbi porta leo. Phasellus vitae quam. Aliquam erat volutpat. Integer massa nibh, lacinia sed, vulputate sed, bibendum consectetur, nibh. Fusce cursus tempus diam.</p>
</div>
<div id="sidebar">
	<h2>Bagian Samping</h2>
	<ul>
		<li>Link 1</li>
		<li>Link 2</li>
		<li>Link 3</li>
	</ul>
</div>
<div id="footer">FOOTER</div>

Silahkan lihat contoh 1 untuk melihat tampilan kode html tersebut. Pada tampilan kode di atas tampak bahwa bagian ini (area utama) berada di atas bagian samping. Kita akan buat bagian isi berada di sebelah kanan sedangkan bagian samping berada di sebelah kiri. Untuk membuat bagian isi fleksibel, logikanya adalah bagian isi mempunyai lebar yang merupakan sisa dari lebar layar dikurangi lebar bagian samping. Misalkan bagian samping mempunyai lebar 200px, maka bagian ini mempunyai lebar 100% – 200px. Dengan menggunakan margin negatif kita bisa membuatnya.

Kode CSS

Kita akan buat kode css dengan ketentuan sebagai berikut, bagian samping berada di sisi kiri dengan lebar 200px, bagian isi berada di sisi kanan dengan lebar 100%-200px, bagian header berada di atas dan bagian footer berada di bawah. Pada bagian samping kita kasih float:left untuk membuatnya berada pada sisi kiri dan pada bagian isi kita kasih float:right untuk membuatnya berada pada sisi kanan. Pada bagian ini kita tambahkan margin negatif supaya bagian samping bisa berada di samping bagian isi dan kita berikan margin-left:-200px.

#header{
	background:#c5c5c5;
}
#content-wrapper{
	width:100%;
	float:right;
	margin-left:-200px;
}
#sidebar{
	width:200px;
	float:left;
	background:#cfcfcf;
}
#footer{
	background:#c5c5c5;
	clear:both;
}

Hasil penambahan css tersebut dapat dilihat pada contoh 2. Tampak pada contoh 2 bahwa bagian samping sudah berada di sisi kiri, tapi ada masalah karena pada contoh 2 terlihat bahwa bagian samping menumpuk pada bagian isi. Untuk mengatasinya kita tambahkan sebuah div pada bagian isi dengan memberikan margin-left:200px pada div tambahan ini. Dan kode htmlnya seperti berikut.

<div id="content-wrapper">
	<div id="content">
		<h1>Lorem Ipsum</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mauris nulla, sollicitudin at, lobortis ac, sollicitudin a, ipsum. Sed nec urna. Nunc varius. Aliquam sit amet enim. Donec lorem. Sed hendrerit nisl ac ligula. Etiam faucibus lectus vel ipsum. Praesent tincidunt, risus quis interdum iaculis, justo tellus posuere dui, vel interdum libero purus venenatis sem. Curabitur dictum, lacus at imperdiet ultrices, nulla dui consectetur ligula, tincidunt rutrum enim elit ac est. Aliquam erat volutpat. Nulla ornare. Donec euismod tortor vel urna. Nullam vel nisi non orci volutpat semper.</p>
		<p>Aliquam erat volutpat. In accumsan tempus est. Etiam id elit nec ligula suscipit convallis. Aenean et risus non massa sodales scelerisque. Vestibulum a nunc nec sapien lacinia tristique. Phasellus ullamcorper pede at arcu. Nulla vel nisi vitae diam aliquet pretium. Nullam condimentum. Pellentesque molestie ullamcorper nulla. Aliquam sodales. Nullam mattis libero at libero. Praesent vehicula consectetur neque. Suspendisse id nunc at quam eleifend placerat.</p>
		<p>Donec quis ante a ligula congue luctus. Suspendisse arcu dolor, blandit et, ornare non, tincidunt nec, eros. Morbi nec nisl nec sapien ultricies porttitor. Fusce eu pede vitae velit euismod vulputate. Curabitur vehicula, urna non laoreet ornare, odio diam feugiat sem, sit amet lobortis est elit et nunc. Maecenas ut orci vitae quam sodales facilisis. Duis augue lorem, fringilla eget, mollis vel, imperdiet nec, magna. Sed cursus sapien a augue. Maecenas lorem. Morbi porta leo. Phasellus vitae quam. Aliquam erat volutpat. Integer massa nibh, lacinia sed, vulputate sed, bibendum consectetur, nibh. Fusce cursus tempus diam.</p>
	</div>
</div>

dan kode CSS tambahannya adalah

#content{
	margin-left:200px;
}

Hasil penambahan ini dapat dilihat pada contoh 3. Jreng-jreng… akhirnya jadi juga deh tampilan dua kolom yang fleksibel, gak percaya? coba aja browsernya dikecilin trus digedein lagi, terlihat kan bagian isinya menyempit dan melebar menyesuaikan dengan lebar layar browser.

Trus bagaimana dong kalau mau bikin bagian sampingnya di sisi kanan. Gampang aja, tinggal kita ganti untuk #sidebar nilai float kita ganti menjadi float:right, untuk #content-wrapper nilai float kita ganti menjadi float:left, margin-left kita ganti menjadi margin-right dan untuk #content margin-left kita ganti menjadi margin-right. Lengkapnya seperti berikut.

#header {
	background:#c5c5c5;
}
#content-wrapper {
	width:100%;
	float:left;
	margin-right:-200px;
}
#content {
	margin-right:200px;
}
#sidebar {
	width:200px;
	float:right;
	background:#cfcfcf;
}
#footer {
	background:#c5c5c5;
	clear:both;
}

Dan hasilnya dapat dilihat pada contoh 4.

]]> http://www.almuth.web.id/2008/12/15/membuat-tampilan-dua-kolom-yang-fleksibel.html/feed 4 Membuat form tanpa table munggunakan CSS http://www.almuth.web.id/2008/07/11/membuat-form-tanpa-table-munggunakan-css.html http://www.almuth.web.id/2008/07/11/membuat-form-tanpa-table-munggunakan-css.html#comments Fri, 11 Jul 2008 15:28:54 +0000 almuth http://www.almuth.web.id/2008/07/11/membuat-form-tanpa-table-munggunakan-css.html Sekarang ini trend desain web adalah tanpa table alias tableless. Mengapa tableless? katanya sih load-nya jadi lebih ringan dibanding dengan table (saya sendiri belum ngebuktiin seberapa besarkah perbedaannya). Selain itu mendesain sebuah web tanpa table jauh lebih fleksibel karena kita bisa memindahkan kolom dari kanan ke kiri atau sebaliknya dengan hanya mengubah CSS-nya tanpa mengubah code HTML-nya.

Salah satu komponen dalam sebuah halaman web adalah form isian. Nah bagaimana membuat form isian tanpa table. Berikut adalah contoh bagaimana membuat form isian tanpa table menggunakan CSS.

Kode CSS

<style type="text/css">
body{font-family:Arial, Helvetica, sans-serif; font-size:12px;}
 
label{float:left; width:150px; font-weight:bold;}
 
input, textarea, select{margin-bottom:10px; border: 1px solid #b9c7b0; padding:3px;}
 
input, textarea{width:330px;}
 
textarea{height:100px;}
 
small{display:block; padding-left:150px;}
 
.checkbox{width:2em; border:none; padding:0; margin:0;}
 
.button{margin-left:150px; margin-top:15px; width:120px; font-weight:bold; background:#2B5401; color:#fff; font-size:14px;}
 
br {clear:left;}
</style>

Kode HTML

<h2>Contoh Form tanpa table menggunakan CSS</h2>
<form action="" method="post">
<label for="name">Nama</label> <input type="text" name="name" id="name" /><small>Wajib diisin</small><br />
 
<label for="email">Email</label> <input type="text" name="email" id="email" /><small>Wajib diisin</small><br />
 
<label for="comment">Komentar</label> <textarea name="comment" id="comment" rows="5" cols="100"></textarea><small>Wajib diisin</small><br />
 
<label for="aggree">Setuju dengan Terms</label> <input type="checkbox" name="aggree" id="aggree" class="checkbox" /><br />
 
<input type="submit" name="task" value="Submit" class="button" />
</form>

Dan hasilnya dapat dilihat disini.

]]> http://www.almuth.web.id/2008/07/11/membuat-form-tanpa-table-munggunakan-css.html/feed 4 Submit form sederhana dengan ajax menggunakan mootools http://www.almuth.web.id/2008/04/30/submit-form-sederhana-dengan-ajax-menggunakan-mootools.html http://www.almuth.web.id/2008/04/30/submit-form-sederhana-dengan-ajax-menggunakan-mootools.html#comments Wed, 30 Apr 2008 15:49:53 +0000 almuth http://www.almuth.web.id/2008/04/30/submit-form-sederhana-dengan-ajax-menggunakan-mootools.html Saat ini ajax merupakan teknologi dalam bidang web yang sedang naik daun. Load yang lebih cepat karena tidak perlu meload semua halaman menjadi salah satu keunggulan dari teknologi ajax ini. Saat membuat website direktori saya coba untuk menerapkan teknologi ajax ini pada website tersebut. Emang tidak semua menggunakan ajax tetapi hanya pada form daftarkan website saya gunakan teknologi ajax untuk mensubmit form tersebut.

Saya menggunakan mootools sebagai framework javascript yang cukup mudah untuk digunakan. Kamu dapat membaca postingan ini untuk mengenal lebih jauh tentang mootols. Kamu dapat mendownload mootools di sini. Ada dua cara yang dapat kita digunakan untuk mensubmit form dengan ajax menggunakan mootools. Sebelum membahas kedua cara tersebut hal yang perlu disiapkan adalah file untuk form dan file action. Contoh file form adalah sebagai berikut.

1
2
3
4
5
6
7
8
9

<div id="response"></div>
<form action="action.php" method="post" name="form" id="form" onsubmit="submit_form(); return false;">
		<label for="name">Nama: </label>
<input name="name" size="30" id="name" type="text" />
 
		<label for="name">Alamat email: </label>
<input name="email" size="30" id="email" type="text" />
<input name="task" id="task" value="Submit" type="submit" />
	</form>

dan contoh file action adalah sebagai berikut.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?php
if( $_POST ){
	if( trim($_POST['name']) == '' ){
		echo 'Silahkan masukkan nama Anda.';
	}
	elseif( trim($_POST['email']) == '' ){
		echo 'Silahkan masukkan alamat email Anda.';
	}
	else{
		// kamu dapat melakukan aksi di sini, misal-nya masukin ke database atau yang lain.
		echo 'Terima kasih telah mengisi form. Berikut adalah data Anda:';
		echo 'Nama Anda: '.$_POST['name'];
		echo 'Email Anda: '.$_POST['email'];
	}
}
?>

1. Cara pertama adalah menggunakan fungsi javascript
Cara ini adalah dengan membuat fungsi javascript untuk melakukan action ketika form disubmit. Contoh fungsi tersebut adalah:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function submit_form(){
	var fn = function(){
		$('task').disabled=false;
		$('response').removeClass('ajax-loading').addClass('response');
	}
 
	var html = "Harap menunggu...";
	$('response').removeClass('response').addClass('ajax-loading').setHTML(html);
	$('task').disabled=true;
	var options = {};
	options['update'] = 'response'; // id div yang akan di tulisi response dari action
	options['onComplete'] = fn;
	options['evalScripts'] = false; //jika respon mengandung javascript berikan nilai true
	$('form').send(options);
}

Jika menggunakan cara ini maka kamu harus menambahkan onsubmit=”submit_form(); return false;” pada form kamu. Contohnya sebagai berikut.

1
2

<form action="action.php" method="post" name="form" id="form" onsubmit="submit_form(); return false;">
</form>

2. Cara kedua adalah menggunakan window.domready
Cara ini adalah menambahkan event submit pada form menggunakan domready. Contohnya sebagai berikut.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

window.addEvent('domready', function(){
	$('form2').addEvent('submit', function(e){
		e = new Event(e).stop();
		var fn = function(){
			$('task2').disabled=false;
			$('response2').removeClass('ajax-loading').addClass('response');
		};
 
		var html = "Harap menunggu...";
		$('response2').removeClass('response').addClass('ajax-loading').setHTML(html);
		$('task2').disabled=true;
 
		var options = {};
		options['onComplete'] = fn;
		options['update'] = 'response2';
		$('form2').send(options);
	});
});

Jika kamu menggunakan cara ini maka kamu harus menambahkan id pada form, misalnya

1
2

<form action="action.php" method="post" name="form2" id="form2">
</form>

Kamu dapat melihat contoh penerapan metode tersebut di sini. Atau kamu juga dapat mengunduh contoh tersebut di sini.

]]> http://www.almuth.web.id/2008/04/30/submit-form-sederhana-dengan-ajax-menggunakan-mootools.html/feed 7