WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1 Forum Tab Problem on Tue Sep 23, 2014 10:04 am

Blitzkrieg

avatar
Registered Member
Registered Member
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...



Last edited by Blitzkrieg on Tue Sep 23, 2014 10:08 am; edited 1 time in total (Reason for editing : Added Image)

http://earnmoneyonline.bforum.biz

View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum