accessibile css styled headings h1/h2/h3’s and menu navigation

This is for heading/navigation etc.  It allows you to style images so they degrade gracefully (if the image is broken etc – it will show the text)

Is accessible!

Can be used on h1/h2/h3 etc for headings with a div/span or with an ul/li/a tag for a menu/navigation – can combine lots of combinations

H1 example

<div id=”contentMain”>

<h1 class=”heading”>Heading</h1>

</div>

#content h1
{
display:block;
height: 0px;
padding-top:23px; (this is the height of the image)
overflow:hidden;
color: #444444;
}
#contentMain h1.heading
{
background:transparent url(~/url/to/the/image/heading.gif) no-repeat left top;
}

<ul id=”mainMenu”>
<li id=”home”><a href=”home.htm”>Home</a></li>
</ul>

Active Page
<ul id=”mainMenu”>
<li id=”home”><a href=”home.htm” class=”highlighted”>Home</a></li>
</ul>

#mainMenu
{
float: left;
list-style: none;
overflow: hidden;
padding-top: 40px;
text-decoration: none;
}

#mainMenu #home a
{
display:block;
height: 40px;
width: 100px;
background: url(~/url/to/the/image/Home_Off.png);
background-repeat: no-repeat;
}
#mainMenu #home a:hover, #mainMenu #home .highlighed (for when you roll over & on the active page)
{
display:block;
height: 40px;
width: 100px;
background: url(~/url/to/the/image/Home_Off.png);
background-repeat: no-repeat;
}