Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts

    problem using a:active and a:focus pseudo classes in menu

    hello everyone ,
    hope all of u r fine ,
    i am working on an html project,
    in the menu i (suppose Home,About us ,Contact Us) want to bring a background image on the link of the page i am seeing
    e.g.
    when i m on home Page that background is only on "Home" link
    when i m on About us Page that background is only on "About us" link
    when i m on Contact Us Page that background is on only "Contact Us" link
    so that it is clear for the user which page he has opened

    is it possible in css


    hope i will get my answer
    ask me any detail u want
    i have tried :active and :focus in css..

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    906
    Thanks
    0
    Thanked 119 Times in 118 Posts
    It cannot be done automatically by CSS.

    You can add (hardcode) a class to the link to leads to the current page.

    e.g. in home.html:
    Code:
    <style>
    .ThisPage {background-image:url(linkBackground.jpg);}
    </style>
    
    <a class="ThisPage" href="home.html">Home</a>
    <a href="about.html">About Us</a>
    <a href="contact.html">Contact</a>

  • Users who have thanked Lerura for this post:

    learner guy (07-21-2011)

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks lerura for ur anwer
    it works fine for small projects but just imagine i am developing a static website of 150 pages ,its almost impossible to do this hardcore css thing in the given time .
    it is the thing i have seen in many websites .Is there any way i can do it by Js or jquery ?if so plz tell me
    once again thnx for ur interest

  • #4
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by learner guy View Post
    Thanks lerura for ur anwer
    it works fine for small projects but just imagine i am developing a static website of 150 pages ,its almost impossible to do this hardcore css thing in the given time .
    it is the thing i have seen in many websites .Is there any way i can do it by Js or jquery ?if so plz tell me
    once again thnx for ur interest
    Are you using includes?

  • Users who have thanked Apostropartheid for this post:

    learner guy (07-22-2011)

  • #5
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Quote Originally Posted by learner guy View Post
    Thanks lerura for ur anwer
    it works fine for small projects but just imagine i am developing a static website of 150 pages ,its almost impossible to do this hardcore css thing in the given time .
    it is the thing i have seen in many websites .Is there any way i can do it by Js or jquery ?if so plz tell me
    once again thnx for ur interest

    jQuery is better option for you... If you want to use jquery... let me know I will help you out

  • Users who have thanked vikram1vicky for this post:

    learner guy (07-22-2011)

  • #6
    New Coder
    Join Date
    Jul 2011
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vikram1vicky View Post
    jQuery is better option for you... If you want to use jquery... let me know I will help you out
    yes dear i want to use Jquery ...help me plz with the above code example

  • #7
    New Coder
    Join Date
    Jul 2011
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Apostropartheid View Post
    Are you using includes?
    no just client side script no SSI

  • #8
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    You probably should be using server-side includes. The benefits of not having to manually update 150+ pages are immense! Just imagine trying to update a menu item in one tiny place. With includes you only update it in one place. Without includes you have to update it in all 150+ places.

    Is there any particular reason you want to avoid server-side includes?

    They could fix your problem here with a single server-side check to see what page is being served and a simple piece of CSS to make the change when the page is rendered. No javascript required and no jquery library to load for one small thing to be done.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #9
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    here is the code.. I did it with background color only.. you can do same with background image or any other CSS property.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0;
    }
    #navi {
        width:800px;
        margin:10px auto;    
    }
    #navi ul {
        list-style:none;
        font:bold 14px Verdana, Geneva, sans-serif;
        text-align:center;
        overflow:auto;
        height:1%;
    }
    #navi ul li {
        display:inline;
    }
    #navi ul li a{
        display:block;
        width:150px;
        padding:8px 0;
        margin-right:5px;
        float:left;
        color:#CCC;
        background:#000;
        text-decoration:none;
    }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
                               $("#navi ul li a").click(function() {
                                                                 $("#navi ul li a").css({background:"#000"}) // here we can set any css property 
                                                                 $(this).css({background:"#525854"}) // here we can set any css property 
                                                                 });
                               });
    </script>
    </head>
    
    <body>
    <div id="navi">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Sit map</a></li>
      <li><a href="#">Products</a></li>
    </ul>
    </div>
    </body>
    </html>

  • #10
    New Coder
    Join Date
    Jul 2011
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Smile

    Quote Originally Posted by Rowsdower! View Post
    You probably should be using server-side includes. The benefits of not having to manually update 150+ pages are immense! Just imagine trying to update a menu item in one tiny place. With includes you only update it in one place. Without includes you have to update it in all 150+ places.

    Is there any particular reason you want to avoid server-side includes?

    They could fix your problem here with a single server-side check to see what page is being served and a simple piece of CSS to make the change when the page is rendered. No javascript required and no jquery library to load for one small thing to be done.
    there is no specific reason of avoiding server side includes ... u can give me the code I will try

  • #11
    New Coder
    Join Date
    Jul 2011
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vikram1vicky View Post
    here is the code.. I did it with background color only.. you can do same with background image or any other CSS property.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0;
    }
    #navi {
        width:800px;
        margin:10px auto;    
    }
    #navi ul {
        list-style:none;
        font:bold 14px Verdana, Geneva, sans-serif;
        text-align:center;
        overflow:auto;
        height:1%;
    }
    #navi ul li {
        display:inline;
    }
    #navi ul li a{
        display:block;
        width:150px;
        padding:8px 0;
        margin-right:5px;
        float:left;
        color:#CCC;
        background:#000;
        text-decoration:none;
    }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
                               $("#navi ul li a").click(function() {
                                                                 $("#navi ul li a").css({background:"#000"}) // here we can set any css property 
                                                                 $(this).css({background:"#525854"}) // here we can set any css property 
                                                                 });
                               });
    </script>
    </head>
    
    <body>
    <div id="navi">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Sit map</a></li>
      <li><a href="#">Products</a></li>
    </ul>
    </div>
    </body>
    </html>
    dear this not the thing i want....this is giving me a change in css on click (and nothing when i go to the respective page )but i want a permanent change in css when one visit the page by clicking the link ..
    e.g. when i am on home the background is different from rest of the menu


    see the side menu of http://www.w3schools.com/
    when u r on a page the link to that page is bold while rest of the menu remains the same .

  • #12
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Then you need to use SSI or Jquery HTML...


    You should use following logic:
    majorly your page should be divided into parts.... 1st one is navigation menu (similar to w3schools.com) and 2nd one a container where content change on clicking on any item in navigation.

    using jquery html, you can do same... refer http://api.jquery.com/html/ for more details



  • Users who have thanked vikram1vicky for this post:

    learner guy (07-27-2011)


  •  

    Tags for this Thread

    Posting Permissions

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