3 Replies - 590 Views - Last Post: 30 April 2013 - 02:33 PM

#1 slappy5star  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 36
  • Joined: 02-November 12

Custom Navbar help

Posted 30 April 2013 - 06:29 AM

I am trying to create a nav bar on a website. When a user clicks a link to view a new page, that pages link should be a darker color to indicate the user is viewing that page. I have been unable to get the color to change. Here is the CSS:

/*This creates a border around the links and changes the color*/
a
{
	display:block;
	width:90px;
	border: solid 1px;
	text-decoration: none;
	background-color: #7CA6CF;
	color: white;
}



HTML for the links:

<div class="header">
	<div class="navbar">
	<ul>
	<li><a href="Home.html">Home</a></li>
/*I attempted to add a class ID to the link below and change its color. This does not work*/
	<li class="link"><a href="">Links</a></li>
	<li><a href="">Events</a></li>
	<li><a href="">Forums</a></li>
	<li><a href="">Contact</a></li>
	<li id="apply"><a href="">Apply Now</a></li>
	</ul> 
	</div>
</div>



Thanks

Is This A Good Question/Topic? 0
  • +

Replies To: Custom Navbar help

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3555
  • View blog
  • Posts: 10,335
  • Joined: 08-June 10

Re: Custom Navbar help

Posted 30 April 2013 - 06:43 AM

I’m not sure, whether the given CSS is supposed to be the regular links’s or the current link’s, but assuming it were the second, the CSS selector is wrong. a would match all links, to get only the current one, you’d need #current_id.

and yes, that is not possible to do without the help of a programming/scripting language.

This post has been edited by Dormilich: 30 April 2013 - 06:44 AM

Was This Post Helpful? 0
  • +
  • -

#3 slappy5star  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 36
  • Joined: 02-November 12

Re: Custom Navbar help

Posted 30 April 2013 - 06:51 AM

I tried using the id as follows: (note I changed from class to ID)

#links a {
     	border: solid 1px;
	text-decoration: none;
	background-color: "some color";
	color: white;
}



Is it not possible to do this without scripting?
Thanks

This post has been edited by Dormilich: 30 April 2013 - 02:31 PM

Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3555
  • View blog
  • Posts: 10,335
  • Joined: 08-June 10

Re: Custom Navbar help

Posted 30 April 2013 - 02:33 PM

View Postslappy5star, on 30 April 2013 - 03:51 PM, said:

Is it not possible to do this without scripting?

since you either need to modify the CSS (the ID value) or the HTML (the position of the id at the current element), you cannot do without scripting. whether that is server-side or client-side does not matter.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1