Member Avatar for zia zia

Hi guys,

I nedd help with my html and css. I've created a navigation menu. My code for the menu is below.

/*TOP MENU PROPRITIES STARTS HERE*/
									#main-container {
			width : 970px;
			min-height : 400px;
			display : block;
			overflow : hidden;
			margin : 0 auto;
		}
		#main-top {
			width : 970px;
			height : 82px;
			display : block;
			overflow : hidden;
			margin-bottom : 50px;
		}
		#main-topleft {
			width : 300px;
			height : 82px;
			float : left;
			display : block;
			overflow : hidden;
		}
		#main-topright {
			width : 800px;
			height : 82px;
			float : right;
			display : block;
			overflow : hidden;
			padding-top : 5px;
		}
		#mainmenu {
			width : 600px;
			height : 90px;
			float : right;
			left : 50px;
			margin : 2px;
			overflow : hidden;
			padding-top : 10px;
		}
		#mainmenu li {
			display : inline;
			list-style : none;
			margin : 0;
			padding : 0;
		}
		#mainmenu li a {
			display : block;
			height : 90px;
			width : 80px;
			float : left;
			text-align : center;
			font-size : 16px;
			text-decoration : none;
			font-weight : bold;
			margin-right : 3px;
			padding : 8px 14px;
			color : #fff;
			background : #3accfd;
		}
		#mainmenu li a:link, #mainmenu li a:visited {
			background : #3accfd url(../../images/nav_active.jpg);
			color : #fff;
		}
		#mainmenu li a:hover, #mainmenu li a:active, #mainmenu li a:focus {
			background : #91e4e4 url(../../images/nav_hover.jpg);
			color : #CAF0F0;
			margin-top : 10px;
		}
		#mainmenu li.active a:link, #mainmenu li.active a:visited {
			background : #77d0d0 url(../../images/nav_active0.jpg);
			color : #167474;
		}
		#mainmenu li.active a:hover {
			background : #3accfd url(../../images/nav_hover.jpg);
			color : #fff;
			margin-top : 10px;
		}
		/*TOP MENU PROPRITIES ENDS HERE*/

My html code to display the menu:

<body>
<div id="main-container">
<div id="main-top">
  <div id="main-topleft"><img src="images/logo2.jpg" width="300" height="82" alt="incommunities - new user system " /></div>
  <div class="mainmenu">
    <!-- TOP NAVIGATION STARTS HERE -->
    <ul id="mainmenu">
      <li class="active"><a href="dashboard.php">Dashboard</a></li>
      <li><a href="users.php">Users</a></li>
      <li><a href="adduser.php">Add New User</a></li>
      <li><a href="../../help.doc">Help</a></li>
      <li><a href="logout.php">Logout</a></li>
    </ul>
  </div>
</div>
<!-- TOP NAVIGATION ENDS HERE -->

I want the menu to show the active background (nav_active0.jpg) when a user goes to a certain page,and the rest of the pages to be(images/nav_active.jpg)inactive. Can someone help me please...

  • 2 Contributors
  • 1 Reply
  • 84 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by drsim
Member Avatar for drsim

you have to make a class for the selected link. for example

#mainmenu li a.selected{

background : #77d0d0 url(../../images/nav_active0.jpg);

color : #167474;

}

then you have to apply it to the active page and active link.if you have alot of dynamic pages then you need to use javascript to switch the active class to the relevant link.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.