Ahad, Disember 16, 2007

Cara Bagaimana Untuk Membuat Tab Yang Dinamik

contoh hasil :

1. Sediakan imej-imej yang diperlukan...

    contoh :
                
        i. bahagian kiri tab (15px x 31px)
                
        ii. bahagian tengah tab (1px x 31px)
                
        iii. bahagian kanan tab (15px x 31px)

nota : Jika saiz yang lain dari contoh di atas pun boleh juga. Tetapi kod anda juga kena la diubahsuai mengikut saiz imej. Perkara yang paling penting ialah, ketiga-tiga imej tersebut mestilah sama ketinggiannya. Kalau anda tidak tahu bagaimana untuk membuat imej tab, cuba tengok tutorial ini
http://www.technomono.com/blog/create-a-metallic-glass-button/

2. Sediakan satu fail HTML yang mengandungi kod di bawah...

    <html>
        <head>
            <style type="text/css">
                #navigation ul {
                    list-style: none;
                    padding: 0;
                    margin: 0
                }

                #navigation li {
                    float: left;
                    font: 10px/31px "Arial", serif ;
                    margin: 0;
                    list-style: none;
                    display: block;
                }

                #navigation a {
                    color:#333;
                    text-decoration: none;
                }

                #navigation a:hover {
                    text-decoration: none;
                }

                #navigation span.C {
                    background: url(bg.gif) left top repeat;
                    padding-top: 10px;
                    padding-bottom: 9px;
                }

                #navigation a:hover span.C {
                    background: url(bg.gif) left top repeat;
                }

                #navigation span.L {
                    padding-left: 5px;
                    padding-right: 6px;
                    padding-top: 10px;
                    padding-bottom: 10px;
                }

                #navigation a span.L {
                    background: url(left.gif) left top no-repeat;
                }

                #navigation a:hover span.L {
                    background: url(left.gif) left top no-repeat;
                }

                #navigation span.R {
                    padding-left: 5px;
                    padding-right: 6px;
                    padding-top: 10px;
                    padding-bottom: 10px;
                }

                #navigation a span.R {
                    background: url(right.gif) left top no-repeat;
                }

                #navigation a:hover span.R {
                    background: url(right.gif) left top no-repeat;
                }

                #navigation a, #navigation a span.L, #navigation a span.R {
                    float: none;
                }
            </style>
        </head>

        <body>
            <ul id="navigation">
                <li>
                    <a href="#">
                        <span class="L"> </span><span class="C">Profil</span><span class="R"> </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="L"> </span><span class="C">Ruby on Rails</span><span class="R"> </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="L"> </span><span class="C">Javascript</span><span class="R"> </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="L"> </span><span class="C">PHP</span><span class="R"> </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="L"> </span><span class="C">CSS</span><span class="R"> </span>
                    </a>
                </li>
            </ul>
        </body>
    </html>

3. Siap.. apa yang anda perlu ialah mengubah kod-kod di atas mengukit kesesuaian penggunaan anda.

oleh [ supie ] pada [ 2:13 PTG ]

0 komen :

Hantar Pandangan

<< Halaman Utama