Perjalanan seorang Herli » html, css & javascript

Minimum Height di CSS

Herli — Tue, 02 Jun 2009 13:03:33 +0000

Setelah lama berkutat dengan transparansi, slicing design kali ini malah menghindari transparansi, yang berarti image nya harus dalam format standard: jpeg atau gif, dan tanpa css transparency sama sekali.

Saya mencoba pakai png dengan transparansi 50%, tapi tetap saya ada kendala dengan browser dengan berbagai macam standard dalam menangani png. Jadi saya memakai cara lain, yaitu dengan mengeset tinggi minimum untuk satu div supaya background image nya tidak terpotong.

Ternyata hanya dibutuhkan 3 baris css !! Dan.. bekerja di semua browser: Firefox 2, Firefox 3, IE6, IE7, IE8, Safari, Chrome, Opera. Sip !! Ini dia yang saya butuhkan.

Saya menemukan solusinya disini.

First things first. Use the “min-height” in your css like this:

.myDiver{ min-height:100px; }

NEXT! Set the regular height to “auto” using the “!important” tag.

.myDiver{ min-height:100px; height:auto !important; }

LAST! Set the regular height (again) but to the minimum height.

.myDiver{ min-height:100px; height:auto !important; height:100px; }

This will keep the div at 100px; and if the content inside of it extends beyond 100px, it will grow. This is true in ALL BROWSERS! Check out this example below:

sdf ffdsa fd
sdf ffdsa fd

sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd

sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd

Hebat yaaaa !! Menyelesaikan masalah saya dalam sekejap! Hanya dengan 3 baris code css !!

Transparansi di CSS untuk semua browser

Herli — Fri, 08 May 2009 08:59:43 +0000

Gara-gara saya mendapat tugas men-slice satu desain yang amat sangat “ajaib”, saya harus mengais-ngais informasi di belantara internet. Untung ada Google yang membuat hidup saya lebih mudah

Akhirnya saya menemukan code yang membantu saya (http://css-tricks.com/css-transparency-settings-for-all-broswers/) membuat transparansi 50%:

.transparent_class {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

Penjelasannya saya kutip langsung dari websitenya:

Here is what each of those CSS properties is for:

opacity: 0.5; This is the “most important” one because it is the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. This would be all you need if all browsers supported current standards. Which, of course, they don’t.

filter:alpha(opacity=50); This one you need for IE.

-moz-opacity:0.5; You need this one to support way old school versions of the Mozilla browsers like Netscape Navigator.

-khtml-opacity: 0.5; This is for way old versions of Safari (1.x) when the rendering engine it was using was still referred to as KTHML, as opposed to the current WebKit.

Benar-benar jitu! Tapi koq pada saat saya coba di IE7, masih tidak jalan ya ?

Nah, ini dia bagian yang nyebelin. Di Internet Explorer, ternyata kita harus menambahkan property width dan/atau height di css nya.Hanya di IE! Di Firefox 3, saya tes, code diatas jalan dengan mulus.

Kenapa sih, semua browser ngotot punya standard masing-masing? Menyusahkan saja! Huh !!

Dropdown menu dengan javascript

Herli — Fri, 05 Sep 2008 04:10:37 +0000

Gara-gara Erwin nanya gimana sih caranya bikin dropdown menu pakai javascript, akhirnya saya jadi ikutan nyari gimana caranya. Saya sebelumnya memang belum pernah tau caranya. Saya hanya tahu selintas, bahwa dropdown menu itu dibuat memakai tag

.

Banyak sekali source dropdown menu dengan javascript yang beredar di internet, tapi saya menemukan 1 yang simpel dan gampang di-customize dan diimplementasi.

Dropdown menu dengan Javascript

HTML code:
CSS:

Javascript code:

Dah, itu saja. Cukup simpel kan, tapi kalau masih bingung juga, bisa download file html contohnya disini. Klik kanan di link-nya, pilih Save Target As.