I tried to insert a tab menu for my forum but I got problem in terms of positioning.



Here is my forum: Click Here

Here's the code I used:

Javascript:

Code:


$(function() {
      $("div.table-title").closest("div.forabg").addClass("cat-table").first().before('<div id="cat-tabs"></div>');
      $(".cat-table:not(:first)").hide();
      $("div.table-title h2").each(function() {
        $("#cat-tabs").append('<div class="ct-item">' + $(this).text() + "</div>")
      });
      $("#cat-tabs .ct-item").click(function() {
        $("#cat-tabs .ct-abled").removeClass("ct-abled");
        $(this).addClass("ct-abled");
        $(".cat-table").not($(".cat-table").eq($("#cat-tabs .ct-item").index(this)).slideDown(500)).slideUp(500)
      }).first().addClass("ct-abled")
    });

CSS:

 

Code:

 #cat-tabs { text-align: center; margin: 10px auto; }
    #cat-tabs .ct-item { display: inline; background: blue; color: #fff; margin: 5px; padding: 5px;  }
    #cat-tabs .ct-abled { color: blue; background: #fff; }

My problems are:

1. Tab Menu is not in horizontal view.
2. Color of menu background doesn't appear.
3. How can I adjust the font of the menu?

Please help me.. Thanks...

Add this to the top of your stylesheet :
Administration Panel > Display > Colors > CSS stylesheet

Code:

#cat-tabs { text-align: center; margin: 10px auto; }
#cat-tabs .ct-item { display: inline; background: blue; color: #fff; margin: 5px; padding: 5px;  }
#cat-tabs .ct-abled { color: blue; background: #fff; }

Ange Tuteur wrote:Add this to the top of your stylesheet :
Administration Panel > Display > Colors > CSS stylesheet

Thanks for your support mate.. I already mark it as solved.. I already made some changes with regards to the font size and everything is fine now...