www.webdeveloper.com
Results 1 to 2 of 2

Thread: Special Case Links

  1. #1
    Join Date
    Nov 2006
    Posts
    13

    Question Special Case Links

    Hello,
    I have in my style sheet, a long section dedicated to my "menulinks", I have two lots of menu links, one as defined in the stylesheet, the other as defined but with a different hove colour. How can I achieve this without re-creating the entire class with that one different property? I tried this:

    Code:
    <a href="" class="menulinks" style="a:hover{color: #6994f5;}">Click</a>
    But it didn't work. Here's the rest of the Links Style section:

    Code:
    					/* MENU LINKS */
    
    a:link.menulinks{
    
    	font-family: arial, sans-serif;
    	color: #ffffff;
    	font-size: 13pt;
    	font-weight: bold;
    	text-decoration: none;
    }
    
    a:visited.menulinks{
    
    	font-family: arial, sans-serif;
    	color: #ffffff;
    	font-size: 13pt;
    	font-weight: bold;
    	text-decoration: none;
    }
    
    a:hover.menulinks{
    
    	font-family: arial, sans-serif;
    	color: #2c29b9;
    	font-size: 13pt;
    	font-weight: bold;
    	text-decoration: none;
    }
    
    a:active.menulinks{
    
    	font-family: arial, sans-serif;
    	color: #ff9314;
    	font-size: 13pt;
    	font-weight: bold;
    	text-decoration: none;
    }

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Extrapolate upon this example:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title></title>
    <style type="text/css">
    * {border:0; padding:0; margin:0;}/* Set everything to "zero" */

    body {min-height:100%; height:101%;
    font:x-small Arial, Verdana, sans-serif;
    voice-family: "\"}\"";voice-family:inherit;
    font-size:small;/*for IE 5.5 */
    } html>body {font-size:small;}
    /*font-size: small; voice-family: "\"}\"";
    voice-family: inherit; font-size: medium;*/} /* Assist IE rendering height, keyword-font sizes, etc. */

    p {font-size: 90%; line-height:1.2em; margin-top:6px;}
    h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif; background-color:none;
    font-style:normal; font-variant:normal; font-weight:normal; margin:11px 0 0 10px;}
    h1{font-size: 1.93em; margin-top:12px;}
    h2{font-size: 1.72em; margin-top:12px;}
    h3{font-size: 1.52em; margin-top:12px;}
    h4{font-size: 1.42em; margin-top:12px;}
    h5{font-size: 1.32em; margin-top:12px;}
    h6{font-size: 1.21em; margin-top:12px;}

    #navigation {width:500px;}
    #navigation ul {}
    #navigation ul li {display:inline; margin:0 10px 0 10px;}
    #navigation ul li a {font-size:1.5em; text-decoration:none; font-weight:bold;}
    #navigation ul li a:hover {color:red; text-decoration:underline;}
    #navigation ul li.special a:hover {color:green; text-decoration:underline;}

    </style>

    <script type="text/javascript"><!--
    // -->
    </script>
    <link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->
    </head>
    <body>

    <div id="navigation">
    <ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li class="special"><a href="#">Four</a></li>
    <li class="special"><a href="#">Five</a></li>
    <li><a href="#">Six</a></li>
    <li><a href="#">Seven</a></li>
    </ul>

    </body>
    </html>
    Last edited by WebJoel; 03-16-2007 at 07:25 PM.

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