www.webdeveloper.com
Results 1 to 5 of 5

Thread: keeping 'on' state active on page

  1. #1
    Join Date
    Jan 2003
    Posts
    129

    keeping 'on' state active on page

    Hi!

    I hope this is an easy question

    At the link below I've built the nav using CSS (see code below). How do I make the 'on' state stay active on each specific page? (i.e the 'about us' rollover image stays active on the 'about us' page)

    http://www.nicnackpaddywack.com/nicn...y/aboutus.html


    CSS:

    /* -----------begin nav layout styles-------------- */

    #navigation {
    width: 455px;
    height: 116px;
    margin: 0;
    padding: 0;
    float:left;
    }





    #nav_aboutus, #nav_aboutus a{
    width:95px;
    height:116px;
    float:left;
    background:url(../images/nav_aboutus.jpg) top left no-repeat;
    }


    #nav_portfolio, #nav_portfolio a {
    width:95px;
    height:116px;
    float:left;
    background:url(../images/nav_portfolio.jpg) top left no-repeat;
    }


    #nav_contactus, #nav_contactus a {
    width:107px;
    height:116px;
    float:left;
    background:url(../images/nav_contactus.jpg) top left no-repeat;
    }


    #nav_jointeam, #nav_jointeam a {
    width:158px;
    height:116px;
    float:left;
    background:url(../images/nav_jointeam.jpg) top left no-repeat;
    }







    #nav_aboutus a:hover {
    width:95px;
    height:116px;
    background:url(../images/nav_aboutus.jpg) no-repeat 0px -116px ;
    }


    #nav_portfolio a:hover {
    width:95px;
    height:116px;
    background:url(../images/nav_portfolio.jpg) no-repeat 0px -116px;
    }


    #nav_contactus a:hover {
    width:107px;
    height:116px;
    background:url(../images/nav_contactus.jpg) no-repeat 0px -116px;
    }


    #nav_jointeam a:hover {
    width:158px;
    height:116px;
    background:url(../images/nav_jointeam.jpg) no-repeat 0px -116px;
    }


    /* -----------end nav layout styles-------------- */

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Jan 2003
    Posts
    129
    thanks for sending this link but it doesn't make sense to me. I didn't use a list when building my CSS navigation.. see my code above. I just dont know how to tell the page to activate the 'on' state of a particular nav

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Add
    Code:
    #aboutus #nav_aboutus a { 
    	background:url(../images/nav_aboutus.jpg) no-repeat 0px -116px ; 
    }
    #portfolio #nav_portfolio a { 
    	background:url(../images/nav_portfolio.jpg) no-repeat 0px -116px;
    }
    #contactus #nav_contactus a { 
    	background:url(../images/nav_contactus.jpg) no-repeat 0px -116px;
    }
    #jointeam #nav_jointeam a { 
    	background:url(../images/nav_jointeam.jpg) no-repeat 0px -116px;
    }
    Give each document body it's relevant id
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Jan 2003
    Posts
    129
    FANG! I love you!! THANK YOU SOOOO MUCH!

    http://www.nicnackproductions.com/ni...portfolio.html
    (see portfolio and about us pages)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles