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

CSS library items active link not showing

MacBoobsPro

MacBoobsPro

macrumors 603
Original poster
Jan 10, 2006
5,114
6
Ive just converted a menu into a library item so i can update the site without having go through everypage and make changes. I just make changes to the library item. The item is a text list with styles for link, visited, active and hover. Link, hover and visited styles work but for some reason the 'active' style will not.

I want to be able to click on a list item and then the item i click on be highlighted so you can see what section you are in but it simply stays the same as the 'link' style.

Can anyone help?

I can post the CSS if need be.

Thanks
 
Just to ensure you are aware, "active" means while the user has their mouse button pressed, and not the current/active page. Also, order is important.

If that doesn't address the problem, can you show the CSS you're working with or a link to where it is?
 
angelwatt said:
Just to ensure you are aware, "active" means while the user has their mouse button pressed, and not the current/active page. Also, order is important.

If that doesn't address the problem, can you show the CSS you're working with or a link to where it is?
Click to expand...

I have the order right, link, visited, hover, active. I knew 'active' worked when clicked on (and it does) but I could of sworn if the same library item was on the next page the link remained 'active'.

How do you get that effect then using library items? i.e. click on a link but for it to remain 'highlighted/active' so it shows which section you are in?

CSS below (its bloated but I'm still learning :D )

Code: 
<!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" />
<title>www.stuartluff.co.uk</title>
<meta name="description" content="Stuart Luff is an award winning graphic designer based in Sheffield, England. Specialising in brand identity and magazine design. Stuart has over ten years experience in the graphic design industry." />
<meta name="keywords" content="stuart luff, stuartluff, graphic design, design, logos, magazine, los logos, football manager, brand identity, sheffield, graphicdesign, designer, graphic designer, freelance," />
<style type="text/css">
<!--
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
}
p {
	text-decoration: none;
	margin: 0px;
	padding: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.footernormaltext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #555;
	text-decoration: none;
	text-align: left;
	margin: 0px;
	padding: 0px;
}
.footernormaltext A:link {
	text-decoration: none;
	color: #555;
}
.footernormaltext A:visited {
	text-decoration: none;
	color: #555;
}
.footernormaltext A:hover {text-decoration: none; color: #09F}
.footernormaltext A:active {text-decoration: none; color: #EEE;
}
#container {
	background-color: #111;
	padding: 0px;
	height: 651px;
	width: 1000px;
	margin-top: 50px;
	margin-right: auto;
	margin-bottom: 25px;
	margin-left: auto;
}
#topmenubar {
	background-color: #9F0;
	margin: 0px;
	float: left;
	height: 18px;
	width: 975px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	color: #444;
	text-decoration: none;
	text-align: right;
	padding-top: 7px;
	padding-right: 25px;
	padding-bottom: 0px;
	padding-left: 0px;
	background-image: url(images/topshadow.jpg);
	background-repeat: repeat-x;
}
#mainimage {
	background-color: #888;
	margin: 0px;
	padding: 0px;
	float: left;
	height: 276px;
	width: 750px;
	background-image: url(images/brand_deuce.jpg);
	overflow: hidden;
}
#smallone {
	background-color: #BBB;
	float: left;
	height: 276px;
	width: 250px;
}
#smalltwo {
	background-color: #AAA;
	float: left;
	height: 92px;
	width: 250px;
}
#smallthree {
	background-color: #888;
	float: left;
	height: 92px;
	width: 250px;
}
#bottomshadow {
	margin: 0px;
	padding: 0px;
	float: left;
	height: 25px;
	width: 1000px;
	background-color: #222;
	background-image: url(images/bottomshadow.png);
	background-repeat: repeat-x;
}
#maintext {
	text-decoration: none;
	background-color: #222;
	text-align: left;
	margin: 0px;
	float: left;
	height: 240px;
	width: 150px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 25px;
}
#maintext2 {
	background-color: #222;
	float: left;
	height: 240px;
	width: 505px;
	margin: 0px;
	padding-right: 70px;
	padding-left: 0px;
}
#newsarea {
	background-color: #222;
	float: left;
	height: 233px;
	width: 220px;
	text-decoration: none;
	margin: 0px;
	line-height: normal;
	padding-top: 7px;
	padding-right: 30px;
	padding-bottom: 0px;
	padding-left: 0px;
}
#footer1 {
	background-color: #111;
	margin: 0px;
	float: left;
	height: 43px;
	width: 150px;
	padding-top: 17px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 25px;
}
#footer2 {
	background-color: #111;
	float: left;
	height: 43px;
	width: 150px;
	margin: 0px;
	padding-top: 17px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
#footer3 {
	background-color: #111;
	margin: 0px;
	padding: 0px;
	float: left;
	height: 60px;
	width: 425px;
}
#footer4 {
	background-color: #111;
	margin: 0px;
	float: left;
	height: 49px;
	width: 250px;
	padding-top: 11px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.quicklinks {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-style: normal;
	font-weight: normal;
	color: #555;
	text-decoration: none;
	text-align: left;
}
.copyright {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: normal;
	color: #555;
	text-decoration: none;
	text-align: left;
}
.footerboldtext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #555;
	text-decoration: none;
	text-align: left;
	margin: 0px;
	padding: 0px;
}
#stuartlufflogo {
	position: relative;
	z-index: 1;
	height: 43px;
	width: 187px;
	left: 0px;
	top: 25px;
	margin: 0px;
	padding: 0px;
}
#copyrightbar {
	background-color: #222;
	margin: 0px;
	float: left;
	height: 18px;
	width: 725px;
	padding-top: 7px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 25px;
}
#copyrightbar2 {
	background-color: #222;
	margin: 0px;
	float: left;
	height: 18px;
	width: 215px;
	padding-top: 7px;
	padding-right: 25px;
	padding-bottom: 0px;
	padding-left: 10px;
}
#copyrightbar2 a:link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: normal;
	color: #555;
	text-decoration: none;
	text-align: left;
}
#copyrightbar2 a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: normal;
	color: #555;
	text-decoration: none;
	text-align: left;
}
#copyrightbar2 a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: normal;
	color: #AAA;
	text-decoration: none;
	text-align: left;
}
#copyrightbar2 a:active {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: normal;
	color: #DDD;
	text-decoration: none;
	text-align: left;
}
.links {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: normal;
	color: #555;
	text-decoration: none;
	text-align: left;
}
.transbarbuttons {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
	color: #BBB;
	text-decoration: none;
}
#transparentbar {
	position: relative;
	z-index: 1;
	height: 18px;
	width: 725px;
	left: 0px;
	top: 208px;
	background-image: url(images/mainimageshade.png);
	padding-top: 7px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 25px;
	margin: 0px;
}
#transparentbar a:link {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #BBB;
	text-decoration: none;
}
#transparentbar a:visited {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #BBB;
	text-decoration: none;
}
#transparentbar a:hover {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #09F;
	text-decoration: none;
}
#transparentbar a:active {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #EEE;
	text-decoration: none;
}
.newsselector {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #EEE;
	text-decoration: none;
	text-align: left;
	margin: 0px;
	padding: 0px;
	line-height: 1.5em;
}
.newsselector A:link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 1.5em;
	font-weight: normal;
	color: #888;
	text-decoration: none;
}
.newsselector A:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 1.5em;
	font-weight: normal;
	color: #888;
	text-decoration: none;
}
.newsselector A:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 1.5em;
	font-weight: normal;
	color: #09F;
	text-decoration: none;
}
.newsselector A:active {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 1.5em;
	font-weight: normal;
	color: #FFF;
	text-decoration: none;
}
-->
</style></head>

<body bgcolor="#555555">
<div id="container">
  <div id="topmenubar">
    <p> </p>
  </div>
  <div id="mainimage">
    <div id="stuartlufflogo"><img src="images/stuartlufflogo.png" width="187" height="43" alt="stuartlufflogo" /></div>
    <div class="transbarbuttons" id="transparentbar"><!-- #BeginLibraryItem "/Library/menubar.lbi" -->
<a href="index.html">HOME</a>***//***<a href="branding_deuce.html">PORTFOLIO</a>***//***<a href="news_gallery.html">NEWS</a>***//***<a href="article_reap.html">ARTICLES</a>***//***<a href="form.html" target="_blank">GET QUOTE</a>***//***<a href="gallery.html">ART GALLERY</a>* *//***<a href="contact.html">CONTACT</a><!-- #EndLibraryItem --></div>
  </div>
  <div id="smallone"><img src="images/small_deuce.jpg" width="250" height="276" alt="smalldeauce" /></div>
  <div id="bottomshadow"><img src="images/bottomshadow.png" width="1" height="25" /></div>
  <div id="maintext">
    <p class="quicklinks">Portfolio</p>
    <p class="newsselector"><br />
    </p><!-- #BeginLibraryItem "/Library/portfolio.lbi" -->
	<p class="newsselector"><a href="branding_deuce.html">Brand Identity</a></p>
    <p class="newsselector"><a href="illustration_sameshit.html">Illustration</a></p>
    <p class="newsselector"><a href="mag_deuce.html">Magazines</a></p><!-- #EndLibraryItem --><p class="welcometext"> </p>
  </div>
  <div id="maintext2">
    <p class="quicklinks">Brand Identity</p>
    <p class="newsselector"><br />
    </p><!-- #BeginLibraryItem "/Library/branding list.lbi" -->
	<p class="newsselector"><a href="branding_deuce.html">Deuce Magazine</a></p>
    <p class="newsselector"><a href="branding_footballmanager.html">Football Manager</a></p>
    <p class="newsselector"><a href="branding_extreme.html">Extreme (Euphoria)</a></p>
    <p class="newsselector"><a href="branding_snowstorm.html">Snowstorm</a></p>
    <p class="newsselector"><a href="branding_misclogos1.html">*Various</a></p><!-- #EndLibraryItem --></div>
   <div id="newsarea">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 1,
  interval: 6000,
  width: 220,
  height: 200,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'default'
  }
}).render().setUser('stuart_luff').start();
</script></p>
</div>
  <div id="footer1">
    <p class="footerboldtext">Telephone</p>
    <p class="footernormaltext">+44 (0) 7515 667 959</p>
  </div>
  <div id="footer2">
    <p class="footerboldtext">Email</p>
    <p class="footernormaltext"><a href="mailto:info@stuartluff.co.uk">info@stuartluff.co.uk</a></p>
  </div>
  <div id="footer3"></div>
  <div id="footer4"></div>
  <div id="copyrightbar">
    <p class="copyright">All content © Stuart Luff 2011</p>
  </div>
  <div class="links" id="copyrightbar2">
    <p><!-- #BeginLibraryItem "/Library/links.lbi" --> <a href="http://www.apple.com/uk" target="_blank">Apple</a>**<a href="https://www.macrumors.com" target="_blank"> MacRumors</a>** <a href="http://www.gestalten.com" target="_blank">Gestalten</a><!-- #EndLibraryItem --></p>
</div></div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-5468665-2");
pageTracker._trackPageview();
} catch(err) {}</script></body>
 
Last edited by a moderator:
I'm not exactly sure what you mean by "library" here, but what a lot of people do is to use a class on links that represent the current page, e.g., <a class="current-page">Link</a>. I use PHP to determine what page I'm on and add the class to the correct link. There's a number of specific ways to go about doing this. Here's one such tutorial. The page shows 3 techniques.
 
angelwatt said:
I'm not exactly sure what you mean by "library" here, but what a lot of people do is to use a class on links that represent the current page, e.g., <a class="current-page">Link</a>. I use PHP to determine what page I'm on and add the class to the correct link. There's a number of specific ways to go about doing this. Here's one such tutorial. The page shows 3 techniques.
Click to expand...

Thanks I'll have a look.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back