www.webdeveloper.com
Results 1 to 4 of 4

Thread: hover, active and visited link

  1. #1
    Join Date
    Aug 2012
    Location
    South Africa
    Posts
    1

    hover, active and visited link

    Hi there

    I am having difficulties with adding a hover rule and active background color to my left side bar. Please help if possible

    Here is my left nav sidebar

    <table style="height: 0px; width: 800px;" border="0" cellspacing="0" cellpadding="0" align="left">
    <tbody>
    <tr align="center" valign="top">
    <td style="text-align: left; width: 800px;" align="left" valign="middle"><a href="http://www.amplesolar.co.za/" style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: normal;">Overview</a><span style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: normal;"> </span><br style="color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: normal;" /><a href="http://www.amplesolar.co.za/" style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: normal;">History</a><span style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: normal;"> </span><br style="color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: normal;" /><a href="http://www.amplesolar.co.za/" style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: normal;">Strategic Focus</a><br style="color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: normal;" /><a href="http://www.amplesolar.co.za/" style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: normal;">Philosophy</a><span style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: normal;"> </span><br style="color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: normal;" /><a href="http://www.amplesolar.co.za/" style="font-family: Verdana, Arial, Helvetica, sans-serif; line-height: normal;">Methodology</a></td><table>

    Im no expert at HTML but I understand here and there. It seems as if each link has its own style, which makes changes a nightmare. If its too much to ask I understand

    Thanks
    MrVince

  2. #2
    Join Date
    Mar 2011
    Posts
    1,137
    You need to learn the fundamentals of Cascading Stylesheets. The place to start is by getting rid of all the 'style' attributes on your HTML tags, and start using stylesheets. Use appropriate 'id' and 'class' attributes instead that can be used by your stylesheets to control the appearance of your pages without having to edit each individual element. There are lots of CSS tutorials for beginners available online. Pick one. You'll be amazed at how much easier this all becomes. Good luck!
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Mar 2012
    Posts
    1,340
    I endorse the above comments, but would add that you really must use line breaks to make the source code legible. Your code looks like it has been "compressed", by removing line breaks, white space and comments.

  4. #4
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    Well I'll try to help you man,

    Create a file called styles.css in this file you will set all of your css rules which you will now be able to call on this external file from any other file working on your site. The code in this file will look like this,


    body {
    width: 100&#37;;
    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: #ffffff;
    background-color:#f80000;

    }

    #navbar .on {
    color: #d80000;
    padding: 4px;
    }

    #navbar .off {
    color: #ffffff;
    background-color: #181818;
    padding: 4px;
    }

    #navcontainer {
    width: 900px;
    height: 75px;
    margin: 0px auto;
    clear: both;
    }
    and so on and on and on on on on on on on and soooooooo on... Get it?

    Now in the file you are using your styles.css file you will need to call on this file, this is how you do it,

    ***********************Look in the heading below here where I call the styles.css file****************************
    <!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">
    <ul>
    <li><a class="on" href="index.php">Home</a></li>
    <li><a class="off" href="artists.php">Artists</a></li>
    <li><a class="off" href="gallery.php">Gallery</a></li>
    <li><a class="off" href="news.php">News Feed</a></li>
    </ul>
    </div>
    </table>
    </div>
    </div>

    If you look at my links on this page i showed you, you will see that I am referencing the styles.css sheet and turning on and off links that I have attached to the navbar class on the styles sheet. If you grasp the concept of understanding working with this styles sheet externally you will quickly understand calling and setting up your code.

    PS. Jedaisoul just recently helped me with something I was having problems with so you should probably listen to him and check some tutorials out.

    Let me know if this helps at all or if it just confused the heck out of you.

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