View Full Version : CSS Navigation problem

07-11-2008, 02:19 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; }


<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>

07-11-2008, 02:21 PM
Here My friend had made 1 menu .php which is called in all html files so now I want the button should have three state on mose over, mouseout, and active which will be in php so I dont have to change or if than I have to edit in php

07-12-2008, 11:36 PM
If use use php to add class="current" to whichever link is the current page link, then you can just style the current tab by applying the blue color to the .current link.

07-13-2008, 10:55 AM

that explanation just wont do

he will need 'a code' to paste into the page!