www.webdeveloper.com
Results 1 to 11 of 11

Thread: CSS active links

  1. #1
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293

    CSS active links

    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>

  2. #2
    Join Date
    Dec 2011
    Posts
    74
    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?

  3. #3
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    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.

  4. #4
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    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?

  5. #5
    Join Date
    Dec 2011
    Posts
    74
    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

  6. #6
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    Would you mind giving me some examples of adding links per page with css and the jquery build

  7. #7
    Join Date
    Dec 2011
    Posts
    74
    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!

  8. #8
    Join Date
    Mar 2012
    Posts
    1,831
    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> |&nbsp;
    <a class="unsel" href="page2.html">page 2</a> |&nbsp;
    <a class="unsel" href="page3.html">page 3</a> |&nbsp;
    <a class="unsel" href="page4.html">page 4</a> |&nbsp;

    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> |&nbsp;
    <a class="sel" href="page2.html">page 2</a> |&nbsp;

    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.

  9. #9
    Join Date
    Sep 2006
    Location
    new york
    Posts
    267

    like this?

    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-->
    Last edited by auntnini; 08-22-2012 at 05:18 PM. Reason: gold

  10. #10
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    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.

  11. #11
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    Thank you a lot!!!!!! Jedaisoul!!!!!!!!!!!!!

    Worked like a charm!!!!!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles