Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

css to show which page user is on

Status
Not open for further replies.
wiser3

wiser3

Programmer
Jun 3, 2003
358
CA
I have converted a slideshow presentation into a web based presentation.

The beta version can be found by going to:
and then clicking on the "Pluto Safety PLC Slideshow" link.

The beta css for these pages are at
How do i use css to show which of the numbered pages, along the bottom, the user is currently on?
 
Sort by date Sort by votes
you dont!! css is just a text file that controls presentation of your pages

you would need javascript or a server language for that

unless im missreading your question

<Signature>
Sometimes the Answer You Are LOOKING for can be FOUND BY SEARCHING THE FAQ'S @&%$*#!!!
</Signature>
 
Upvote 0 Downvote
you would need a css class. For instance you could call it currentpage and you need to apply it to the a tag of your current page, so if you were on page 4 your link would look like
Code: 
<a href=&quot;page4.html&quot; class=&quot;currentpage&quot;>4</a>

(infact having the current page as a link could be confusing so try getting rid of the a and put it in a span instead)

you css rule could be anything like:
Code: 
.currentpage{
 color: green
}
which would display the link in green


MrBelfry
 
Upvote 0 Downvote
I was hoping to do it entirely within the css and not do any html editing.

Thanks
 
Upvote 0 Downvote
You have to have some kind of indicator in the HTML. Here's the technique I use:

Assign IDs or classes to the <body> element of each page, then assign IDs or classes to the link itself. Then use CSS to hilight the link that appears it its corresponding page:
Code: 
<style type=&quot;text/css&quot;>
body#homepage a#homepagelink, body#infopage a#infopagelink, body#linkpage a#linkpagelink { font-weight: bold; }
</style>
...
<body id=&quot;homepage&quot;>
...
<a href=&quot;...&quot; id=&quot;homepagelink&quot;>home</a>
<a href=&quot;...&quot; id=&quot;infopagelink&quot;>home</a>
<a href=&quot;...&quot; id=&quot;linkpagelink&quot;>home</a>

News and views of some obscure guy
 
Upvote 0 Downvote
Great idea petey. I love it and will use it.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
744
3esolar
3
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
212
lmcate
lmcate
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
788
pmonett
pmonett
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
802
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top