Highlight Current Page in an HTML Document Using Css
When designing a web page using HTML/CSS you might have notice that you cannot have an active page just by creating a new index file. In this tutorial I will teach you the simple steps to creating an active CSS state. Open your favorite WYSIWYG (Dreamweaver, coda, notepad++) editor.
Click here for Demo
Getting an active state when using css can be very frustrating if you’re not that familiar with css. Many developers that are new to css often think it is the end of the world when really the active state can be accomplish with very little code.
The Body
The body is of the most important roles when you’re trying to create an active page using css. The reason the body tag is very important because when its time to define what page the user is on the body tag will keep that page active. You’re probably thinking that just body tag can complete that and truth is it can but with a little bit of help from an id or class tag. to give the body a id or class name you would simply do the following.
body id="home" or body class="home"
Everytime you create a new index page make sure you change the body class or id name and you will later know why.
The HTML
For the HTML I created/ a basic navigation menu with and unique id name. Notice every link such as home, about, etc all have different id names. The reason they all have different id names is so we can identify that certain linktag in the css file.
<div id="menu-nav"> <ul> <li id="home"><a href="index.html">Home</a></li> <li id="about"><a href="about.html">About</a></li> <li id="team"><a href="team.html">Team</a></li> <li id="video"><a href="video.html">Video</a></li> <li id="contact"><a href="contact.html">Contact</a></li> </ul> </div><!--end menu-nav-->
The CSS
Ok so you now have and idea of how the menu has to be laid out using html. Now its time to define each id element from the html. If you look at the code below
you will notice that every css tag has the body id, followed by the menu id with the a(active) tag and finished with the css properties. Take a look at css and compare it to the html.
body#home #home a,
body#about #about a,
body#team #team a,
body#video #video a,
body#contact #contact a{
padding:10px;
background:#FF0000;
margin-right:5px;
color:#FFFF00;
text-decoration:none;
}
This was not a tutorial but I truly hope it helped you guys out. I know many people face this problem quite often and do not know what to do. It was a simple, fast, and sweet technique.
Tags: css, current, highlight, Tutorial
Author: Marcell Purham
Hey there! My name is Marcell Purham and I am a 17 year old web developer/ designer from Chicago IL. When I'm not designing or coding things up I'm probably skateboarding, or gaming, or just being the average human. If you would like to stalk me just follow me @marcellpurham
3 Responses
Leave a Reply
Loading ...
[...] post: Highlight Current Page in an HTML Document Using Css | Webdevtuts Share and [...]
Nice!
Keep writing, I think you articles are very basic but helpfull.
CG
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.