Programming Help

Web Development



What's Here?

  • Members: 132,040
  • Replies: 470,337
  • Topics: 72,902
  • Snippets: 2,538
  • Tutorials: 664
  • Total Online: 2,162
  • Members: 96
  • Guests: 2,066

Who's Online?

Welcome to Dream.In.Code
Getting Help is Easy!

Join 132,040 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 2,162 people online right now. Registration is fast and FREE... Join Now!




CSS - need help

 
 Reply to this topicStart new topic

CSS - need help, Tabs with CSS
dinci5
post 26 Feb, 2008 - 08:52 AM
Post #1


New D.I.C Head

*
Joined: 19 Oct, 2006
Posts: 33


My Contributions
Hello

I downloaded a CSS tab template ...
I implemented it in my site, but I have one little problem.


On mouseover, the tab changes color, that works fine.
But I want to make it when I CLICK on the tab, that it remains like when on mouseover

I tride with a:active, but nothing helped...


here is the CSS code for the tabs smile.gif


CODE
    #tabsJ {
      float:left;
      width:100%;
      background:#ddd;
      font-size:93%;
      line-height:normal;
          border-bottom:1px solid #24618E;
      }
    #tabsJ ul {
        margin:0;
        padding:10px 10px 0 50px;
        list-style:none;
      }
    #tabsJ li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsJ a {
      float:left;
      background:url("../img/tableftJ.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 5px;
      text-decoration:none;
      }
    #tabsJ a span {
      float:left;
      display:block;
      background:url("../img/tabrightJ.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#24618E;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsJ a span {float:none;}
    /* End IE5-Mac hack */
    #tabsJ a:hover span {
      color:#FFF;
      }
    #tabsJ a:hover {
      background-position:0% -42px;
      border-top: none;
      }
    #tabsJ a:hover span {
      background-position:100% -42px;
      }
    
        #tabsJ #current a {
                background-position:0% -42px;
        }
        #tabsJ #current a span {
                background-position:100% -42px;
                color:#FFF;
        }
User is offlineProfile CardPM

Go to the top of the page

didgy58
post 27 Feb, 2008 - 08:28 AM
Post #2


D.I.C Head

**
Joined: 23 Oct, 2007
Posts: 170



Thanked 1 times
My Contributions
i have implemented the same thing on my site, and what ive done is to set the <a> as id="current" when im on that page so for instance if i go to a login page, on the login.php/asp/html whatever one it is. set the
CODE

<li id><a href="login.asp" id="current">login</li>


and then in the css

CODE

#current
{
background:whatever color u want;
}


so here is my example on my site

CODE


    <div id="content">
            <div id="header"> </div>
            <ul id="nav"><li id="active"><a href="index.html" id="current">Home</a></li><li ><a href="#">About Me</a></li><li><a href="#">Portfolio</a></li><li ><a href="#">Contact Me</a></li></ul>
    <div id="mainc">



css
CODE

#nav{
    margin-right:5px;
    text-align:center;
    margin-top:0;
    padding: 3px 0;
    margin-left: 0;
    border-bottom: 1px solid #778;
    font: bold 12px Verdana, sans-serif;
    background:#6177ff;
}
#nav li{
list-style: none;
    margin: 0;
    display: inline;
}

#nav li a{
    padding-top:2px;
    padding: 3px 0.5em;
    margin-left: 3px;
    border: 1px solid #778;
    
    border-bottom: none;
    background: #DDE;
    text-decoration: none;}

#nav li a:link { color: #448; }
#nav li a:visited { color: #667; }

#nav li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}

#nav li a#current
{
background: #fcf7f7;
border-bottom: 1px solid #fcf7f7;
}




let me know if that helps at all if ur not sure if its right and maybe wanna break it down a little more let me know..

dan.

This post has been edited by didgy58: 27 Feb, 2008 - 08:29 AM
User is offlineProfile CardPM

Go to the top of the page

dinci5
post 27 Feb, 2008 - 01:32 PM
Post #3


New D.I.C Head

*
Joined: 19 Oct, 2006
Posts: 33


My Contributions
I'm sorry, but I don't know how you did that ...

I found something else, but it doesn't work as I want to.

I added the following code to the CSS:

CODE
#tabsJ a:active {
        background-position:0% -42px;
        border-top: none;
}
#tabsJ a:active span {
        background-position:100% -42px;
}
#tabsJ a.ITEM_ON {
        background-position:0% -42px!important;
        border-top: none!important;
                                
}
#tabsJ a.ITEM_ON span{
        background-position:100% -42px!important;
        color:#FFF;    
}



Then, with JavaScript, make it change when clicked on the link...

CODE
<script>
function changeClass(obj) {
        var ppUl=obj.parentNode.parentNode;
        var pLi=obj.parentNode;
        var lis=ppUl.getElementsByTagName('LI');
        for (var i=0; i<lis.length; i++)  {
                var lnk=lis[i].getElementsByTagName('A')[0];
                if (lnk!=obj) {
                        lnk.className='';
                }      
        }      
        obj.className='ITEM_ON';
}
</script>



And then added an onClick parameter in the link:

CODE
    <ul>
        <!-- CSS Tabs -->
        <li><a href="#" onClick="changeClass(this);"><span>Home</span></a></li>
        <li><a href="index.php?p=forum" onClick="changeClass(this);"><span>Forum</span></a></li>
    </ul>




Now, this works 100% when there is '#' in the 'href' (1st link in the code above)
but when I change it to my own link (2nd link in the code above), then it doesn't work ...
That's probably because I'm leaveing the page, but I thout it should work, because I include the pages...
I stay in index.php


I don't know how to solve this ...

And yeah, the tabs are not only with colors
they are with images as you can see smile.gif


thanks for your reply ...
I thought nobody would reply to this smile.gif

This post has been edited by dinci5: 27 Feb, 2008 - 01:33 PM
User is offlineProfile CardPM

Go to the top of the page

Fast ReplyReply to this topicStart new topic
Time is now: 11/21/08 06:08AM
Invision Power Board v2.1.7 © 2008  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

Bye Bye Ads

Free DIC T-Shirt

T-Shirt Example

Related Sites

Monthly Drawing

Thumb Drive

Partners

Top Contributors

Top 10 Kudos This Month