SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2007
    Location
    Oslo, Norway
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Listmenu styling problem

    Hi folks,

    I'm using a list based menu with Javascript that expand/collapse on click. It works fine for menus that has submenus (dynamic links) but I can not get menus without submenus (static links: About/Contact) to work properly.
    For some reason it gets a different styling when it is active and I can not see where that styling comes from...
    I have made an active style but active menus don't get the applied settings. I have inserted the menu directly in the index page for About and Contact to get it working.

    Here is the css code for the menu:
    HTML Code:
    /* CSS Document */
    
    	/****************************************************************************************
    	* 	LAYOUT CSS FOR THE MENU
    	****************************************************************************************/
    
    	#dhtmlgoodies_listMenu a {	/* Main menu items */
    		color:#E50069;
    		font-family: Helvetica, sans-serif;
    		font-size: 13px;
    		font-weight: bold;
    		text-decoration:none;
    		line-height: 19px;
    		outline: 0;
    	}
    	#dhtmlgoodies_listMenu ul li a{	/* Sub menu */
    		color: #E50069;
    		font-family: Helvetica, sans-serif;
    		line-height: 19px;
    		font-weight:normal;
    		outline: 0;
    	}
    	#dhtmlgoodies_listMenu ul li ul li a{	/* Sub Sub menu */
    		color: #E50069;
    		font-weight:normal;		
    		line-height: 19px;
    		outline: 0;
    	}
    	
    	#dhtmlgoodies_listMenu :hover {	/* Styling of hover menu item */
    		color:#000;
    		font-weight: bold;
    	}
    
    	#dhtmlgoodies_listMenu .activeMenuLink{	/* Styling of active menu item */
    		color: #000;
    		background: #FF0;
    		margin-left: -4px;
    		padding: 1px 12px 1px 4px;
    		font-weight:bold;		
    		line-height: 19px;
    	}
    
    	
    	/*
    	No bullets
    	*/	
    	#dhtmlgoodies_listMenu li{
    		list-style-type:none;	
    		font-weight:normal;		
    		line-height: 19px;
    		width: auto;
    	}
    	
    	/*
    	No margin and padding
    	*/
    	#dhtmlgoodies_listMenu, #dhtmlgoodies_listMenu ul{
    		margin:0;
    		padding:0px;
    		font-weight:normal;		
    		line-height: 19px;
    	}
    
    	/* Margin of sub menu items */
    	#dhtmlgoodies_listMenu ul{
    		display:none;
    		margin-left:10px;
    		margin-top: -1px;
    		font-weight:normal;		
    		line-height: 19px;
    	}
    	
    	  #dhtmlgoodies_listMenu .currentlyActiveMenuItem {
            color: #000;
    		font-weight:bold;		
     		background: #FF0;
    		margin-left: -4px;
    		padding: 1px 4px 1px 4px;
      }
    	  #dhtmlgoodies_listMenu li.active {
            color: #000;
    		font-weight:bold;		
     		background: #FF0;
    		margin-left: -4px;
    		padding: 1px 4px 1px 4px;
      }
    Here is the code for the menu:
    HTML Code:
    <ul id="dhtmlgoodies_listMenu">
    <li class="active" style="margin-bottom: 3px;"><a href='/about/'>Om Ego Design</a></li>
    <li style="margin-bottom: 3px;"><a href='/contact/'>Kontakt</a></li>
    <br />
    <li style="margin-bottom: 3px;"><a href="#">Identiteter</a>
    <ul>
    <li>	<a href="/showcase.php?sid=5&cid=1">Bremyk </a></li>
    <li>	<a href="/showcase.php?sid=5&cid=2">Brelett </a></li>
    <li>	<a href="/showcase.php?sid=5&cid=3">Testkunde </a></li>
    </ul>
    </li>
    <li style="margin-bottom: 3px;"><a href="#">Pakning</a>
    <ul>
    <li>	<a href="/showcase.php?sid=6&cid=3 ">Testkunde </a></li>
    </ul>
    </li>
    <li style="margin-bottom: 3px;"><a href="#">Andre arbeider</a>
    <ul>
    </ul>
    </li>
    <li style="margin-bottom: 3px;"><a href="#">Arkiv</a>
    <ul>
    </ul>
    </li>
    </ul>
    Any help would be much appreciated.
    I have really tried a lot of things to get this working, and if there is a better way please let me know.
    Here is a link to page so you can see:
    http://www.egodesign.no/about/

    Thanks!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    It's not really clear to me what the issue is. If I visit the About and Contact pages, the link is highlighted.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2007
    Location
    Oslo, Norway
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your reply.

    Yes they are highlighted, but not the way I have declared in the css.
    It should have black text and the yellow background should not be full width, only a little padding as in the css.
    Same as the links on Identity below.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by hoeiesta View Post
    It should have black text
    You need to style the <a> rather than the <li>:

    Code:
    #dhtmlgoodies_listMenu li.active a {
    color: black;
    font-weight: bold;
    background: yellow;
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2007
    Location
    Oslo, Norway
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect:-)

    Thank you very much!

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by hoeiesta View Post
    Perfect:-)

    Thank you very much!
    You're most welcome.


Bookmarks

Posting Permissions

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