Profi Admin adalah template yang bersih dan sederhana tapi penuh kompleksitas dan pasti sesuai harapan anda. Menu visual yang besar menciptakan navigasi intuitif sementara tab dan submenu yang tersembunyi berstruktur sampai 3 level. Terinspirasi oleh Administrasi pada Wordpress.
Ga nyesel pake template admin ini karena harganya murah meriah ($15 saja)
klik gambar untuk melihat detail template ini
Bagi yang tertarik untuk mendesain admin area, saya rekomendasikan untuk menggunakan Template Complete Liquid Admin Control Panel.
Template ini powerfull dan sudah terintegrasi dengan jquery.
Bolehlah dicoba untuk aplikasi anda. Untuk menggunakannya klik pada gambar.
Ada kalanya kita ingin membuat vertikal text, namun ternyata kode css yang ada tidak bisa berjalan mulus di browser firefox, kode css berikut :
<style type="text/css">
.teksVertical {
writing-mode: tb-rl;
filter: flipH flipV;
letter-spacing:2px;
}
</style>
Kode diatas memang membuat teks tampil secara vertikal di IE, namun di firefox teks tetap mendatar layaknya tak ada style, berikut trik supaya bisa membuat teks vertikal :
1. Jadikan teks menjadi gambar vertikal dengan PHP GD, perintah ImageStringUp.
2. Panggil dengan perintah HTML <img src="gambar.png"/>
Kira-kira Scriptnya begini :
Quick Code
< ?php
header ("Content-type: image/png");
// imagecreate (x width, y width)
$img_handle = imagecreate (15, 220) or die ("gagal membuat gambar");
// ImageColorAllocate (image, red, green, blue)
$back_color = ImageColorAllocate ($img_handle, 153, 204, 255);
$txt_color = ImageColorAllocate ($img_handle, 0, 0, 0);
ImageStringUp ($img_handle, 3, 1, 215,'Test Text Vertical', $txt_color);
ImagePng ($img_handle);
ImageDestroy($img_handle);
?>
Silahkan dicoba sendiri ya..
Sekilas ketika kita membuat kode program HTML dan CSS, properti display = none dan visibility = hidden mempunyai persamaan, yaitu objek menjadi tidak tampak. Sebenarnya kedua properti itu mempunyai perbedaan yang sangat nampak.
Pada properti visibility, jika diberi nilai hidden, objek akan tampak menghilang namun tempatnya tetap terisi dengan blank pada layar karena objek tetap di render.
Pada properti display, jika diberi nilai none, objek menghilang dan tempatnya pun juga tidak ada, karena objeknya tidak di render.
Contoh scriptnya ada dibawah ini (copy dan simpan dengan nama test.html)
<html>
<head>
<title>Perbedaan properti display dan visibility</title>
</head>
<body>
Makanan Buah Kesukaan : <br />
1. Jambu<br />
<span style="visibility:hidden;">2. Semangka<br /></span>
3. Jeruk<br />
4. Anggur<br />
<span style="display:none;">5. Apel<br /></span>
6. Melon<br />
<hr />
Nomor dua pakai visibility => ada tempat kosong (objek rendered) <br />
Nomor lima pakai display => tak ada tempat kosong (objek not rendered)<br />
</body>
</html>
Lihat hasilnya di bawah ini :
Demo
Jika anda suka menggunakan style z-indek untuk membuat layer pada suatu halaman, tentunya ketika layer belakang berupa tag select, maka select tersebut tak dapat ditutupi dan tetep muncul di layer paling atas meski z-index nya di kecilkan.
Hal ini terjadi di IE 6 dan versi oldernya. Nah untuk menyiasati agar tag select berada di belakang layer utama maka trik sederhananya dibelakang layer yang paling atas dibuat <iframe></iframe> jika dideteksi browser yang dipakai adalah IE 6 gunanya untuk menutupi tag select tadi tentunya diset lebih kecil dari layer yang paling atas.
Contoh :
Quick Code
<html>
<head>
<title>Bugs z-index</title>
<style type="text/css">
#adaSelect {
position:absolute;
left:100px;
top:100px;
width:300px;
height:300px;
z-index:1;
}
#fixSelect {
position:absolute;
left:100px;
top:100px;
width:300px;
height:300px;
z-index:3;
}
#fixSelect iframe {
position:absolute;
left:0px;
top:0px;
z-index:2;
filter:mask();
}
</style>
</head>
<body>
<div id="adaSelect">
isi select :
<select name="kota">
<option>Jakarta</option>
<option>Trenggalek</option>
<option>Malang</option>
</select>
</div>
<div id="fixSelect">
<table width="280" border="1" bgcolor="#CCCCCC" cellspacing="0" cellpadding="2">
<tr>
<td>No</td>
<td>Nama</td>
<td>No HP</td>
</tr>
<tr>
<td>1</td>
<td>Bambang Riadi</td>
<td>085678910</td>
</tr>
<tr>
<td>2</td>
<td>Nama kedua</td>
<td>0912898989</td>
</tr>
</table>
<!--[if lte IE 6.5]><iframe></iframe>< ![endif]-->
</div>
</body>
</html>
Karena id=”adaSelect” mempunyai z-index lebih kecil maka yang muncul di layar browser adalah id=”fixSelect”. Ini hanya bermasalah di IE 6 kebawah, IE 7 serta browser lain tak ada masalah dengan z-index pada elemen select.
Selamat mencoba…
RSS 