Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Roc
    Roc is offline
    New Coder
    Join Date
    Jul 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Optimum way of writing this code?

    Code:
    #leftnav a:link, a:visited {
    	font-family: Helvetica, Arial, sans-serif;
    	text-decoration: none;
    	color:#ffffff;
    	font-weight: normal;
    	}
    
    
    #leftnav a:hover, a:active {
    	font-family: Helvetica, Arial, sans-serif;
    	text-decoration: none;
    	color:#ffcc33;
    	font-weight: normal;
    	}
    
    
    
    
    a:link, a:visited {
    	font-family: Helvetica, Arial, sans-serif;
    	text-decoration: none;
    	color:#4f63e3;
    	font-weight: normal;
    	}
    
    a:hover, a:active {
    	font-family: Helvetica, Arial, sans-serif;
    	text-decoration: none;
    	color:#ffcc33;
    	font-weight: normal;
    	}
    What is the most optimum way of writing this code.

    There seems to be a conflict when I try to achieve this.
    In FF2 the last two blocks when present over-ride the previous 2 block values.
    When absent, all the links (not just the div links) take the color value of the previous blocks.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,876
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    Quote Originally Posted by Roc View Post
    In FF2 the last two blocks when present over-ride the previous 2 block values.
    When absent, all the links (not just the div links) take the color value of the previous blocks.
    Of course, because you tell it to do that.
    Your code:
    Code:
    #leftnav a:link, a:visited {…}
    Correct code:
    Code:
    #leftnav a:link, #leftnav a:visited {
    See any difference?
    You have to specify the correct selectors because the #leftnav only counts for one following selectors, the second one would apply to all visited links if you don’t add the #leftnav selector as well.

    Then, if you specify the most general rules at the end thn of course they overwrite the previous ones (except if they have a higher specifity due to ID selectors or something to that effect).

    Also if you specify styles for links in general, you only have to specify styles that actually change for :hover or :visited, etc. I.e. your code could be written like that:
    Code:
    a {
    	font-family: Helvetica, Arial, sans-serif;
    	text-decoration: none;
    	color:#4f63e3;
    	font-weight: normal;
    }
    
    a:hover, a:active {color:#fc3;}
    #leftnav a:link, #leftnav a:visited {color:#fff;}

  • #3
    Roc
    Roc is offline
    New Coder
    Join Date
    Jul 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks, now I feel like an idiot.
    Takes time to grasp all the basics of CSS.

    Anyway now I understand the logic of your code (quite concise too). However that didnt work out 100% as desired.. the following did.
    Code:
    a {
    	font-family: Helvetica, Arial, sans-serif;
    	text-decoration: none;
    	color:#4f63e3;
    	font-weight: normal;
    }
    
    a:hover, a:active {color:#fc3;}
    .navlinks a:link, .navlinks a:visited {color:#fff;}
    .navlinks a:hover, .navlinks a:active {color:#fc3;}
    Any idea why the #fff text links were not turning #fc3 on hover without the last line.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,876
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts


  •  

    Posting Permissions

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