CSS active links

**Nicholas Diaz** · 08-21-2012 03:55 AM

I need help making my links stay active and reflecting the css tag i assign to the a:active link to show users what page they are viewing.
I will paste in my css code and my nav bar set up. Any help with be appreciated. The way it is working now the hover link works but I can not seem to get the link to stay active when you are on the current page.

CSS

body {
width: 100%;
background-image: -webkit-linear-gradient(top, #a8a8a8, #f0f0f0);
color: #000000; /* text colour */
height: 900px; /* gradient uses the full height of the element */
padding: 3px; /* distance from border edge to text */
margin: auto; auto;

}

#navbar ul li {
float: left;
list-style-type: none;
margin: 0;

}
#navbar ul li a {
color: #ffffff;
background-color: #181818;
width: 180px;
display: block;
height: 50px;
line-height: 50px;
text-decoration: none;
text-align: center;
font-size: 24px;

}

#navbar ul li a:hover {
color: #d80000;

}

#navbar ul li a:active {
color: #d80000;
}

#navcontainer {
width: 900px;
height: 75px;
margin: 0px auto;
}

#header {
width: 100%;
height: 75px;
background-color: #181818;
margin: 0px auto 0px auto;
padding: 3px;

}

#headwrap {
width: 100%;
height: 100px;
}

#headcontainer {
width: 1200px;
height: 100px;
margin: 1px auto;
padding: 5px;
}

#logo {
width: 400px;
height: 100px;
float: left;
padding: 5px;
}

#login a {
width: 400px;
height: 100px;
float: right;
padding: 5px;
font-size: 18px;
}
#reg {
width: 400px;
height: 300px;
margin: 0px auto;
padding-top: 200px;
}

#wrap {
width: 900px;
margin: 0px auto;
clear: both;
overflow: hidden;
padding: 15px;
}

#wrap img {
display:none;
}

#wrap .is-showing {
display: inline;
}

#homewrap {
width: 1200px;
height: 150px;
margin: 0px auto;
padding: 20px;
}

#picleft {
width: 200px;
height: 150px;
float: left;
padding: 10px;

}
#boxleft {
width: 370px;
height: 150px;
float: left;

}
#picright {
width: 200px;
height: 150px;
float: left;
padding: 10px;

}
#boxright {
width: 370px;
height: 150px;
float: left;

}

#footer a {
position: absolute;
bottom: 0;
width: 100%;
height: 75px;
background-color: #181818;
line-height: 70px;
color: #ffffff;

}

#rss {
width: 1200px;
margin: 0 auto;
padding-top: 25px;
}

And here is the code for my navbar

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="styles.css" type="text/css" media="screen"/>
<title>pixel index</title>
<script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script>

</head>

<body>
<div id="header">

<div id="navcontainer">
<table width="100%" class="fulltable">
<div id="navbar">
<?php $currentPage = basename($_SERVER['SCRIPT_NAME']); ?>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="artists.php">Artists</a></li>
<li><a href="gallery.php">Gallery</a></li>
<li><a href="news.php">News Feed</a></li>
</ul>
</div>
</table>
</div>
</div>

<div id="headwrap">
<div id="headcontainer">
<div id="logo">
<img src="images/tat_logo.gif" width="154" height="96" />
</div>

<div id="login">
<tr><td colspan=2><h1><a href="access.php">Login/Register</a></h1></td></tr>

</div>

</div>

</div>

</body>
</html>

**danielshill** · 08-21-2012 07:05 AM

Pasting an enormous block of code which has little relevance to your problem is a sure fire way to not get the response you're looking for.

To summarize: You want a link to be highlighted according to the page that is being viewed?

**Nicholas Diaz** · 08-21-2012 07:18 AM

Yes that is correct... And I don't know which part of my code is causing the problem, so I would assume someone who is willing to help would need all the information.

**Nicholas Diaz** · 08-21-2012 07:19 AM

Also!!! I am wondering if I set up my css file correctly. Can you give me any advice on how to set it up better or does it look good the way it is?

**danielshill** · 08-22-2012 01:39 AM

In my view there are few ways to go about this. If the links are contained in seperate pages it is easy to highlight them differently, the other option would be to write some javascript to recognise the page name and change CSS properties on the appropriate link.

CSS cannot detect this by itself.

The a:active selector refers to when the user clicks on a link - not something more dynamic. I am confident what you are trying to achieve can be done via jQuery.

Aside from that, improvements I would make is to correctly line and indent (I guess the indentation has been removed on this forum) your markup.

I hope this was of help.

DS

**Nicholas Diaz** · 08-22-2012 05:45 AM

Would you mind giving me some examples of adding links per page with css and the jquery build

**danielshill** · 08-22-2012 06:24 AM

Haha. By giving an example wouldn't I just be doing it for you? check http://docs.jquery.com/Tutorials for tutorials using jQuery. It looks like you already have the relevant knowledge on the CSS side of things.

Best of luck!

**jedaisoul** · 08-22-2012 10:49 AM

It seems unlikely that you do not already know this, but here goes...

The simplest way to highlight the page you are on is to hard-code it. E.g. On the home page set up a links bar:

HTML:

<a class="sel" href="index.html">home</a> | 
<a class="unsel" href="page2.html">page 2</a> | 
<a class="unsel" href="page3.html">page 3</a> | 
<a class="unsel" href="page4.html">page 4</a> | 

CSS:

.sel {
color: #FFFFFF;
background-color: #000000;
padding: 4px;
}
.unsel {
color: #000000;
background-color: #FFFFFF;
padding: 4px;
}

That will display "home" in white on black, with the other options in black on white. Then on page 2 you amend the HTML links to:

<a class="unsel" href="index.html">home</a> | 
<a class="sel" href="page2.html">page 2</a> | 

That will display "page 2" in white on black, with the other options in black on white. And so on...

Anyway, apologies if I wasted my (and your) time.

**auntnini** · 08-22-2012 04:06 PM

See demo site http://auntnini.webs.com/about/index.html

Created a .CLASS called .here and applied it to active page link. Remember you can assign multiple space-separated classes to one element.

Code:

====CSS====
#navbarContainer { margin: 5px auto; text-align: center; padding: 10px; border: none; position: relative; background:transparent; clear: both; width: 100&#37;;  float: right;}
/*==HORIZONTAL UL==*/
ul#navbar  { 
	white-space: nowrap; margin: 50px; padding: 0; border: 0; font-size: .95em; line-height: 1.5em; font-style: italic; 
	font-family: garamond, baskerville, "century schoolbook", georgia, "times new roman", times, serif;  
	}
ul#navbar li { 
	 float: left; display: inline; list-style: none; margin: 1px 10px; padding:5px;  width: 6em; text-align: center; }
ul#navbar li a, ul#navbar li a:link, ul#navbar li a:visited  { 
	display: block; text-decoration: none; 	color: #000; background-color: #ccc; border: 2px outset #fc0; 
 width: 100%;  }
ul#navbar li a:hover, ul#navbar li a:active  {   
	display: block; text-decoration: none; 	color: #990000; background-color: #999; border: 2px inset #f00; 
	}	
ul#navbar li.here a,  ul#navbar li.here a:link, ul#navbar li.here a:visited  { 
	color: #990000; background-color: #999; border: 2px inset #c60; cursor: default; 
	}

====HTML====
<div id="navbarContainer"> 
<a href="../index.html"><img src="../siteImages/butchrysler.jpg" width="176" height="155" alt="go to AuntNiNi's Corner" align="left" /></a>

  <ul id="navbar">

    <li id="home"><a href="../index.html">Home</a></li>
    <li id="about" class="here"><a href="#nogo">About</a></li>
    <li id="prints"><a href="../prints/index.html">Prints</a></li>
    <li id="flash"><a href="../flash/index.html">Flash</a></li>
  </ul>
</div><!--close id NAVBARCONTAINER-->

**Nicholas Diaz** · 08-22-2012 08:00 PM

I just wanted to say thank you for giving me more credit then i deserve!

I have learned everything I know over the past 4 or 5 months watching you tube videos and I have never posted a question on a forum before. I assume based on you guys thinking that I should already know this stuff that my code that I have posted must be decent...

I am going to try to go back and add that css example of links on each page and see how that works and the tutorial posted im going to check that out too.

I really appreciate the help if I had the knowledge of doing this or felt confident in my ability I would not of asked for help.

So thank you very much for those of you who helped me.

**Nicholas Diaz** · 08-22-2012 08:24 PM

Thank you a lot!!!!!! Jedaisoul!!!!!!!!!!!!!

Worked like a charm!!!!!

Thread: CSS active links

Thread Tools

Display

CSS active links

like this?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions