hisman.org » trik http://hisman.org webdesign source and tutorial Thu, 11 Feb 2010 14:35:35 +0000 http://wordpress.org/?v=abc en hourly 1 Membuat horizontal menu dengan CSS http://hisman.org/membuat-horizontal-menu-dengan-css.html http://hisman.org/membuat-horizontal-menu-dengan-css.html#comments Wed, 15 Oct 2008 02:58:59 +0000 hisman http://hisman.org/?p=75 Horizontal menu tau khan?? Contohnya klo di blog ini tuh menu yang ada di pojok kanan atas. Jadi kita akan coba buat menu kayak gitu dengan CSS (tapi sederhana dulu ya).

Sebenernya sich cara untuk ngebuat menu kayak gitu gak pake CSS juga bisa, contohnya aja kamu bisa pake flash, trus bisa juga pake HTML aja. Tapi yang lebih banyak di pakai untuk saat ini ya yang pake CSS, karena katanya sich lebih search engine friendly.

Seperti biasa kita buat file HTMLnya dulu. Isinya kayak gini :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horizontal Menu</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Product</a></li>
  </ul>
</div>
</body>
</html>

Kalau diperhatikan, ada tag <ul> sama <li> ya? Tag-tag itu gunanya untuk ngebuat list (klo di Microsoft word itu namanya bullet).

Ngapa kita pake list untuk ngebuat menunya?

Karena agar menu yang kita buat itu lebih search engine friendly. (katanya sich google lebih menyukai situs dengan menu yang seperti itu).

Klo pake list itu khan jelek ya hasilnya (trus ke bawah lagi bukan horizontal). Nah kita pake CSS untuk ngebuat menu itu ke samping (horizontal).

Ini CSSnya :


#nav ul{
    display:block;
    margin: 0px;
    padding: 0px;
}
#nav li{
   float:left;
   list-style-type:none;
   padding:3px 5px 3px 5px;
   margin:1px;
   border:#CCCCCC 1px solid;
}
#nav li a{
   text-decoration:none;
}
#nav li:hover{
   background:#00FFFF;
}

Saya jelasin satu-satu ya?

Yang pertama, coba kamu liat di selector #nav ul, di situ ada property display yang valuenya block. Gunanya tuh untuk ngebuat tag <ul> yang tipenya itu adalah inline element ke block element (seperti div).

Update :

tag <ul> itu ternyata merupakan block element, jadi sebenarnya property display nya tidak perlu digunakan. Sorry, saya salah.. Maklum newbie. hehe…

Trus, di selector #nav li ada property float yang gunanya untuk ngebuat menu yang tadinya vertikal menjadi horizontal. Di situ juga ada property list-style-type yang valuenya none gunanya untuk menghilangkan bullet yang ada. Trus ada border buat ngasih bordernya ada margin dan padding juga.

Untuk yang #nav li a, di situ ada property text-decoration valuenya none. Gunanya untuk menghilangkan garis bawah pada linknya (khan secara default tag <a>membuat tulisannya berwarna biru dan bergaris bawah).

Yang terakhir itu selektornya ditambahin :hover, gunanya buat apa?

Jadi gini, selektor yang terakhir khan begini #nav li:hover, nah ketika #nav li nya di sorot sama mouse backgroundnya berubah menjadi biru. (seperti animasi lah)… coba kamu liat yang udah jadinya di sini. Dan juga klo mo download file jadinya di sini.

Update :

#nav li:hover tidak terbaca di IE6, klo tidak salah. Soalnya hover di IE6 cuman untuk tag <a></a> jadi #nav li:hover nya bisa diganti dengan #nav a:hover

Gimana? Setelah di desain pake CSS agak bagus dikit khan tampilannya, walaupun masih standarlah, kamu bisa ngembangin sendiri, misalnya dengan menambahkan gambar sebagai background pada listnya.

]]> http://hisman.org/membuat-horizontal-menu-dengan-css.html/feed 18 Membuat halaman web berada di tengah-tengah browser http://hisman.org/membuat-halaman-web-berada-di-tengah-tengah-browser.html http://hisman.org/membuat-halaman-web-berada-di-tengah-tengah-browser.html#comments Sat, 20 Sep 2008 01:30:22 +0000 hisman http://hisman.org/?p=69 Sebenernya ada banyak cara biar halaman web yang kita buat terlihat berada di tengah-tengah browser. Tapi saya akan jelasin satu cara aja yang sering dipake sama para web designer, dan cara ini lebih kompatibel di kebanyakan browser.

Kita mulai ya… Coba kamu salin kode ini ke notepad trus simpen dengan nama tengah.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Tengah</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="wrapper">

<h1>berada di tengah browser khan</h1>

</div>

</body>

</html>


Nah, sekarang buat CSSnya. CSS kita letakin di luar file HTML yang tadi karena di file HTML di atas udah diletakin tag <link href=”style.css” rel=”stylesheet” type=”text/css” /> (tapi harus satu folder ya)
Oke sekarang salin kode CSS ini ke notepad juga dan simpen dengan nama style.css


body{
       background:#000000;
}

#wrapper {
      background:#FFFFFF;
      width:700px;
      height:800px;
      margin:auto;
      padding:10px;
}

Coba file tengah.html nya di buka pake browser, gimana??

Oke, ni sedikit penjelasannya :

Di file HTML, kita ngebuat sebuah blok dari tag div yang kita kasih id namanya wrapper. Nah, trus di CSSnya kita atur tag div yang idnya wrapper tadi.

Untuk property background pada tag body dan wrapper dah tau khan fungsinya, trus di wrappernya ada width sama height, klo width itu ngatur lebarnya kesampingnya mo berapa pixel (dalam hal ini saya pake satuan pixel) dan height itu kebawahnya berapa pixel (px).

Trus ada margin:auto , nah property itulah yang ngebuat halaman HTML tadi berada di tengah browser, klo yang terakhir padding:10px; itu buat nentuin jarak dari kotak wrapper tadi ke isinya (dalam hal ini text yang ada) berapa pixel.

Nah, jadi klo kamu naro tulisan atau apapun di dalam tag div yang idnya wrapper tersebut, akan terlihat berada di tengah browser. Dah ngerti khan??

O iya, supaya trik ini berhasil selain kamu ngeset margin:auto ,kamu juga harus ngeset berapa widthnya. Klo contoh di atas saya ngeset widthnya jadi 700 pixel.

Kamu bisa ngedownload file latihan tersebut disini..

]]> http://hisman.org/membuat-halaman-web-berada-di-tengah-tengah-browser.html/feed 7