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

learner guy · 07-20-2011, 04:01 PM

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..

Lerura · 07-21-2011, 05:20 AM

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>

learner guy · 07-21-2011, 05:50 PM

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

Apostropartheid · 07-21-2011, 06:09 PM

Quote:

Originally Posted by learner guy

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?

vikram1vicky · 07-22-2011, 12:12 PM

Quote:

Originally Posted by learner guy

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

learner guy · 07-22-2011, 12:25 PM

Quote:

Originally Posted by vikram1vicky

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

learner guy · 07-22-2011, 12:46 PM

Quote:

Originally Posted by Apostropartheid

Are you using includes?

no just client side script no SSI

Rowsdower! · 07-22-2011, 03:05 PM

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.

vikram1vicky · 07-22-2011, 03:10 PM

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>

learner guy · 07-23-2011, 11:07 AM

Quote:

Originally Posted by Rowsdower!

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

learner guy · 07-23-2011, 11:28 AM

Quote:

Originally Posted by vikram1vicky

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 .

vikram1vicky · 07-23-2011, 01:41 PM

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