CSS library items active link not showing

Discussion in 'Web Design and Development' started by MacBoobsPro, Jul 10, 2011.

  1. MacBoobsPro macrumors 603

    MacBoobsPro

    Joined:
    Jan 10, 2006
    #1
    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
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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?
     
  3. MacBoobsPro, Jul 10, 2011
    Last edited by a moderator: Jul 10, 2011

    MacBoobsPro thread starter macrumors 603

    MacBoobsPro

    Joined:
    Jan 10, 2006
    #3
    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="http://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>
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    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.
     
  5. MacBoobsPro thread starter macrumors 603

    MacBoobsPro

    Joined:
    Jan 10, 2006
    #5
    Thanks I'll have a look.
     

Share This Page