CSS gurus - ?

**Big Dave** · 6th August 2008, 18:45

You know how there are different styles for links: visited, hover, active, etc etc.

Is there a style for 'current page' ?

Say I'm on the 'about.html' page - can I make the about.html link in the nav menu display a different style when it's on that page?

Never seen it - but worth a ping.

**pzkpfw** · 6th August 2008, 19:12

I think "no", but as I hate HTML and CSS (I "do" some, but am no guru) am happy to be called stupid, or just wrong.

Is the HTML hardcoded or "built" by ASP, PHP, ASPX or something?

Is J(ava)Script in use?

**skelstar** · 6th August 2008, 19:24

No that I know of, however you could use PHP to check, and change your style on the fly (dynamically?).

Otherwise www.w3schools.com is a good resource. Try the page about pseudo classes, and elements on the next page.

**Big Dave** · 6th August 2008, 19:30

Originally Posted by pzkpfw

I think "no", but as I hate HTML and CSS (I "do" some, but am no guru) am happy to be called stupid, or just wrong.

Is the HTML hardcoded or "built" by ASP, PHP, ASPX or something?

Is J(ava)Script in use?

hard via dreamweaver and text editor mix. diy style sheets.

**Skunk** · 6th August 2008, 19:50

You could still use a scripting language to query the page as to which one it is and change CSS to suit.
I've done it with a PHP include menu file which has 'sticky' rollovers.

**Scarydog** · 6th August 2008, 19:55

There isn't an automatic solution. But there are solutions that are easier to maintain than others. One solution we use sometimes is as follows (the following is essentially a sketch :-):

HTML Code:

--- in an external style sheet ---
<style>
li.nav ul { font-weight: normal }
#home li.nav ul.home, #about li.nav ul.about, #another li.nav ul.another { font-weight: bold }
</style>

---Page 1 ---
<body id="about">
<li id="nav">
  <ul class="home">Home</ul>
  <ul class ="about">About</ul>
  <ul class ="another">Another Page</ul>
</li>
</body>

---Page 2 ---
<body id="home">
<li>
  <ul class="home">Home</ul>
  <ul class ="about">About</ul>
  <ul class ="another">Another Page</ul>
</li>
</body>

So the above probably doesn't actually work - but hopefully it shows the idea :-).

You can hard code the class on to the body tag or better have it written in dynamically.

Let me know if this makes no sense :-)

**Big Dave** · 6th August 2008, 20:56

Originally Posted by Scarydog

There isn't an automatic solution. But there are solutions that are easier to maintain than others. One solution we use sometimes is as follows (the following is essentially a sketch :-):

HTML Code:

--- in an external style sheet ---

li.nav ul { font-weight: normal }
#home li.nav ul.home, #about li.nav ul.about, #another li.nav ul.another { font-weight: bold }


---Page 1 ---


  Home
  About
  Another Page



---Page 2 ---


  Home
  About
  Another Page

So the above probably doesn't actually work - but hopefully it shows the idea :-).

You can hard code the class on to the body tag or better have it written in dynamically.

Let me know if this makes no sense :-)

Yeah - I see it. Thanks.

For 6 or so relevant pages on this site it's easier to remove the link and just text style it.

this is an upgrade - time is moolah and all that.

Next time I'm starting from scratch will give it a try.