Results 1 to 5 of 5

Thread: Tab Content script Question

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

    Smile Tab Content script Question

    1) Script Title: Tab Content Script

    2) Script URL: http://www.dynamicdrive.com/dynamici...tabcontent.htm

    3) Describe problem: hi Dudes.
    I was wondering if it's possible to have several li background images in order to have a different state for the one selected as shown in this pic :


    That script is awesome. Thanks for having shared it.

    Any relevant answer will be much appreciated.

    Thanks alot.

    This was a message from Sven who wish you a nice day.

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

    Default

    Do you mean different background images for the tabs themselves? Right now the selected tab already has a different background image from the default:

    Code:
    .shadetabs li.selected a{ /*selected main tab style */
    background-image: url(shadeactive.gif);
    border-bottom-color: white;
    }
    What do you mean that you need multiple background images?

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

    Default

    Hello Mr Admin
    thanks for your answer

    Yes I wish to have different background images for the selected.
    As on the pic there are 4 different bg images for each li I wish to have for the selected one (the red one here) another bg image.
    Do you think it would be possible? And how?

    Greetz from Paris,
    Sven

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

    Default

    Hmmm there's no easy way to do this with the current HTML for the tabs. In CSS you can only have one background image per element. In the case of the tabs, each one is made up of just two elements, namely, a LI and A element:

    Code:
    <li><a href="#" rel="tcontent3">Tab 3</a></li>
    Unless you're proficient with HTML and CSS and can redesign the entire tabs interface so each tab uses for elements, you're probably better off letting things be.

  5. #5
    Join Date
    Jul 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hello and thanks again Mr Admin
    I think I found a trick which might be usefull for those who'll be interested.

    1/ I've placed a div with an image of the tabs like this :
    Code:
    <div id="navigation_tabs"><img src="img/nav_tabs.jpg" alt="" width="15" height="198" class="noborder"></div>
    2/ in the CSS I just cover the selected li with an image (white rectangle over #2]:


    This is the CSS :
    Code:
    #navigation_tabs {
    	left: -15px;
    	position: absolute;
    	margin-top: 58px;
    }
    .navigation {
    	left: -20px;
    	position: absolute;
    	margin-top: 8px;
    	width: 200px;
    	padding: 0px 0px 0px 20px;
    	list-style: none;
    }
    .navigation li {
    margin-bottom: 1px ;
    	}
    .navigation li a {
    	display: block;
    	color: #fff;
    	font: 2em "Trebuchet MS", Arial, sans-serif;
    	line-height: 2em;
    	text-align: left;
    	text-decoration: none;
    	padding: 4px 0;
    	margin-left: 12px;
    	}
    .navigation li.selected{
    	position: relative;
    	margin-bottom: 1px;
    }
    .navigation li.selected a{ /*selected main tab style */
    	background: url(../img/nav_select.png) repeat-y;
    	margin-bottom: 1px;
    }
    .navigation li.selected a:hover, #navigation li.selected a:focus, #navigation li.selected a:active {
    text-decoration: underline ;
    	}
    As you can see there's still an issue: the rectangle is not covering the (fake) blue tab.
    When I try to give a negative BG position to the "nav_select.png" it disappears.

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
  •