TEST

 

   </table>
                        <table width="150" border="1" cellpadding="0">
                          <tr>
                            <td width="150"><div align="center"><span class="style15">Materi iman</span></div></td>
                          </tr>
                          <tr>
                            <td width="150"><iframe align="center" frameborder="0" width="150" height="80" id="topikFrame" scrolling="No" src="/topik.html"></iframe></td>
                          </tr>
                        </table>

Hasil

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Letter A Letter B Letter C Letter D Letter E Letter F Letter G Letter H Letter I Letter J Letter K Letter L Letter M Letter N Letter O Letter P Letter Q Letter R Letter S Letter T Letter U Letter V Letter W Letter X Letter Y Letter Z

Test

• A
• B
• C
• D
• E
• F
• G
• H
• I-M

Letter A

Letter B

Letter C

Letter D

Sample Of Tabs

• First
• Second
• Third

Default tabs appearance.

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

• First
• Second
• Third

Tabs without the list background.

Show CSS
#tabs-nobg { 
    padding: 0px; 
} 
#tabs-nobg .ui-tabs-nav { 
    background: transparent; 
    border-width: 0px 0px 1px 0px; 
    -moz-border-

radius: 0px; 
    -webkit-

border-radius: 0px; 
    border-

radius: 0px; 
} 
#tabs-nobg .ui-tabs-panel { 
    margin: 0em 0.2em 0.2em 0.2em; 
}

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

• First
• Second
• Third

Tabs without the header background.

Show CSS
#tabs-nohdr { 
    padding: 0px; 
    background: none; 
    border-width: 0px; 
} 
#tabs-nohdr .ui-tabs-nav { 
    padding-left: 0px; 
    background: transparent; 
    border-width: 0px 0px 1px 0px; 
    -moz-border-

radius: 0px; 
    -webkit-

border-radius: 0px; 
    border-

radius: 0px; 
} 
#tabs-nohdr .ui-tabs-panel { 
    background: #f5f3e5 url

(http://code.jquery.com/ui/1.8.23/themes/south-street/images/ui-

bg_highlight-hard_100_f5f3e5_1x100.png) repeat-x scroll 50% top; 
    border-width: 0px 1px 1px 1px; 
}

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

• First
• Second
• Third

Minimalist tabs.

Show CSS
#tabs-min { 
    background: transparent; 
    border: none; 
} 
#tabs-min .ui-widget-header { 
    background: transparent; 
    border: none; 
    border-bottom: 1px solid #c0c0c0; 
    -moz-

border-radius: 0px; 
    -webkit-

border-radius: 0px; 
    border-

radius: 0px; 
} 
#tabs-min .ui-tabs-nav .ui-state-default 

{ 
    background: transparent; 
    border: none; 
} 
#tabs-min .ui-tabs-nav .ui-state-active { 
    background: transparent url

(img/uiTabsArrow.png) no-repeat bottom center; 
    border: none; 
} 
#tabs-min .ui-tabs-nav .ui-state-default a { 
    color: #c0c0c0; 
} 
#tabs-min .ui-tabs-nav .ui-state-active a { 
    color: #459e00; 
}

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

• First
• Second
• Third

Tabs with smaller non-selected tabs.

Show CSS
#tabs-smaller .ui-

tabs-nav li 

{ 
    margin-

top: 0.6em; 
    font-size: 80%; 
} 
#tabs-smaller .ui-

tabs-nav li.ui-tabs-selected, 
#tabs-smaller .ui-

tabs-nav li.ui-state-active { 
    margin-top: 0em; 
    font-size: 100%; 
}

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

• First
• Second
• Third

Tabs with icons.

Show CSS
#tabs-icons .ui-tabs-nav .ui-icon { 
    display: inline-block; 
}

Show HTML
<div id="tabs-

icons" class="tabs"> 
    <ul> 
      

;  <li><a href="#tabs-

icons-1"> 
      

;      <span class="ui-

icon ui-icon-flag"></span> First</a> 
     &

nbsp;  </li> 
     

   ... 
    </ul> 
    ...&nb

sp;
</div>

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

• First
• Second
• Third

Tabs like buttons.

Show CSS
#tabs-buttons .ui-

tabs-nav { 
    padding: 0em; 
    background: transparent; 
    border-width: 0px; 
} 
#tabs-buttons .ui-

tabs-nav li 

{ 
    position: static; 
    margin: 0px; 
    border-bottom: 1px solid #327e04 !

important; 
    -moz-border-radius: 0px; 
    -webkit-

border-radius: 0px; 
    border-

radius: 0px; 
} 
#tabs-buttons .ui-

tabs-nav li:first-child 

{ 
    -moz-border-radius: 6px 0px 0px 6px; 
    -webkit-

border-radius: 6px 0px 0px 6px; 
    border-

radius: 6px 0px 0px 6px; 
} 
#tabs-buttons .ui-

tabs-nav li:last-child 

{ 
    -moz-border-radius: 0px 6px 6px 0px; 
    -webkit-

border-radius: 0px 6px 6px 0px; 
    border-

radius: 0px 6px 6px 0px; 
} 
#tabs-buttons .ui-

tabs-nav li.ui-tabs-selected 

{ 
    padding-

bottom: 0px; 
    border-bottom: 1px solid #d4ccb0 !important; 
}

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

• First
• Second
• Third

Centred tabs.

Show CSS
#tabs-centre .ui-tabs-nav { 
    height: 2.35em; 
    text-align: center; 
} 
#tabs-centre .ui-tabs-nav li 

{ 
    display: inline-block; 
    float: none; 
    top: 0px; 
    margin: 0em; 
}

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

• First
• Second
• Third

Tabs aligned right.

Show CSS
#tabs-to-right .ui-tabs-nav 

{ 
    float: right; 
    border-left: none; 
    -moz-border-

radius: 0px 6px 6px 0px; 
    -webkit-

border-radius: 0px 6px 6px 0px; 
    border-

radius: 0px 6px 6px 0px; 
} 
#tabs-to-right .tabs-

background 

{ 
    height: 2.6em; 
    background: #ece8da url

(http://code.jquery.com/ui/1.8.23/themes/south-street/images/ui-

bg_gloss-wave_100_ece8da_500x100.png) repeat-x scroll 50% 50%; 
    border: 1px solid #d4ccb0; 
    -moz-

border-radius: 6px; 
    -webkit-

border-radius: 6px; 
    border-

radius: 6px; 
}

This implementation also requires the addition of a background div before the tab content.

Show HTML
<div class="tabs"> 
    <ul> 
      

;  ... 
    </ul> 
    <div class="tabs-

background"></div> 
    ...&n

bsp;
</div>

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

• First
• Second
• Third

Tabs at the bottom.

Show CSS
#tabs-bottom 

{ 
    position: relative; 
    padding-bottom: 3em; 
} 
#tabs-bottom .ui-tabs-nav { 
    position: absolute; 
    left: 0.25em; 
    right: 0.25em; 
    bottom: 0.25em; 
    padding: 0em 0.2em 0.2em; 
} 
#tabs-bottom .ui-tabs-nav li 

{ 
    border-

top: none; 
    border-bottom: 1px solid #ccc; 
    -moz-border-

radius: 0px 0px 4px 4px; 
    -webkit-

border-radius: 0px 0px 4px 4px; 
    border-

radius: 0px 0px 4px 4px; 
} 
#tabs-bottom .ui-tabs-nav li.ui-tabs-selected, 
#tabs-bottom .ui-tabs-nav li.ui-state-active { 
    top: -1px; 
}

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

• First
• Second
• Third

Tabs on the left.

Show CSS
#tabs-left { 
    position: relative; 
    padding-left: 6.5em; 
} 
#tabs-left .ui-tabs-nav { 
    position: absolute; 
    left: 0.25em; 
    top: 0.25em; 
    bottom: 0.25em; 
    width: 6em; 
    padding: 0.2em 0 0.2em 0.2em; 
} 
#tabs-left .ui-tabs-nav li 

{ 
    right: 1px; 
    width: 100%; 
    border-right: none; 
    border-bottom-width: 1px !

important; 
    -moz-border-radius: 4px 0px 0px 4px; 
    -webkit-

border-radius: 4px 0px 0px 4px; 
    border-

radius: 4px 0px 0px 4px; 
    overflow: hidden; 
} 
#tabs-left .ui-tabs-nav li.ui-tabs-selected, 
#tabs-left .ui-tabs-nav li.ui-state-active { 
    border-right: 1px solid transparent; 
} 
#tabs-left .ui-tabs-nav li a 

{ 
    float: right; 
    width: 100%; 
    text-align: right; 
} 
#tabs-left > div { 
    height: 35em; 
}

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

• First
• Second
• Third

Tabs on the right.

Show CSS
#tabs-right { 
    position: relative; 
    padding-right: 6.5em; 
} 
#tabs-right .ui-tabs-nav { 
    position: absolute; 
    right: 0.25em; 
    top: 0.25em; 
    bottom: 0.25em; 
    width: 6em; 
    padding: 0.2em 0.2em 0.2em 0em; 
} 
#tabs-right .ui-tabs-nav li 

{ 
    width: 100%; 
    border-left: none; 
    border-bottom-width: 1px !

important; 
    -moz-border-radius: 0px 4px 4px 0px; 
    -webkit-

border-radius: 0px 4px 4px 0px; 
    border-

radius: 0px 4px 4px 0px; 
    overflow: hidden; 
} 
#tabs-right .ui-tabs-nav li.ui-tabs-selected, 
#tabs-right .ui-tabs-nav li.ui-state-active { 
    left: -1px; 
    border-left: 1px solid transparent; 
} 
#tabs-right .ui-tabs-nav li a 

{ 
    width: 100%; 
} 
#tabs-right > div { 
    height: 33em; 
}

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

• First
• Second
• Third

• First
• Second
• Third

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

Nunc eleifend iaculis nibh, sed semper nisl feugiat nec. Duis pretium, felis nec ornare posuere, leo erat ullamcorper nisl, a lacinia dolor urna vel quam!

Pellentesque ac elit et nulla posuere convallis quis ut dolor. Pellentesque egestas pellentesque blandit. Morbi quis sapien nec lacus consectetur vestibulum.

• 01 of 08 tabs
• 02 of 08 tabs
• 03 of 08 tabs
• 04 of 08 tabs
• 05 of 08 tabs
• 06 of 08 tabs
• 07 of 08 tabs
• 08 of 08 tabs

1st Tab

2nd Tab

3rd Tab

4th Tab

5th Tab

6th Tab

7th Tab

8th Tab

test vid