sering kali teman-teman saya yg baru belajar dan mengenal dunia webdesign bertanya. gimana sih cara bikin menu nya atau ajarin donk bikin menu flashnya dan saya sih dengan enteng nya menjawab : bikin nya sih pake css bukan pake flash soalnya klo pake flash pasti berat load menu nya.

Menu yg sering mereka tanyakan biasanya yaitu menu rollover dimana pada saat kita dekatkan pointer ke atas menunya maka si menu itu akan berubah warna atau berubah gambarnya.

oke untuk lebih detilnya akan saya berikan contoh menu rollover yg sangat dasar sekali yaitu dengan menggunakan element anchor.

<style>

a.menu{
display:block;
background:red;
color:#ffffff;
font-size:18px;
width:200px;
padding-top:20px;
padding-bottom:20px;
text-align:center;
}
a.menu:hover{
background:blue;
}

</style>

dan hasilnya seperti tampak pada gambar

dimana menu default akan berubah warna menjadi biru apabila pointer berada di atas menu tersebut.

ok itu untuk contoh basic nya. skarang kita akan membuat variasi di menunya dengan menambahkan image.

silakan download filenya disini Psd | gif

dimana pada gambar itu terdapat dua gambar yaitu untuk default yg berada di atas dan hover berada di bawah. dan untuk css nya sendiri seperti di bawah ini :

<style>
.navigation{
width:324px;
height:34px;
background: url(bg_menu.gif) no-repeat;
margin:0;
padding:0;
}
.navigation li{
list-style:none;
text-indent:-9999px;
float:left;
margin:0 0 0 0px;
padding:0;
}
.navigation li a{
display:block;
}
.navigation li a.home{
width:77px;
height:34px;
margin-left:23px;
}
.navigation li a.home:hover{
background: url(bg_menu.gif) -23px -34px;
}

.navigation li a.about{
width:104px;
height:34px;
margin-left:1px;
}
.navigation li a.about:hover{
background: url(bg_menu.gif) -101px -34px;
}
.navigation li a.news{
width:93px;
height:34px;
margin-left:1px;
}
.navigation li a.news:hover{
background: url(bg_menu.gif) -206px -34px;
}

</style>

dan untuk bentuk htmlnya sendiri seperti ini :

<ul class=”navigation”>
<li><a href=”#” class=”home”>home</a></li>
<li><a href=”#” class=”about”>home</a></li>
<li><a href=”#” class=”news”>home</a></li>
</ul>

kita akan membuat menu tersebut dengan nama “navigation” dan kita menggunakan element ul li yang di dalamnya terdapat element anchor yg kita beri class di dalamnya supaya kita dapat mengatur bentuk dan tampilan dari element anchor tersebut.

di dalam class “navigation” kita berikan dimensi sesuai dengan ukuran pada gambar yaitu width:324px dan height : 34px lalu margin dan padding :0 supaya tidak ada jarak indent ke dalam.

.navigation{
width:324px;
height:34px;
background: url(bg_menu.gif) no-repeat; /** load image menu **/
margin:0;
padding:0;
}

apabila di dalam class navigation terdapat element li maka akan kita set seperti berikut

.navigation li{
list-style:none; /** untuk menghilangkan tanda dot yang ada di depan text **/
text-indent:-9999px; /** untuk menyembunyikan text supaya tidak tampak pada browser **/
float:left; /** untuk menempatkan posisi element li berada di sebelah kiri **/
margin:0 0 0 0px;
padding:0;
}

dan apabila terdapat anchor di dalam li tersebut akan kita berikan properties display :block; supaya element anchor tersebut berperilaku seperti block box.

.navigation li a{
display:block;
}

dan yg terakhir kita set ukuran dan hover dari tiap anchor yang telah kita beri nama di dalamnya

.navigation li a.home{
width:77px; /** set ukuran dari menu lebar dan tingginya **/
height:34px;
margin-left:23px; /** set jarak menu dari sebelah kiri **/
}
.navigation li a.home:hover{
background: url(bg_menu.gif) -23px -34px;

/** set menu pada saat hover dimana kita set supaya yang tampil adalah gambar yg ada di bawah. **/
}

.navigation li a.about{
width:104px;
height:34px;
margin-left:1px;
}
.navigation li a.about:hover{
background: url(bg_menu.gif) -101px -34px;
}
.navigation li a.news{
width:93px;
height:34px;
margin-left:1px;
}
.navigation li a.news:hover{
background: url(bg_menu.gif) -206px -34px;
}

download hasil akhirnya disini

]]> http://sinzo.wordpress.com/2008/09/21/css-rollover-menu/feed/ 1 sinzo basemenu-300x136 bg_prev menu-300x49 http://sinzo.wordpress.com/2008/03/08/internet-explorer-8-beta-1/ http://sinzo.wordpress.com/2008/03/08/internet-explorer-8-beta-1/#comments Sat, 08 Mar 2008 04:00:35 +0000 sinzo http://sinzo.wordpress.com/?p=54 ]]>

Akhirnya tim IE meluncurkan internet explorer 8 beta 1 pada bulan maret ini, menurut tim IE8 bahwa versi IE8 ini sudah mempunyai beberapa perubahan di bandingkan versi yang sebelumnya dimana IE8 ini sudah mengikuti aturan webstandars dan lebih terfokus kepada developer web sehingga IE8 ini banyak mengalami perubahan baik dari

• Standards support (CSS/HTML)
• Standards support (DOM) and AJAX

seperti di beritakan di blognya bahwa IE8 ini sudah melakukan improve dalam hal rendering content untuk beberapa web standars dalam standars mode dan telah mensupport : URIs, abbr tag, css generate content, display table css properties untuk memperbaiki beberapa bugs css dan html.

IE8 juga telah melakukan beberapa perbaikan di standar support untuk javascript (dom) dan ajax. diantaranya pada behavior getAttribute, setAttribute and removeAttribute.

selain improve dari browsernya sendiri IE8 dilengkapi dengan beberapa developers tools untuk memudahkan para developer dalam pencarian bugs di IE8 seperti halnya firefox yang mempunyai developer tools dan firebug yang sangat membantu saya dalam mencari sebuah bugs.

Saya pribadi sih berharap semoga saja IE8 ini dapat lebih baik dari versi sebelumnya dan tidak membuat para developer dan web designer merasa kerepotan dalam membuat sebuah aplikasi berbasis web seperti versi ie yang sebelumnya.

download IE8

Pertama denger sih gak percaya apa emang ada tuh yang namanya css framework, ternyata setelah di telusuri di google ternyata ada juga yang namanya css framework

seperti yang sedang populer sekarang ini yaitu YUI (Yahoo user interface), Blueprint dan YAML(Yet Another Multicolumn Layout).

Saya sih baru nyoba Blueprint klo yang lainnya sih masih blum nyoba. itu juga karena permintaan client yang meminta saya untuk mencoba blueprint.

menurut saya sih blueprint sangat membantu sekali dalam pengaturan sebuah layout dan konten karena blueprint mempunyai berbagai pengaturan blok css yang memungkinkan kita untuk membuat sebuah blok css tanpa perlu harus membuat class dari awal.
seperti pembuatan table dengan menggunakan css sangat mudah sekali hanya dengan menggunakan beberapa class yang ada kita dapat membuat sebuah table dengan css.
cuma kelemahan dalam penggunaan blueprint ini sih hanya dalam pengaturan ukuran layoutnya yang sudah baku dan tidak bisa semau kita.
untuk membuat layout nya sendiri sih kita harus membuat design css kita sendiri dan untuk membuat kontennya barulah kita menggunakan blueprint.

bagi seorang webdesign menurut saya css framework ini sangat membantu sekali dalam pengerjaan website yang menggunakan css. karena dapat mempercepat pengerjaan sebuah web.

situs css frame work:

Blueprint (download)

Yui (download)

Yaml (download)

Untuk membuat Tabs content yang harus kita lakukan adalah membuat tabs menu terlebih dahulu yaitu dengan cara membuat membuat sintak css seperti berikut :

/** My tabs **/

.mytabs{margin:0;padding:0;}

.mytabs ul{margin:0px;padding:0;}

.mytabs li{

list-style:none;

float:left;

font-size:11px;

text-transform:capitalize;

}

.mytabs li a{

display:block;

background:#1b6d69;

color:white;

padding:5px 10px;

border-right:1px solid #ece8d2;

text-decoration:none;

}

.mytabs li a:hover{

background:#C0C992;

color:#1b6d69

}

/** My tabs **/

Pertama kita buat class css yang berisi hirarki dari <ul> dan <li>. Class ” .mytabs ul” dengan sintak css margin:0;padding:0; agar posisi margin tidak bergeser. Class “ .mytabs li” dengan sintak css :

list-style:none; /* untuk meghilangkan tanda bullet */

float:left; /*untuk menempatkan objek ke sebelah kiri atau kanan*/

font-size:11px; /*mengatur ukuran font */

text-transform:capitalize; /* mengatur transformasi dari font */

Class ” .mytabs li a” digunakan apabila ada element anchor <a> di dalam element <li> dan kita atur dengan sintak css :

display:block; /*membuat display sebuah box*/

background:#1b6d69; /* latar warna dari box*/

color:white; /*warna font*/

padding:5px 10px;/*untuk mengatur jarak jarak antara ujung box dengan tulisan dengan menjorok ke dalam*/

border-right:1px solid #ece8d2;/*mengatur warna border dan ketebalannya*/

text-decoration:none; /*untuk menghilangkan garis yg berada di bawah tulisan*/

Class ” .mytabs li a:hover” digunakan pada saat mouse mendekati element anchor <a> dan kita atur dengan sintak css :

background:#C0C992;

color:#1b6d69

setelah selesai lalu kita coba panggil dengan membuat file html yang berisi :

<style>
/** My tabs **/

.mytabs{margin:0;padding:0;}

.mytabs ul{margin:0px;padding:0;}

.mytabs li{

list-style:none;

float:left;

font-size:11px;

text-transform:capitalize;

}

.mytabs li a{

display:block;

background:#1b6d69;

color:white;

padding:5px 10px;

border-right:1px solid #ece8d2;

text-decoration:none;

}

.mytabs li a:hover{

background:#C0C992;

color:#1b6d69

}

/** My tabs **/
</style>
<div class=”mytabs”>

<ul>

<li><a href=”#”>link 1</a></li>

<li><a href=”#”>link 2</a></li>

<li><a href=”#”>link 3</a></li>

</ul>

</div>

Setelah kita berhasil membuat tab menu lalu kita teruskan dengan membuat contentbox untuk isi dari content yaitu dengan membuat skrip css sebagai berikut :

.tabcontent{
clear:both;

/* digunakan apabila ada element yg berada float ke sebelah kiri atau kanan maka dengan menggunakan sintak ini element yg kita gunakan akan berada di bawahnya*/

overflow:auto;

/* digunakan untuk membuat sebuah box menyerupai iframe */
width:auto;
height:10em;
border:1px solid #000;
padding:5px;
margin-top:0px !important;
/** hack di ie6 **/
margin-top:-15px;
/** hack di ie6 **/

}

Setelah selesai membuat contentbox lalu kita coba dan skrip keseluruhannya seperti di bawah ini :

<html>
<head>
<style>
/** My tabs **/
.mytabs{margin:0;padding:0;}
.mytabs ul{margin:0px;padding:0;}
.mytabs li{
list-style:none;
float:left;
font-size:11px;
text-transform:capitalize;
}
.mytabs li a{
display:block;
background:#1b6d69;
color:white;
padding:5px 10px;
border-right:1px solid #ece8d2;
text-decoration:none;
}
.mytabs li a:hover{
background:#C0C992;
color:#1b6d69
}
/** My tabs **/

.tabcontent{
clear:both;
overflow:auto;
width:auto;
height:10em;
border:1px solid #000;
padding:5px;
margin-top:0px !important;
/** hack di ie6 **/
margin-top:-15px;
/** hack di ie6 **/

}
</style>
</head>
<body>
<div class=”mytabs”>
<ul>
<li><a href=”#”>link 1</a></li>
<li><a href=”#”>link 2</a></li>
<li><a href=”#”>link 3</a></li>
</ul>
</div>
<div class=”tabcontent”>
ini adalah isi konten nya
</div>
</body>
</html>