EdwinLab » Programming

Position an Image Outside of Its Container

maolana — Sun, 14 Jun 2009 16:20:53 +0000

I have some problem when doing CSS positioning between header image and the image under it. The problem is the image look cutting off.

After search on Google I got solution from Stack Overflow blog.

The solution is so simple we only have to put a relative position:

position: relative;
top: -Xpx;
z-index: 99;

Where -X is however much it takes to get it to peek out of the DIV.

Now my header looked perfect now.

CSS Framework dengan 960 Grid System

maolana — Fri, 22 May 2009 07:10:54 +0000

Tiga bulan belakangan ini saya mulai serius menekuni bidang Web Development. Salah satu tempat belajar favorit saya yaitu di NetTuts. Saya menyarankan Anda mengunjungi site ini, karena banyak sekali ilmu yang Anda kan dapatkan, mulai dari HTML, jQuery, PHP dan lain-lain tentang Web Development.

Dalam mempelajari sesuatu saya memang lebih suka menggunakan media audio visual ketimbang membaca karena dengan audio visual (menurut saya) lebih mudah dan cepat memahami pelajaran. Buku tentu saja penting sebagai referensi, namun perlu banyak waktu untuk mempelajarinya lewat textbook. Kalo saya lebih suka menyimpannya secara digital. Nah, di NetTuts Anda dapat belajar visual dengan pakarnya, dan Anda juga bisa langsung berinteraksi melalui blognya.

OK, Salah satu pelajaran yang sedang saya pelajari yaitu CSS Framework menggunakan 960 Grid System.

Apa itu 960 Grid System?

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. Read more.
– http://sonspring.com/journal/960-grid-system

Jadi secara garis besarnya 960 Grid System ini adalah suatu cara membangun web dengan cepat menggunakan kolom-kolom yang dirancang sedemikan rupa menggunakan CSS. Dimensi yang digunakan yaitu 12 dan 16 kolom. Sebagai contoh visual Anda dapat lihat di http://960.gs/demo.html

Ok, bagi Anda yang “ngebet” ingin melihat bagaimana cara kerja sistem ini, Anda bisa lihat tutorialnya yang dipresentasikan oleh Jeffrey Way di bawah ini.

Setelah mempelajari Video diatas sangat jelas Framework ini dapat meng-cut waktu Anda membangun sebuah website menggunakan CSS. Yang menjadi tantangan selanjutnya adalah bagaimana memadukan desain yang Anda buat menggunakan Adob Phostohop/Illustrator menggunakan sistem ini. Saya akan lanjutkan di tulisan berikutnya mengenai ini.

Selamat belajar dan mencoba. Everyone is Designer!

Resourcses:

http://nettuts.com/videos/screencasts/a-detailed-look-at-the-960-css-framework/

http://960.gs/

http://blog.themeforest.net/resources/html-css-php-and-jquery-killer-tutorials/

Drop Down Menu Over Flash

maolana — Fri, 09 Jan 2009 16:35:06 +0000

I got problem when coded a flash movie near my drop down menu at http://www.ssj-logistics.com. The drop down menu always behind the flash.

Then I searched on Google and found the solution here http://www.daniweb.com/forums/thread51184.html

Do step below on flash code:

1. Add the following parameter to the OBJECT tag:

2. Add the following parameter to the EMBED tag:

wmode=”transparent”

I tested on Firefox 3.0.5 its worked but failed with Explorer version 8 any suggest for Explorer?

Inline-PHP

maolana — Mon, 19 Nov 2007 07:10:56 +0000

Jika tulisan [exec]echo “Hello World!”;[/exec] terlihat maka inline PHP berhasil. Jika tidak… kenapa ya?.

[ngedit lagi] Kembali ke Wordpress.. aha… ternyata tulisan Hello World! muncul berarti Inline PHP berhasil. Apa sih Wordpress Inline PHP itu? adalah sebuah script yang dibuat oleh Blog@CodeXpress yang bertujuan agar code PHP dapat di inline di post Wordpress. Wah thanks berat buat CodeXpress. Saatnya melihat source programnya untuk dipelajari. I love opensource…

Test lagi ah…

PHP Code:
echo date(‘l dS \of F Y h:i:s A’);

Result:
Today is…. [exec] echo date(‘l dS \of F Y h:i:s A’);[/exec]

Selamat bereksperimen…

Wordpress Developer Cheatsheets

Edwin Maolana — Tue, 25 Sep 2007 00:11:25 +0000

I found an useful link for WP developer. This link linked you to Headzoo blog that give you a wiki(Cheatsheet) for WP Plugin Developer and WP Theme Developer. To download just right click and save the image to your computer. OK Devo’s !! dont cheat when you test

WP PluginCheasheet

WP Theme Cheatsheet