Wickham's XHTML & CSS tutorial

Special Effects

Highlighted text link for current page 1

Home About Us Services

1 green icon This is the HOME page.

The links above show the simplest form of identifying which page you are on. Every page needs a different link to have the class="current". It does have the disadvantage that if you extend your website by adding extra pages or if you want to edit a link url you have to edit every page and you might have hundreds of them. The other methods allow the li tags with the links to be put in a separate "include" file where they will not change depending on which page they refer to and you will only have to edit one file to add extra links or edit urls.

The code for the styles in the head section style tags is:-

a.current:link, a.current:visited { color: black; cursor: default; text-transform: uppercase; font-weight: bold; background-color: lime; } /* unvisited and visited links*/

The body html code is:-

<p>
<a class="current" href="highlighthome.php">Home</a>
<a href="highlightabout.php">About Us</a>
<a href="highlightservices.php">Services</a>
</p>

I've only shown the different styles for the link and visited states as it's unlikely that someone would want the hover or active states for the page they are already looking at.


Highlighted text link for current page 2

2 green icon This method has an id or class for the body (or menu div) and also an id or class in each link in the menu so that when the body (or menu div) id or class matches one of the links; the style will change. So the menu always has the same codes but the body id or class is different on each page.

The advantage of this method is that if you have the same menu on a hundred pages you can use the same menu code and put it in a PHP "include" file so that you only have to edit the menu in one file at a later date for changed or additional links. Only the <li> tag links need to be put in an "include" file.

This method uses one id for the page body (or menu div). This would be the markup code for the Home page:-

<html>
<body id="home">
[Other body page code here]
<ul>
<li id="homelink"><a href="highlighthome.php">Home</a></li>
<li id="aboutlink"><a href="highlightabout.php">About Us</a></li>
<li id="serviceslink"><a ref="highlightservices.php">Services</a></li>
</ul>
[Other body page code here]
</body>
</html>

and this would be the markup code for the About Us page:-

<html>
<body id="about">
[Other body page code here]
<ul>
<li id="homelink"><a href="highlighthome.php">Home</a></li>
<li id="aboutlink"><a href="highlightabout.php">About Us</a></li>
<li id="serviceslink"><a ref="highlightservices.php">Services</a></li>
</ul>
[Other body page code here]
</body>
</html>

which as you can see uses the same li tag markup on every main page.

The Services page would be the same except for <body id="services">

The CSS stylesheet code would be:-

#home li#homelink a, #about li#aboutlink a, #services li#serviceslink a { background-color: #ff0000; }

Note that the styles are in pairs eg #about li#aboutlink a, where there is no comma between the #about and li#aboutlink a ids but there is a comma between the pairs.

If you use a php "include" file, the separate php "include" file (which you might call nav.inc) would have:

<li id="homelink"><a href="highlighthome.php">Home</a></li>
<li id="aboutlink"><a href="highlightabout.php">About Us</a></li>
<li id="serviceslink"><a ref="highlightservices.php">Services</a></li>

using it by inserting this php "include" code <?php include ("nav.inc"); ?> between the ul tags in the markup in every main page instead of the li tag markup:

<ul>
<?php include ("nav.inc"); ?>
</ul>

and remembering to use a .php extension instead of .html for every main page which has the php include code.


Highlighted text and link button for current page

 

3 green icon This is the HOME page.

The code for this pure CSS method is very similar to the last example as it depends on setting an id for the body or ul tag with a section name and pairing that with the li tag id so that the menu button only shows orange when the page is the same as a particular button id. You can, of course, omit the button images and just use different text styles for all the styles.

The advantage of this method is that if you have the same menu on a hundred pages you can use the same menu and put it in a PHP "include" file so that you only have to edit the menu in one file at a later date for changed or additional links. The <ul> tag is different on each page and kept out of the "include" file; all the <li> tag links are put in an "include" file.

The code for the styles in the head section style tags is:-

.siteNav { padding: 0; margin: 0; }
.siteNav ul { margin: 0; padding: 0; }
.siteNav li { margin: 0; padding: 0; display: block; float:left; text-align: center; }
.siteNav a { background:url(images/navbuttongreen.gif) no-repeat; color : #fff; text-decoration: none; font-weight: bold; display: block; height: 26px; width: 94px; line-height: 26px; }
.siteNav ul li a:visited { background:url(images/navbuttongreen.gif) no-repeat 0px 0px; color: skyblue; height: 26px; width: 94px; line-height: 26px; }
.siteNav ul li a:hover { background:url(images/navbuttongreen.gif) no-repeat 0px 0px; color: pink; height: 26px; width: 94px; line-height: 26px; }
.siteNav ul li a:active { background:url(images/navbuttongreen.gif) no-repeat 0px 0px; color: lime; height: 26px; width: 94px; line-height: 26px; }
 
#sectionhome #menuhome a,
#sectionabout #menuabout a,
#sectionservices #menuservices a
{ background:url(images/navbuttonorange.jpg) no-repeat 0px 0px; color: lime; height: 29px; width: 94px; line-height: 29px; padding-top: 0px; margin-top: -3px; cursor: default; }

The most important style is the last one which shows the styles in pairs eg #sectionhome #menuhome a, where there is no comma between the section and menu ids but there is a comma between the pairs.

The body html code is:-

<div class="siteNav noborder">
<ul id="sectionhome">
<li id="menuhome"><a href="highlighthome.php" >Home</a></li>
<li id="menuabout"><a href="highlightabout.php" >About Us</a></li>
<li id="menuservices"><a href="highlightservices.php" >Services</a></li>
</ul>
</div>

The ul id is sectionhome for this page but requires changing to sectionabout or sectionservices on the other pages.

Remove current page menu tab (coded for the "about us" page)

If the matched pairs code is changed so that the image or div has 0px width the current page menu tab will disappear (the code has only been included on the "About Us" page on this site as an example but the code below is for any page that the code is included on):-

#sectionhome #menuhome a,
#sectionabout #menuabout a,
#sectionservices #menuservices a
{ height: 29px; width: 0; line-height: 29px; padding-top: 0px; margin-top: -3px; }

The body markup needs the text between the <a> and </a> tags removed:-

<div class="siteNav noborder">
<ul id="sectionabout">
<li id="menuhome"><a href="highlighthome.php" ></a></li>
<li id="menuabout"><a href="highlightabout.php" ></a></li>
<li id="menuservices"><a href="highlightservices.php" ></a></li>
</ul>
</div>


A PHP method to highlight the current page menu button

 

4 green icon The PHP code on this page is:-

<div class="siteNav noborder">
<?php
define('THIS_PAGE', 'Home');
include('menu.inc');
?>
</div>

The PHP code on the menu.inc "include" page is:-

<?php
define('THIS_PAGE', 'pagename');
 
$menuitem1 = '<a href="highlighthome.php">Home</a>';
$menuitem2 = '<a href="highlightabout.php">About Us</a>';
$menuitem3 = '<a href="highlightservices.php">Services</a>';
 
switch (THIS_PAGE) {
 
case 'Home':
$menuitem1 = '<a style="background: url(images/navbuttonorange.jpg) no-repeat 0px 0px; color: lime; height: 29px; width: 94px; line-height: 29px; padding-top: 0px; margin-top: -3px; cursor: default;" href="#nogo">Home</a>';
break;
 
case 'About':
$menuitem2 = '<a style="background: url(images/navbuttonorange.jpg) no-repeat 0px 0px; color: lime; height: 29px; width: 94px; line-height: 29px; padding-top: 0px; margin-top: -3px; cursor: default;" href="#nogo">About Us</a>';
break;
 
case 'Services':
$menuitem3 = '<a style="background: url(images/navbuttonorange.jpg) no-repeat 0px 0px; color: lime; height: 29px; width: 94px; line-height: 29px; padding-top: 0px; margin-top: -3px; cursor: default;" href="#nogo">Services</a>';
break;
 
default:
break;
}
 
echo '<ul>
<li>'.$menuitem1.'</li>
<li>'.$menuitem2.'</li>
<li>'.$menuitem3.'</li>
</ul>';
?>

I tried putting the code for the orange button and other styles for the current page button into a class at the top of each page and putting the class link into the switch code in the menu.inc file but I found that although the page was operating the margin-top: -3px; to raise the button it was not showing the orange image, so I put the whole style in the menu.inc file.


Notes

View/Source or View/Page Source in browser menu to see all xhtml code.

The body of this page has margin: 20px. Most divs have border: 1px solid #black and padding: 3px coded in the stylesheet tutorial.css.

The examples above are in a containing div with width: 730px; and margin: auto; so that they centralise at large screen resolutions.

A lot of codes have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.

Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.

If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-
<!--[if ie 6]> <style type="text/css"> div { margin-top: 30px; } </style> <![endif]-->
or if there are many different styles, create a separate stylesheet:-
<!--[if ie 6]> <link rel="stylesheet" href="ie6.css" type="text/css"/> <![endif]-->
IE6 will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).

When looking at a page source for this site you may see code like &lt;p>Little Egret&lt;/p> instead of <p>Little Egret</p>. The code &lt; is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing xhtml code tags which are to be activated.

© Wickham 2007


top | special effects