Halaman

misther-junett.blogspot.com
  • Web
  • misther-junett

    • Rabu, 09 Maret 2011

    CSS Specificity

    CSS Specificity menentukan seberapa spesifik kah sebuah aturan pada CSS. Jika ada 2 atau lebih aturan pada sebuah elemen yang sama, maka aturan paling spesifiklah yang akan dipakai oleh browser.
    Nilai specificity pada CSS bisa dihitung sbb:
    • Element Selector, yaitu selector yang berupa tag-tag html, contohnya div, ul, li, a
      nilai specificity = 1 (0,0,1)
    • Class Selector, yaitu selector yang diawali dengan tanda titik, contohnya .menu untuk elemen dengan class="menu"
      nilai specificity = 10 (0,1,0)
    • ID Selector, yaitu selector yang diawali dengan tanda #, contohnya #sidebar untuk elemen dengan id="sidebar"
      nilai specificity = 100 (1,0,0)

    Contoh 1:
    1
    2
    a { color: red; }
    a { color: green; }
    Kedua selector tersebut memiliki specificity yang sama, karena itu aturan yang akan dipakai adalah yang terakhir (paling bawah), sehingga elemen <a> (link) akan berwarna hijau.
    Contoh 2:
    1
    2
    3
    4
    5
    #sidebar ul.menu li a { color: red; }
    ul.menu li a { color: purple; }
    ul li a { color: green; }
    li a { color: yellow; }
    a { color: teal; }
    Kode di atas adalah beberapa aturan css untuk sebuah elemen link (<a>). Kode htmlnya sbb:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div id="sidebar">
     <h2>Menu</h2>
     <ul class="menu">
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="guestbook.html" style="color:silver">Guestbook</a></li>
     </ul>
    </div>
    Perhitungan specificity nya:
    • #sidebar ul.menu li a
      memiliki specificity = 113
      (1 ID Selector + 1 Class Selector + 3 Element Selector)
    • ul.menu li a
      memiliki specificity = 13
      (1 Class Selector + 3 Element Selector)
    • ul li a
      memiliki specificity = 3
      (3 Element Selector)
    • li a
      memiliki specificity = 2
      (2 Element Selector)
    • a
      memiliki specificity = 1
      (1 Element Selector)
    Dengan melihat perhitungan specificity di atas, maka kita bisa mengetahui bahwa paling spesifik adalah aturan yang pertama. Jadi link akan berwarna merah.
    Selain menggunakan selector, untuk menerapkan css kita juga bisa mendefinisikan inline style, yaitu dituliskan langsung pada tag html menggunakan attribute style, contohnya <a style="color:blue">teks</a>.
    Pengaturan menggunakan inline style akan mengalahkan ketiga jenis selector di atas. Jadi pada contoh tersebut, link guestbook akan berwarna silver.
    Referensi:
    CSS: Specificity Wars
    css specificity wars
    Artikel tersebut akan memberikan pemahaman tentang CSS Specificity menggunakan analogi Star Wars.
    Namun bagi yang tidak mengerti Star Wars, mungkin artikel tersebut bisa memudahkan untuk memahami Star Wars melalui CSS :))
    0 komentar

    Menambah Menu Horizontal Multy Drop Down

    Tips Blog :



    Sudah lama ngak bahas soal tips tips blog. kali ini mencoba membahas satu menu. lumayan suka juga aku sama menu yg satu ini. menu horizontal multy drop down, yach begitu lah blogger sering menyebutnya. sedikit share nih buat teman-teman pendatang baru yang pingin nyoba menu ini.

    pertama sudah pasti pergilah ke blogger melalui account kamu, kalau sudah login klik layout/element halaman --->> EDIT HTML . lalu cari kode ini :
    ]]></b:skin>


    dan tambahkan kode berikut diatasnya



    #NavbarMenu {
    background: #228B22 url(http://i28.tinypic.com/2lk5ukm.jpg) repeat-x top left ;
    width: 100%;
    height: 35px;
    color: #FFF;
    margin: 0;
    padding: 0;
    font: bold 12px Arial, Tahoma, Verdana;
    }
    #NavbarMenuleft {
    width: 865px; /* lebar menu sebelah kiri */

    float: left;
    margin: 0;
    padding: 0;
    }
    #NavbarMenuright {
    width: 340px; /* lebar menu sebelah kanan */
    font-size: 11px;
    float: right;
    margin: 0;
    padding: 0;
    }
    #nav {
    margin: 0;
    padding: 0;
    }
    #nav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    border-right: 1px solid #FFF;
    }
    #nav li {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #nav li a, #nav li a:link, #nav li a:visited {
    color: #FFF;
    display: block;
    text-transform: lowercase;
    margin: 0;
    padding: 9px 15px 8px;
    font: normal 16px Georgia, Times New Roman;
    }
    #nav li a:hover, #nav li a:active {
    background: #808000 ;
    color: #FFF;
    margin: 0;
    padding: 9px 15px 8px;
    text-decoration: none;
    }
    #nav li li a, #nav li li a:link, #nav li li a:visited {
    background:#9ACD32 url();
    width: 150px;
    color: #FFF;
    text-transform: lowercase;
    float: none;
    margin: 0;
    padding: 7px 10px;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
    font: normal 14px Georgia, Times New Roman;
    }
    #nav li li a:hover, #nav li li a:active {
    background: #008000;
    color: #FFF;
    padding: 7px 10px;
    }
    #nav li {
    float: left;
    padding: 0;
    }
    #nav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0;
    padding: 0;
    }
    #nav li ul a {
    width: 140px;
    }
    #nav li ul ul {
    margin: -32px 0 0 171px;
    }
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left: -999em;
    }
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: auto;
    }
    #nav li:hover, #nav li.sfhover {
    position: static;
    }
    #searchform {
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: inline;
    }


    catatan :

    tulisan berwarna biru adalah penjelasan warna dari setiap menu , warna bisa kamu ganti biar sesuai dengan blog kamu, kode warna bisa dilihat di sini

    kalau tulisan hitam adalah penjelasan dari lebar menu kanan dan kiri, lebar dari ke dua menu tidak boleh lebih dari lebar outter-wrapper. usahakan sama atau kurang dikit, kalau sudah save template dahulu.


    diatas adalah kode CSSnya, sekarang peletakan kode htmlnya, carilah dahulu kode
    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    </b:section>
    </div>


    kalau sudah ketemu letakan kode barikut diatasnya :

    <div id='NavbarMenu'>
    <div id='NavbarMenuleft'>
    <ul id='nav'>
    <li><a href='http://namablogmu.blogspot.com/'>Home</a></li>
    <li><a href='#'>tambah menu</a>
    <ul>
    <li><a href='#'>tambah menu</a>
    <ul>
    <li><a href='#'>tambah menu</a></li>
    </ul>
    </li>
    <li><a href='#'>tambah menu</a></li>
    </ul>
    </li>
    <li><a href='#'>tambah menu</a></li>
    <li><a href='#'>tambah menu</a></li>
    <li><a href='#'>tambah menu</a></li>
    <li><a href='#'>tambah menu</a></li>

    <li><a href='#>tambah menu</a></li>
    <li><a href='#'>tambah menu</a></li>
    <li><a href='#'>tambah menu</a></li>
    </ul>
    </div>
    </div>


    catatan, untuk menambah drop baru lihat kode2 berwarna merah dan itu adalah panduannya, ikuti jika ingin menambah drop baru

    tulisan # adalah lokasi link untuk menu baru.

    menu ini juga bisa di letakan diatas kode :

    <div id='header-wrapper'>


    sama-sama baiknya.

    catatan: jika template ngak bisa disave jangan sungkan bertanya, karna menu ini memang sedikit susah ditangani bila sudah pake bercabang-cabang. jadi mesti ada kesabaran mengolahnya.
    0 komentar