Adi Setiawan weblog » css

Workshop Web Development gratis di Surabaya

Thu, 09 Jul 2009 05:44:33 +0000

Mau berkarir di dunia web development? atau sekedar menyalurkan hobi ? kebetulan di Surabaya akan segera diadakan workshop singkat yang terdiri dari kelas web design dan web programming. Tidak dipungut biaya untuk mengikuti workshop yang rencananya akan diadakan di THR mulai tanggal 22 Juli 2009.

Saya sendiri Insya Allah akan kesana kepengen silaturahmi dengan rekan2 yang lain . Keterangan detail bisa dilihat infonya di web PHPUG

happy naked day! :)

Thu, 10 Apr 2008 00:51:24 +0000

it’s CSS naked day 2008

Full height column. CSS & jQuery

Wed, 07 Nov 2007 08:44:09 +0000

Salah satu kelemahan menggunakan div adalah menyamakan tinggi beberapa div untuk kolom serta membuat div tersebut expandable mengikuti tinggi window. Liat screenshot berikut:

Secara default tinggi div kolom berbeda-beda mengikuti isi dari div tersebut. Belum lagi jika tinggi dari div kurang dari ukuran window browser sehingga footer tampak seperti melayang diatas. Ada beberapa teknik tertentu untuk membuat tinggi kolom tampak sama antara lain menggunakan cara faux column. Kali ini kita akan membuat agar semua kolom mempunyai tinggi sama dan jika kurang dari tinggi window browser maka secara otomatis akan menyamakan-nya. Yg kita perlukan adalah jQuery, plugin equalizeCols dan sedikit teknik css. Hasil akhir akan seperti ini:

berikut html & css-nya












	this is header


	
	left column
	
	
	main content
	
	
	right column
	


	copyright info

tidak ada yg spesial di css tersebut kecuali penggunaan float:left pada wrapper. Hal ini dilakukan agar wrapper mengikuti tinggi dari div yg paling tinggi. Pastikan juga jquery dan plugin equalizeCols sudah didownload dan path sudah benar. Sekarang kita bahas sedikit kode javascript diatas.

Seluruh kode ada didalam

$(document).ready(function() {   

});

agar semua berjalan saat document ready. Kemudian kita cek apakah tinggi dari window browser lebih besar dari tinggi body halaman menggunakan:

if ($(window).height() > $('body').height()) {

}

Jika ya maka kita akan menambahkan tinggi wrapper dengan selisih dari tinggi window browser dan body halaman. Untuk mendapatkan tinggi dari element di jquery cukup menggunakan $(element).height(); dalam hal ini

var selisih = $(window).height() - $('body').height();
$("#wrapper").height($("#wrapper").height() + selisih);
$("#sidebar").height($("#wrapper").height());
$("#otherbar").height($("#wrapper").height());

perhatikan bagaimana kita merubah tinggi dari wrapper dengan mudah dengan memasukkan nilai kedalam atribut height() dari wrapper. Terakhir jika ternyata tinggi body halaman lebih besar atau sama dengan tinggi window browser kita menggunakan plugin dari jquery yg berguna untuk menyamakan tinggi dari beberapa div dengan mudah dengan perintah:

$("#wrapper, #sidebar, #otherbar, #contentbar").equalizeCols();

Detail plugin tersebut bisa diliat disini.

Mudah kan? Jika tanpa jQuery, mungkin kode javascript-nya bisa berpuluh2 baris. Menggunakan jQuery, hidup kita jadi lebih mudah

happy jQuerying !

Buku Google & CSS

Thu, 16 Aug 2007 04:45:45 +0000

Buat yg mau nguprek google, buku Google’s pagerank and beyond sangat pas buat anda . Sedangkan buku satunya mengupas tuntas CSS sebagai solusi web standard, recommended book!

jQuery zebra list

Sun, 12 Aug 2007 08:32:12 +0000

Akhir-akhir ini lagi seneng2nya utak-atik jQuery. Penggunaan yg simpel dan mudah membuat banyak orang yg awam di javascript terutama DOM seperti web designer atau hobbyist seperti saya menyukainya. Contoh berikut memperlihatkan bagaimana membuat zebra list dengan mudah dan cepat menggunakan jQuery, unordered list dan sedikit CSS, contoh script diambil dari tutorial di 15 days of jQuery

Demo jQuery zebra list bisa dilihat disini

Tab menu cantik di Mambo CMS

Tue, 17 Apr 2007 06:41:26 +0000

tau tab menu kan? kalo jaman dulu biasanya kita membuat dengan sebuah image yg dimasukkan kedalam column table untuk memposisikan kemudian ditambah javascript utk fungsi hovernya. Saat ini hal kayak gitu udah gak jaman lagi. Sekarang kita bisa pake css utk membuat tab menu dari list markup yg cantik. Ada satu contoh berbagai macam tab menu cantik bisa diliat disini. Dengan sedikit modifikasi di file core Mambo, website mambo-mu juga bisa memiliki tab menu seperti itu.

Kalo kita liat source contoh, ambil contoh di tabs menu J,


  
    Link 1
    Link 2
    Link 3
    Longer Link Text

    Link 5
    Link 6
	Link 7

dan css nya

    #tabsJ {
      float:left;
      width:100%;
      background:#F4F4F4;
      font-size:93%;
      line-height:normal;
	  border-bottom:1px solid #24618E;
      }
    #tabsJ ul {
	  margin:0;
	  padding:10px 10px 0 50px;
	  list-style:none;
      }
    #tabsJ li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsJ a {
      float:left;
      background:url("tableftJ.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 5px;
      text-decoration:none;
      }
    #tabsJ a span {
      float:left;
      display:block;
      background:url("tabrightJ.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#24618E;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac */
    #tabsJ a span {float:none;}
    /* End IE5-Mac hack */
    #tabsJ a:hover span {
      color:#FFF;
      }
    #tabsJ a:hover {
      background-position:0% -42px;
      }
    #tabsJ a:hover span {
      background-position:100% -42px;
      }

seperti terlihat diatas, diperlukan tag span yang disisipkan di dalam tag a. Tanpa span, tab menu tidak bisa dibuat. Di sisi lain, mambo meng output kan list menu tanpa span, sehingga memerlukan sedikit modifikasi. Diasumsikan mambo yg kita gunakan versi 4.6.x. Buka file includes/core.classes.php dan cari fungsi mosGetMenuLink di sekitar line 1612. Fungsi ini berfungsi utk membuat link dari menu item di mambo. di dalam fungsi mosGetMenuLink cari control structure ini

switch ($mitem->browserNav) {
            // cases are slightly different
            case 1:
            // open in a new window
            $txt = ''. $mitem->name .'';
            break;

            case 2:
            // open in a popup window
            $txt = "link ."', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=550'); return false" class="$menuclass" ". $id .">". $mitem->name ."n";
            break;

            case 3:
            // don't link it
            $txt = ''. $mitem->name .'';
            break;

            default:	// formerly case 2
            // open in parent window
            $txt = ''. $mitem->name .'';
            break;
        }

untuk setiap variabel $txt tambahkan tag span di awal setelah opening a dan sebelum closing tag (kecuali utk case 3) sehingga snipper lengkap akan seperti:

switch ($mitem->browserNav) {
            // cases are slightly different
            case 1:
            // open in a new window
            $txt = ''. $mitem->name .'';
            break;

            case 2:
            // open in a popup window
            $txt = "link ."', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=550'); return false" class="$menuclass" ". $id .">". $mitem->name ."n";
            break;

            case 3:
            // don't link it
            $txt = ''. $mitem->name .'';
            break;

            default:	// formerly case 2
            // open in parent window
            $txt = ''. $mitem->name .'';
            break;
        }

that’s all! . sekarang tinggal mempublish menu set yg ada dan rubah menu style ke tipe flat list. Jangan lupa utk mengupdate css style nya agar sesuai dengan id container menu dan path utk image background nya.

Selamat mencoba!!

It’s CSS Naked Day 2007 !

Thu, 05 Apr 2007 06:55:46 +0000

To know more about why styles are disabled on this website on 5th april.visit the

Annual CSS Naked Day website for more information.