...

View Full Version : 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:
<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
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
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
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
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.



<!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
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
here is the code.. I did it with background color only.. you can do same with background image or any other CSS property.



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


:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum