Hello,


I'm working on a nav bar and i've got my rollover images in place but its not doing everything I was hoping for.

Right now the buttons only change while you are hovered over them. Is there a way i can add a 3rd image that would only display on the link you are visiting?

So that you would know what page you were on.


Thanks for any help and advice

There isn't a url-matching pseudoselector, so you can't do this in pure CSS. Here's an example that would work use CSS, HTML, and PHP:

PHP Code:

<style type="text/css">
#navigation a {
}
#navigation a:hover {
}
#navigation a.active {
}
</style>
<div id="navigation">
  <a href="index.php?page=1"<?php echo ((int)$_GET['page'] == 1)?' class="active"':'';?>>Page 1</a>
  <a href="index.php?page=2"<?php echo ((int)$_GET['page'] == 2)?' class="active"':'';?>>Page 2</a>
  <a href="index.php?page=3"<?php echo ((int)$_GET['page'] == 3)?' class="active"':'';?>>Page 3</a>
</div>

so you can't do this in pure CSS.

Sure you can. Add a class to the menu item for the "current" page, and in your CSS specify whatever you want the selected button to look like.

Something like this:
<li> <a class="selected" href="page.htm">You are here</a</li>
CSS might then be:

#nav a.selected{background: purple; color: #fff;}

Originally Posted by LadynRed

Sure you can. Add a class to the menu item for the "current" page, and in your CSS specify whatever you want the selected button to look like.

Something like this:
<li> <a class="selected" href="page.htm">You are here</a</li>
CSS might then be:

#nav a.selected{background: purple; color: #fff;}

I think I might just not have been clear. In your example, you have assigned 'class="selected"' by hard-coding, but in mine, I read the GET vars to determine which of the navigation links should have that class (I chose to name it "active" in my example). You can do the styling in pure CSS, but CSS doesn't know which "page" you're on without some external script (server side or browser side) telling it.

I know even less about php than I do css so i'm trying to go that route and its sorta working...

I'm having trouble making the image that indicates the current page do anything. Its really really small and sitting to the left of my rollover images.

I've tried adding a width and height to match the size of the image i'm using but nothing is changing.

Is it something simple I've missed or am I way off?

HTML

<ul id="nav">
<li class="c1"><br /></li>
<li><a href="/"class="home-link">Home<span><img src="http://www.estetica-design-forum.com/images/onhome.gif" width="150" height="50" alt="Home" /></span></a></li>
<li><a href="/about.html" class="about-link">About<span><img src="http://www.estetica-design-forum.com/images/onhome.gif" width="150" height="50" alt="About" /></span></a></li>
<li><a href="/contact.html" class="contact-link">Contact<span><img src="http://www.estetica-design-forum.com/images/onhome.gif" width="150" height="50" alt="Contact" /></span></a></li>

CSS

#nav                        { background: url(images/bodybackground.jpg) repeat; }
#nav, #nav li                { margin: 0; padding: 0 }
#nav li                        { display: inline }
#nav a                        { color: #301b0a; background: inherit;
                               text-decoration: none }
#nav a:hover                { border: none } /*for IE*/
#nav a span                  { font-size: 45px; line-height: 1 }
#nav a img                   { vertical-align: middle}                
#nav a:hover img               { visibility: hidden }

#home .home-link, #about .about-link, #contact .contact-link{
    background:  url(/images/offhome.gif) no-repeat;
    height: 150px;
    width: 50px
}
#home a:hover span               { background:  url(/images/offhome.gif) no-repeat }
#about a:hover span               { background:  url(/images/offhome.gif) no-repeat }
#contact a:hover span           { background:  url(/images/offhome.gif) no-repeat }

I would go it the PHP way.

If you want the simple HTML/CSS way, you are looking for something like this:
http://nontroppo.org/test/tab1.html

But instead of simple CSS for each, you can use your images of choice as the background. Just make sure you make the a {} the size of your images.

How this works is that on each separate HTML page, the CSS stays the same, but the "active" class changes in the HTML body itself, depending upon which page you are on. All the nonactive links are the same dormant style while the active one is different. You don't need a separate div per link, you just need to have the a{} and a:hover{} to have a specified size, the browser does the rest.

However, in this instance you can have the <li> based link structure on each HTML page, meaning if you want to change it down the road it will be an editing process per page. Also, it will be a longer processing time, but essentially unnoticeable. If you want the most efficient way, do it the PHP way. Fairly simple and useful, and doesn't require editing of each page.

In your example, you have assigned 'class="selected"' by hard-coding, but in mine, I read the GET vars to determine which of the navigation links should have that class (I chose to name it "active" in my example).

Acknowledged that scripting is one answer, IF you are proficient in that scripting language. I am not a PHP coder and there are many, many people who are not either, so I'm going to use what I know and what's available to me rather than trying to implement something I do not understand. In my case, at work, we cannot use PHP, so I HAVE to have other solutions.

The css solution does require some hard coding, but because it's css, changing it is relatively easy and you only have to add the classes once.

Oh I see what you mean. Like this right?

css

#nav a:hover, #nav a.current {
background:url(images/spritew.png) 0px -34px no-repeat;

home html

<li><a href="/" class="current">Home</a></li>
<li><a href="/about.html">About</a></li>

about html

<li><a href="/">Home</a></li>
<li><a href="/about.html" class="current">About</a></li>

Its working great! Now i just need to get it centered.

I've tried adding margin:0 auto; and text-align:center; to the ul tags and it didnt seem to have any effect.

#nav ul {
width:800px;
w\idth:485px;
height:34px;
margin:0 auto;
text-align:center;
}

Any idea what I'm missing?

For those preferring a browser-side solution, here's one with javascript and CSS:

<!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>
<style type="text/css">
#navigation a {
  color:#090;
}
#navigation a:hover {
  color:#009;
}
#navigation a.active {
  color:#900;
}
</style>
<script type="text/javascript">
function init() {
  if (document.getElementById('navigation')) {
    var nav_links = document.getElementById('navigation').getElementsByTagName('A');
    if (nav_links && nav_links.length > 0) {
      //Clear current tab settings
      for (var i = 0;i< nav_links.length;i++) {
        nav_links[i].className = nav_links[i].className.replace(/active/,'');
      }
      //Set active tab
      var active_tab = location.search.replace(/\?page=/,'');
      document.getElementById('nav_page_' + active_tab).className = document.getElementById('nav_page_' + active_tab).className + ' active';
    }
  }
}
</script>
</head>
<body onLoad="init();">
<div id="navigation">
  <a href="index.html?page=1" id="nav_page_1">Page 1</a>
  <a href="index.html?page=2" id="nav_page_2">Page 2</a>
  <a href="index.html?page=3" id="nav_page_3">Page 3</a>
</div>
</body>
</html>