Results 1 to 3 of 3

Thread: Fix width for tab menu

  1. #1
    Join Date
    Feb 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Fix width for tab menu

    1) Script Title: Ajax Tabs Content script

    2) Script URL (on DD): http://dynamicdrive.com/dynamicindex...tent/index.htm

    3) Describe problem:
    In the demo, the tab can expand depending the size/length of the text. Is there a way to make it to a certain width, because i'm using a rounded background image and has certain width associated with it. I've tried specifying the width in the css file but wont work. I've also specified the float to left rather than using display:inline but it is not showing properly in Firefox. Can this be part of the feature of the script, to make the width to a certain pixel? Thanks.
    Last edited by ddadmin; 02-09-2007 at 11:31 PM.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Since the menu items are inline links (<a>), specifying a width won't do. You can try using float in combination with display: block:

    Code:
    .shadetabs li a{
    display: block;
    float: left;
    width: 100px;
    text-decoration: none;
    padding: 3px 7px;
    margin-right: 3px;
    border: 1px solid #778;
    color: #2d2b2b;
    background: white url(shade.gif) top left repeat-x;
    }
    And inside .tabcontentstyle, clear that float:

    Code:
    .tabcontentstyle{ /*style of tab content oontainer*/
    clear: left;
    border: 1px solid gray;
    width: 450px;
    margin-bottom: 1em;
    padding: 10px;
    }

  3. #3
    Join Date
    Feb 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thank you

    Thank you for the solution, i have yet to try it but will do so this weekend. I will let you know how that goes. Thanks again.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •