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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Link active dont work

    I cant get the class="active" to Work. What wrong whit this code ?

    All the link have det same color. (a:hover Works)

    Code:
    <html>
    
    <head>
        <title>Menu</title>
     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    .list1 { padding-right:18px;}
    .list1 li { background:#505050; border:1px solid #505050; font:italic 17px/21px Arial, Helvetica, sans-serif; margin-bottom:4px; box-shadow: inset 0 1px 3px ;}
    	.list1 li a{ color:#fff; display:block; padding:13px 0 12px 19px;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;}
    	
    	.list1 li a:hover{color:#8AC400; text-decoration:none;}
    	.active li a {color:#8AC400; text-decoration:none;}
    		
        </style>
    </head>
    <body>
    
    <div>
    	<h2>Menuer</h2>
    				<ul class="list1">
    					<li class="active"><a href="#">Luksus Brunch</a></li>
    					<li><a href="#">Frokostordninger</a></li>
    					<li><a href="#">Festbuffeter</a></li>
    					<li><a href="#">Receptionsbuffet</a></li>
    					<li><a href="#">Tema Buffeter</a></li>
    					<li><a href="#">Natmad</a></li>
    					<li><a href="#">Børnefødselsdag</a></li>
    				</ul>
    
    </div>
    
    </body>
    </html>
    Last edited by VIPStephan; 01-14-2014 at 07:03 PM. Reason: fixed code BB tags

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    It must be .active a {…} because it’s the list item itself that has the class, there is no list item inside an element with class “active”.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello martin1ben,
    It may make more sense like this -
    <li><a href="#" class="active">Luksus Brunch</a></li>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have change this: but still the same, active link dont change color

    [code]

    .list1 { padding-right:18px;}
    .list1 li { background:#505050; border:1px solid #505050; font:italic 17px/21px Arial, Helvetica, sans-serif; margin-bottom:4px; box-shadow: inset 0 1px 3px ;}
    .list1 li a{ color:#fff; display:block; padding:13px 0 12px 19px;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;}

    .list1 li a:hover{color:#8AC400; text-decoration:none;}
    .active a {color:#8AC400; text-decoration:none;}

    </style>
    </head>
    <body>

    <div>
    <h2>Menuer</h2>
    <ul class="list1">
    <li><a href="#" class="active">Luksus Brunch</a></li>
    <li><a href="#">Frokostordninger</a></li>
    <li><a href="#">Festbuffeter</a></li>
    <li><a href="#">Receptionsbuffet</a></li>
    <li><a href="#">Tema Buffeter</a></li>
    <li><a href="#">Natmad</a></li>
    <li><a href="#">Børnefødselsdag</a></li>
    </ul>

    </div>
    [code]

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    That CSS should look more like this -
    Code:
    a.active {
    	color: #8AC400;
    	text-decoration: none;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,589
    Thanks
    0
    Thanked 644 Times in 634 Posts
    You'd do better to use current as the class name rather than active - that way you will not end up getting confused between a.active and a:active which would mean completely different things.

    a.active = any <a class="active"> in the page
    a:active = any <a> tag where the mouse is hovering over it with a mouse button pressed or where the <a> has the focus and the enter key is pressed

    Those are easily confused as it is difficult to see the difference between a . and a : and so using a different class name such as class="current and a.current makes the code far easier to maintain.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Also, I’d like to oppose Excavator’s suggestion and promote mine (of course) because it’s better to have the class on the parent element than on the child, for you can style both, the list item and the link using that class if necessary.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by VIPStephan View Post
    Also, I’d like to oppose Excavator’s suggestion and promote mine (of course) because it’s better to have the class on the parent element than on the child, for you can style both, the list item and the link using that class if necessary.
    If he was styling the parent I would agree with you.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Quote Originally Posted by Doc Brown
    Your future hasn’t been written – no one’s has.
    You never know what might be.


  •  

    Posting Permissions

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