Posts Tagged ‘CSS’

Flex sample for a start

Share More

Untuk iseng saja dan mungkin sedikit bernostalgia, saya coba2 Flex dengan guidance dari rekan kantor (thanks Ted 😛 ). Jadi inilah hasil percobaan pertama (^_^) selamat menikmati (bagi yang mau download sourcenya buat belajar atau sekedar iseng silahkan lihat linknya di bawah).

Saat kuliah dulu saya sangat suka dengan Macromedia Flash. Saya mulai dengan versi 4 yang masih lebih fokus terhadap permainan animasi, terus mengikuti perkembangan ke versi 5 dan sampai beberapa versi berikutnya yang makin canggih dengan ActionScript. Sayangnya berhubung pekerjaan pertama yang saya dapatkan tidak menuntut keahlian di bidang ini, perlahan tapi pasti saya semakin jarang menyentuh Flash.

(more…)

Invisible Text in IE

Share More

Hari ini lagi test kerjaan di IE, keanehan yang sebenernya udah pernah beberapa kali dapet kembali nongol. Entah bin entah kenapa, ada teks yang tiba-tiba saja hilang (invisible) dari pandangan. Bukan sulap, bukan sihir, hanyalah keisengan normal dari perilaku IE. Anehnya, kalau di select atau scroll, teks ini sebenernya ada dan kadang jadi terlihat (visible) kembali.

Utak punya atik, selidak punya selidik, tidak juga kunjung nongol itu teks. Akhirnya mulai tanya om goog-goog (baca: guk guk) seperti biasa. Ada beberapa solusi yang layak di coba, dan akhirnya berhasil juga menggunakan trik solusi dari plone. Buat yang ingin tahu jelas pembahasannya silahkan klik link solusi tersebut.

Saya share intinya saja, kita perlu menambahkan sedikit hack pada css kita, cukup 1 line saja:

* html .visualIEFloatFix { height: 0.01%; }

Kemudian tambahkan class visualIEFloatFix ke layer teks yang tersembunyi tersebut. Kalau belum berhasil, coba tambahkan class tersebut pada beberapa layer lain yang masih berhubungan. Selamat berjuang (^_^)

Min-Width, Min-Height – IE vs FF

Share More

daru dulu ampe sekarang, masalah paling menyebalkan saat bikin css untuk design web itu hasil yang terkadang beda di bermacam browser. Kalo gw sih yang penting css gw tested di Internet Explorer dan Firefox.

Khusus untuk nilai min-width dan min-height, Firefox mengimplementasikannya dengan sangat baik. Jadi kalau kita kasih min-height 200px, ya heightnya minimum bakal 200px, kalo lebih dia akan expand sesuai content. Tapi si IE (gw coba sih yg versi 6) ga kenal ama css yang namanya min-width and min-height. Jadi di IE cukup pake width aja atau height aja, dia akan expand sesuai content. TAPI! kalo kita specify width atau height (seperti maunya IE), Firefox bakal mempertahankan nilai width/height yg kita kasih, dan ga akan expand sesuai contentnya.

So, solusinya? kembali dengan cara lama, kita acak dikit cssnya supaya ada style yg hanya di baca IE. here’s a sample of the result:

.suatu_div {
	width: 500px;
	min-height: 200px;
	margin-left: 25px;
}
* html .suatu_div {
	height: 200px;
}

Contoh diatas akan menghasilkan suatu div memiliki lebar fix 500px, height minimum 200px (bisa expand tergantung isinya) dan margin kiri 25 px.

Centering Div for Firefox vs IE

Share More

Sudah lama nih gak bikin css baru dari awal, kebetulan hari ini mulai buat template untuk kerjaan. Hal yang sudah lama gw temuin dan gw pake tiba2 jadi lupa lagi solusinya. Yah, namanya juga manusia. Mau share aja buat yang mungkin mengalami kendala yang sama, ada saatnya kita ingin memiliki template dengan lebar yang tidak memenuhi browser, misalnya berukuran fix 780 pixel. Pertanyaan berikutnya yang datang saat itu ialah, template kita itu dalam browser ingin terlihat berada di kiri, tengah atau kanan?

(more…)

Table and CSS (div)

Share More

Gw mau share pengalaman gw dalam membangun web nih, khususnya sih dalam tahap Layout Design. Di awal perkenalan dengan HTML, yg gw tau untuk design layout web itu menggunakan table. Kita membentuk isi tabel sedemikian rupa, sehingga sesuai dengan visual yang ingin kita tampilkan. Tapi seiring perkembangan html dan pengetahuan gw sendiri, ada makhluk baru yaitu css yang mulai memegang peranan vital pada pembentukan visual web. Tag table yang begitu sering digunakan kini mulai tergantikan oleh tag div.

Seiring pembelajaran tersebut gw bahkan sempat begitu ngototnya menggunakan css, sampai membuat Grid saja menggunakan div. Syukurlah sekarang gw sudah lumayan insaf dan sadar diri (^_^) Memang penggunaan table untuk layout tidak salah, tapi saat ini sudah ada cara yang lebih baik. (more…)

Form Margin

Share More

Kalau kalian kesal karena timbulnya space (jarak) saat memasukkan tag form di html (terlihat pada browser IE), sehingga merubah tampilan yg sudah ditentukan, caranya mudah untuk mengatasi.

Secara Default (entah kenapa), IE menetapkan Margin untuk tag form. Jadi kita cukup memberikan nilai 0 untuk margin bagi tag html di CSS kita (^_^)

form { margin:0px; }

Gampang toh :p hehe…