Tutorial HTML dan CSS : Membuat daftar link pada footer

16 Comments

Tutorial kali ini, berupa studi kasus bagaimana cara membuat footer seperti yang terlihat pada banyak situs-situs pada umumnya. Seperti gambar berikut ini:

Tampak sederhana kan. Tetapi yang difokuskan disini adalah penyusunan daftar link pada footer. Dalam kasus ini, penggunaan unordered list (tag <ul></ul>) lebih dianjurkan untuk struktur yang lebih semantik.

Read the rest of this entry »

Mengatasi masalah warna gambar PNG yang berubah di IE

No Comments

Ketika bekerja dengan PNG, terkadang format ini tampil berbeda pada IE dibanding dengan browser lainnya..
Di IE (ditest dengan IE 5.5,6,7) Warna png sedikit melenceng, yaitu lebih gelap. Tentu merepotkan jika kita akan memadukannya dengan bagian gambar lain yang harusnya sewarna. hasilnya akan tampak janggal.. Seperti contoh berikut:

gambar diatas menunjukkan warna pada file png yang seharusnya #2D2D1F ketika dirender di IE, berubah jadi #242417…akibatnya warna jadi tidak pas dengan gambar diatasnya…
Stelah coba cari tau, ternyata hal ini Disebabkan pada file PNG terdapat informasi gAMA, yang diinterpretasikan berbeda oleh IE ketimbang yang seharusnya..
Itulah kenapa cuman di IE warnanya jadi lebih gelap..
Untuk mengatasinya, ada 2 solusi yg bisa dipilih:
Solusi pertama, Gunakan format lain, Jika anda tidak membutuhkan kemampuan khusus milik PNG, maka gunakan format .jpg atau .gif.
Solusi kedua, Jika tidak memungkinkan memakai format lain, misalnya membutuhkan kemampuan alpha transparency yang halus milik format png24 (seperti kasus saya), maka kita bisa memperbaiki file png nya..
menurut tutorial ini atau ini, kita bisa menggunakan tool TweakPNG (gratis, lisensi GPL).
caranya sederhana, yaitu cukup dengan membuang informasi gAMA dari file PNG. Buka file PNG, pilih baris gAMA lalu delete…

masalah pun terselesaikan… :-)

Bikin wordpress theme baru

4 Comments

Kali ini nyobain bikin theme baru.. yang simple2 aja namun rapi dan elegan (halah)…
emang temanya minimalis.. hampir no images, kcuali untuk logo ama faux-background aja.
Sejak lama aku adalah penggemar fixed-width layout, dengan ukuran SVGA-friendly, yaitu resolusi 800×600. Mengingat saat ini resolusi itu udah jarang dipake, udah masuk jaman resolusi 1024 keatas. maka daripada dibilang ketinggalan jaman (huehe), aku mencoba buat yang lebih lebar..
Tapi.. aku ga mau memperlebar area konten utama, alesannya, teks yang terlalu lebar kurang enak dibaca. Itu salah satu aturan usability di web.. Jadi untuk mengisi ruang, sidebarnya aja ditambah..

jreng.. jadilah theme wordpress 3 kolom dengan 2 sidebar.. :-)

langsung pake…

menghilangkan tulisan www.flickr.com di flickr badge..

No Comments

simple kok, tinggal tambahkan atribut visibility:hidden; pada css untuk #flickr_www

#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important; visibility:hidden;}

gatau boleh apa enggak :-D, belum baca term nya se
he he..

padding css di tag IMG gak jalan di IE 6

No Comments

haduh ktemu masalah ini lagi. Ceritanya aku mo bikin bingkai putih dan efek bayangan pada image di flickr badge..
masalahnya di IE 6 tag img gak bisa dikasih padding, so styleku cuman bekerja baik di Opera dan Mozilla

.flickr_badge_image img { background-color:#FFFFFF; padding:6px; border:none; border-right:1px solid black; border-bottom:1px solid black;}

padahal pada CSS box model, box adalah konten area, yang bisa berupa image (berarti tag img khan?)

IE 6 ga taat standar (W3C)?

mungkin hal ini udah banyak dibahas di mana2.. ga tau lah..
yang jelas perbedaan interpretasi tiap browser kadang bikin pusing saat menyeragamkan tampilan di berbagai browser.. atau setidaknya sekedar membuat situs tampil ‘wajar’ di berbagai browser

Opera adalah browser utama yang aku pake, tapi mengingat statistik pengunjung situsku kebanyakan pake IE..makanya aku peduli.. :-(

mudah2an gak terjadi di IE 7, belum dicek sihh :-p

untuk berhak memasang logo valid html & css di situs bayubayu.com, aku masih butuh sedikit tenaga untuk mengeditnya agar lolos validasi markup dan CSS di W3C validator..
mungkin ntar aja ah kalo ada waktu.. hehe..

Flickr Badge bwat dipasang di situs

No Comments

Dari dulu pengen aja masang photo gallery di webku bayubayu.com. banyak koleksi foto2 yang dijepret pake kamera saku pas iseng2 ato pas bareng temen2/keluarga.. hasile ya gitu2 aja sih, jelek2 :-)) maklum bukan fotografer, hehe..
stelah sebelumnya sempet bikin photo gallery sendiri, akhirnya malah enggak jadi aku pake. urusan photo galery diserahin aja ke Flickr http://www.flickr.com yang udah tersohor :-)
alasan utamanya disk space ama bandwidth di hostingku pas2an.. kayaknya ga cukup bwat nampung foto-foto

Thumbnail Foto-foto juga bisa ditampilkan di web/blog kita pake fasilitas Flicker Badge, bisa dicustomize juga
lumayan lama nyari2 alamatnya, akhirnya dapet juga.. disini lho http://www.flickr.com/badge.gne
buat yang punya blog silakan pasang deh

hmm, trus ada Flickr API.. belum eksplorasi lebih lanjut, ah kapan2 aja kalo ada waktu..

Void-system.com

No Comments

Emm, setelah sekian lama akhirnya aku ubah juga desain homepage void-system.com. Situsnya sendiri masih under construction karena menunggu katalog barang.
coming soon.. lah

Oia, void-system adalah clothing company yang didirikan ama Aku dan temen2.. Pengennya untuk
melampiaskan hasrat mendesain yang terkadang menggebu2 (halah), dan.. di media yang bernama kaos.. Jadi dijalanin enjoy aja dan harapannya kami bisa tetep idealis
dalam mendesain.. termasuk enggak ngejiplak mentah2 atau tracing dari barang luar gituu.. enggak lah..

nah.. ntar kapan2 aku update lagi homepagenya dengan desain yg lebih catchy.. (aku enggak puas ama yang sekarang, gara2 kesusu se)..ntar dibuat bergaya grunge and lebih (apa ya namanya, yang jelas rock-metal gitu)..