Bambang Scrap's Code » HTML http://bambangriadi.com/br Mengumpulan Sesuatu Yang Berserakan Tue, 01 Jun 2010 02:06:11 +0000 http://wordpress.org/?v=2.5 en Membuat vertical text dengan css di firefox tidak jalan http://bambangriadi.com/br/2008/10/membuat-vertikal-text-dengan-css-di-firefox-tidak-jalan/ http://bambangriadi.com/br/2008/10/membuat-vertikal-text-dengan-css-di-firefox-tidak-jalan/#comments Mon, 20 Oct 2008 13:50:47 +0000 admin http://www.bambangriadi.com/br/?p=116 Ada kalanya kita ingin membuat vertikal text, namun ternyata kode css yang ada tidak bisa berjalan mulus di browser firefox, kode css berikut :

Quick Code


<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..

]]> http://bambangriadi.com/br/2008/10/membuat-vertikal-text-dengan-css-di-firefox-tidak-jalan/feed/ Perbedaan properti display dan visibility pada css http://bambangriadi.com/br/2008/09/perbedaan-properti-display-dan-visibility-pada-css/ http://bambangriadi.com/br/2008/09/perbedaan-properti-display-dan-visibility-pada-css/#comments Fri, 26 Sep 2008 13:42:03 +0000 admin http://www.bambangriadi.com/br/?p=102 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)

Quick Code


<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

]]> http://bambangriadi.com/br/2008/09/perbedaan-properti-display-dan-visibility-pada-css/feed/ Mengatasi masalah bugs z-index pada elemen select di IE 6 http://bambangriadi.com/br/2008/08/mengatasi-masalah-bugs-z-index-pada-elemen-select-di-ie-6/ http://bambangriadi.com/br/2008/08/mengatasi-masalah-bugs-z-index-pada-elemen-select-di-ie-6/#comments Sun, 24 Aug 2008 18:19:06 +0000 admin http://www.bambangriadi.com/br/?p=66 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…

]]> http://bambangriadi.com/br/2008/08/mengatasi-masalah-bugs-z-index-pada-elemen-select-di-ie-6/feed/