Comments on: Highlight Current Page in an HTML Document Using CSS http://www.webdevtuts.net/css/highlight-current-page-in-an-html-document-using-css/ Making tutorials fun and easy! Sun, 06 Nov 2011 11:56:06 +0000 hourly 1 http://wordpress.org/?v=3.2.1 By: Marcell http://www.webdevtuts.net/css/highlight-current-page-in-an-html-document-using-css/#comment-29286 Marcell Fri, 01 Apr 2011 22:25:42 +0000 http://www.webdevtuts.net/?p=735#comment-29286 I don't think you can have sub item highlighted. Ive seen it done using a cms but not plain css I don’t think you can have sub item highlighted. Ive seen it done using a cms but not plain css

]]> By: Robert Anthony http://www.webdevtuts.net/css/highlight-current-page-in-an-html-document-using-css/#comment-29056 Robert Anthony Wed, 30 Mar 2011 15:12:53 +0000 http://www.webdevtuts.net/?p=735#comment-29056 I found this tip immensely useful, and can totally relate to the "end of the world feeling" I had prior to reading this . I DO have a question about menus that include sub sections that also require being highlighted as active. Can you have multiple ID's in a body tag to establish both the parent and sub menu items as being active? I found this tip immensely useful, and can totally relate to the “end of the world feeling” I had prior to reading this . I DO have a question about menus that include sub sections that also require being highlighted as active.
Can you have multiple ID’s in a body tag to establish both the parent and sub menu items as being active?

]]> By: Marcell http://www.webdevtuts.net/css/highlight-current-page-in-an-html-document-using-css/#comment-25746 Marcell Mon, 28 Feb 2011 02:15:05 +0000 http://www.webdevtuts.net/?p=735#comment-25746 No problem! Glad it helped :) No problem! Glad it helped :)

]]> By: nicky http://www.webdevtuts.net/css/highlight-current-page-in-an-html-document-using-css/#comment-25741 nicky Mon, 28 Feb 2011 01:55:56 +0000 http://www.webdevtuts.net/?p=735#comment-25741 this helped me so much! thanks! this helped me so much! thanks!

]]> By: Marcell http://www.webdevtuts.net/css/highlight-current-page-in-an-html-document-using-css/#comment-14669 Marcell Mon, 15 Nov 2010 19:49:50 +0000 http://www.webdevtuts.net/?p=735#comment-14669 Great method Michael. I've tried the current class with css but did not have luck. Maybe I did something wrong but will give it a try again. I know the li.current works with wordpress though. Great method Michael. I’ve tried the current class with css but did not have luck. Maybe I did something wrong but will give it a try again. I know the li.current works with wordpress though.

]]> By: Jeranon http://www.webdevtuts.net/css/highlight-current-page-in-an-html-document-using-css/#comment-14571 Jeranon Sun, 14 Nov 2010 00:20:45 +0000 http://www.webdevtuts.net/?p=735#comment-14571 I agree w/ Steve, however, since you're only ever using it once on a page, you can use either "class" or "id". It's an easier way to code it, but, very creative method you've come up w/! One other thing, Notepad++ isn't a wysiwyg... :D I agree w/ Steve, however, since you’re only ever using it once on a page, you can use either “class” or “id”.
It’s an easier way to code it, but, very creative method you’ve come up w/!
One other thing, Notepad++ isn’t a wysiwyg… :D

]]> By: Michael Glasser http://www.webdevtuts.net/css/highlight-current-page-in-an-html-document-using-css/#comment-14497 Michael Glasser Fri, 12 Nov 2010 16:44:05 +0000 http://www.webdevtuts.net/?p=735#comment-14497 I do much the same thing but with a different method. Instead of having a different ID (or class) for each page (each body tag) I use a "current" class for each button I want to show is current. This means the CSS can be as simple as: li.current {      padding:10px;      background:#FF0000;      margin-right:5px;      color:#FFFF00;      text-decoration:none; } The advantage is I do not need to alter my CSS for every page I add - just add the current class to any li I want to show is the current page. The HTML looks like this: <div id="nav">       <ul>            <li class="current"><a href="index.html">Home</a></li>            <li><a href="about.html">About</a></li>            <li><a href="team.html">Team</a></li>            <li><a href="video.html">Video</a></li>            <li><a href="contact.html">Contact</a></li>            </ul> </div> This is also less work for each navigation section - no need to add IDs (or classes) to every li. You can also easily have multiple items show as current, which is useful for when you have a hierarchical menu system. I do much the same thing but with a different method. Instead of having a different ID (or class) for each page (each body tag) I use a "current" class for each button I want to show is current. This means the CSS can be as simple as:
li.current {
     padding:10px;
     background:#FF0000;
     margin-right:5px;
     color:#FFFF00;
     text-decoration:none;
}
The advantage is I do not need to alter my CSS for every page I add – just add the current class to any li I want to show is the current page. The HTML looks like this:
<div id="nav">
      <ul>
           <li class="current"><a href="index.html">Home</a></li>
           <li><a href="about.html">About</a></li>
           <li><a href="team.html">Team</a></li>
           <li><a href="video.html">Video</a></li>
           <li><a href="contact.html">Contact</a></li>
           </ul>
</div>
This is also less work for each navigation section – no need to add IDs (or classes) to every li. You can also easily have multiple items show as current, which is useful for when you have a hierarchical menu system.

]]> By: Steve http://www.webdevtuts.net/css/highlight-current-page-in-an-html-document-using-css/#comment-2319 Steve Sat, 20 Feb 2010 13:16:06 +0000 http://www.webdevtuts.net/?p=735#comment-2319 Another way you can accomplish this would to utilize the class attribute. This can be accomplished by creating a class of active (class="active") to the active page. Since classes are reusable, you can apply them to as many pages as you want. you'll get the same effect and less writing. Another way you can accomplish this would to utilize the class attribute. This can be accomplished by creating a class of active (class=”active”) to the active page. Since classes are reusable, you can apply them to as many pages as you want.

you’ll get the same effect and less writing.

]]> By: kelvinwebdesigner http://www.webdevtuts.net/css/highlight-current-page-in-an-html-document-using-css/#comment-1522 kelvinwebdesigner Tue, 19 Jan 2010 17:25:19 +0000 http://www.webdevtuts.net/?p=735#comment-1522 Nice! Keep writing, I think you articles are very basic but helpfull. CG Nice!
Keep writing, I think you articles are very basic but helpfull.
CG

]]> By: Highlight Current Page in an HTML Document Using Css | Webdevtuts | CSS Guru How to CSS http://www.webdevtuts.net/css/highlight-current-page-in-an-html-document-using-css/#comment-1466 Highlight Current Page in an HTML Document Using Css | Webdevtuts | CSS Guru How to CSS Mon, 18 Jan 2010 09:37:52 +0000 http://www.webdevtuts.net/?p=735#comment-1466 [...] post: Highlight Current Page in an HTML Document Using Css | Webdevtuts Share and [...] [...] post: Highlight Current Page in an HTML Document Using Css | Webdevtuts Share and [...]

]]>