PDA

View Full Version : CSS Navigation problem


indianleo
07-11-2008, 01:28 PM
Dear Friends I got a navigation table in html which is tabbed navigation it has two states on mouse over it turns blue on mouse out now I want when it click on any tab and when it goes on respective page that tab should turn to blue which shows that tab is of active page pls find the code below and check online www.edutopper.com

CSS Code

#header { width:951px; height:119px; background:#138dcb url(../images/header_bg.jpg) no-repeat; border-bottom:1px solid #7a7a7a; }

#logo { background:url(../images/name.jpg) no-repeat; float:left; width:140px; color:#fff; padding:10px 0 0 25px; }

#mini_navigation { float:right; margin:0 2px 0 0; }
#mini_navigation li { list-style:none; display:inline; }
#mini_navigation li a { background:url(../images/blue_tab.jpg) no-repeat; width:102px; height:26px; color:#fff; font-size:11px; float:left; text-decoration:none; text-align:center; padding-top:4px; margin-right:3px; }
#mini_navigation a:hover { text-decoration:underline; }

#navigation { display:table; margin:62px 0 0 0; width:800px; padding:0; float:left; }
#navigation li { display:inline; }
#navigation li a { float:left; background:url(../images/grey_tab.jpg) no-repeat; width:92px; height:18px; margin:2px; text-align:center; padding-top:7px; color:#013f7a; font-weight:bold; text-decoration:none; text-transform:uppercase; font-size:11px; }
#navigation li a:hover { color:#9d4815; text-decoration:underline; }



HTML Code

<ul id="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="courses.html">Courses</a></li>
<li><a href="faculty.html">Faculty</a></li>
<li><a href="#">Demo</a></li>
<li><a href="buycourse.html">Buy Course</a></li>
<li><a href="#">FAQ's</a></li>
<li><a href="#">News</a></li>
</ul>