PDA

View Full Version : current page indicator



robert475
Jan 19th, 2010, 12:59 PM
Hi There

I have put a very basic image hover button navigation together but have not found a way of showing the current page link in green.

For example if this was the home page the home button will be green and so on.

I have put a test page here:

test (http://www.lantalighting.com/new/untitled3.html)

Is there a way to achieve this?

My code is also here:


<html>
<style type="text/css">
.homeBtn{
display:block;
width:39px;
height:7.5px;
text-indent:-1000px;
background:url('assets/img/homeTest.png') no-repeat left top;
}
.homeBtn:hover{
background:url('assets/img/homeTest.png') no-repeat left bottom;
}

.newsBtn{
display:block;
width:92px;
height:7.5px;
text-indent:-1000px;
background:url('assets/img/newsTest.png') no-repeat left top;
}
.newsBtn:hover{
background:url('assets/img/newsTest.png') no-repeat left bottom;
}

.downloadBtn{
display:block;
width:74px;
height:7.5px;
text-indent:-1000px;
background:url('assets/img/downloadTest.png') no-repeat left top;
}
.downloadBtn:hover{
background:url('assets/img/downloadTest.png') no-repeat left bottom;
}



.buyBtn{
display:block;
width:91px;
height:7.5px;
text-indent:-1000px;
background:url('assets/img/buyTest.png') no-repeat left top;
}
.buyBtn:hover{
background:url('assets/img/buyTest.png') no-repeat left bottom;
}

.contactBtn{
display:block;
width:72px;
height:7.5px;
text-indent:-1000px;
background:url('assets/img/contactTest.png') no-repeat left top;
}
.contactBtn:hover{
background:url('assets/img/contactTest.png') no-repeat left bottom;
}

body {
background-color: #000000;
}
</style>

</head>

<body>
<a href="#" class="homeBtn">My Link Button</a>
<br />
<a href="#" class="newsBtn">My Link Button</a>
<br />
<a href="#" class="downloadBtn">My Link Button</a>
<br />
<a href="#" class="buyBtn">My Link Button</a>
<br />
<a href="#" class="contactBtn">My Link Button</a>
<br />

</body>
</html>

abduraooft
Jan 19th, 2010, 01:03 PM
Take a look at http://www.codingforums.com/showpost.php?p=605564&postcount=3

Excavator
Jan 19th, 2010, 05:46 PM
Hello robert475,
That is a good method, here's a live demo of it - http://nopeople.com/CSS/h_ul_menu-with_images/index.html