Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Dal123

macrumors 6502a
Original poster
Oct 23, 2008
903
0
England
After trying for a few hours on my a:active, couldn't manage to get working (or so I thought). Google search showed about 20 results of people with my exact incorrect prediction of what active means.
It's only when it is being clicked (pretty pointless cos this is only about 0.1 seconds :p).
So, what is the way to show what current page is being viewed, by this I mean the link/ anchor (or links/ anchors) to page you're currently viewing so the user knows exactly what they've viewed. Some sill people on google search suggested visited; but we know that's no solution as just shows what they've already viewed.
www.greentech-solutions.co.uk shows a black arrow, so you know what you're viewing. All I want is a different colour of text. I think this site achieves it via php or something like that.
I don't know php and really want to try to get my site done by this weekend, are there simple css that can create this for me?
Any input appreciated.
 
I'm assuming that you are already using CSS to style your site so you need to assign an id to the link in your menu system, call it "current" and assign a style to it that's different to the others in the menu. The downside is that you'll have to do this individually to each page, as you say PHP or similar is required to do it automatically, so you won't be able to simply copy and paste it to new pages.

A lot of people use a list for their top of page menu bars and give it a style of inline so that it doesn't wrap, I'll assume that's what you have.

<ul id="menu">
<li>Home</li>
<li>Family</li>
<li id="current">Pets</li>
<li> ...</li>
</ul>

Then the CSS can be
#menu li {color: #999;}
#menu li#current{color: #333;}

Or whatever your colour scheme happens to be.
 
CSS alone can't tell what link applies to the current page you're on. The a:visited is the closest you can find. You have to use some extra scripting to identify which links apply to your current page. PHP is often the tool of choice. Here's a partial example of the kind of thing I do. Using PHP might be to much for you at the moment though, but gives you at least a glimpse into the type of stuff that can be done.

PHP:
<?php
// Top of PHP page
$page_id = 'home';
//....
?>
<style type="text/css">
...
#nav a {
 color: #000; background: #fff;
}
#nav .current a {
 color: #000; background: #ff0;
 cursor: default;
}
...
</style>
</head>
<body>
...
<ul id="nav">
  <li class="<?php echo ($page_id == 'home') ? 'current' : ''; ?>"><a href="/">Home</a></li>
  <li class="<?php echo ($page_id == 'links') ? 'current' : ''; ?>"><a href="/">Links</a></li>
</ul>
 
Going slightly off-topic as far as the OP is concerned but I'd do the PHP like this (I accept that there's no one "right" way) and include it via the include or require mechanism.

PHP:
<?php 
$pos = false;
$location = $_SERVER['SCRIPT_NAME'];
?>
<ul id="navlist">
<li><a href='../index.php'> Home </a></li>
<li><a href='../family/index.php' 
<?php
$pos = strpos($location, 'family');
if($pos != false)
{
  echo "id='current'";
}
?>
> Family </a></li>
<li><a href='../pets/index.php'
<?php
$pos = strpos($location, 'pets');
if($pos != false)
{
  echo "id='current'";
}
?>
>Pets</a></li>
</ul>
?>

This will let you move pages around the site if you need to reorganise without having to do anything to the code or page itself.

Agree that it will be a bit much for the OP to learn PHP in a day or so though:D
 
Using PHP might be to much for you at the moment though, but gives you at least a glimpse into the type of stuff that can be done.
:D Agreed, nice to see how it's done though, hopefully soon I'll be learning about PHP. Just wish I had more time :p. This is so interesting, really don't want to work in the construction game any more :).
I'm guessing OP is an abbreviation of 'Overall Project' :eek:. Thank you very much for your input anglewatt, Dunmail :).
Much appreciated :D.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.