I'd say
<ul id='menu'>
<li id='home'><a href='/whatever'>Home</a></li>
[...]
</ul>
In CSS make the "a" work as a block and assign relevant background + set
the padding to make the text appear in needed position. Be careful about
size and padding. To avoid that problem add span tag inside:
<a...><span>Home</span></a> and add margin to it.
With span it would look like
HTML:
<ul id='menu'>
<li id='home'><a href='/whatever'><span>Home</span></a></li>
[...]
</ul>
CSS:
#menu a {
display: block;
width: [x]px;
height: [y]px;
}
#home {
background: url(/path/to/cropped/background/for/home.jpg) no-repeat 0
0;
}
#home span {
margin-top: [z]px;
}
You may add :hover and all such of actions to it as well.
Piotr
On Fri, 2008-07-25 at 10:42 +0100, Web Dandy Design wrote:
> Hi,
>
> I'm looking for some advice on the best way to put together the navigation
> for the following design: http://www.webdandy.co.uk/navigation-slice.jpg, so
> that it's standards compliant and accessible (and if at all possible avoids
> using images for the text under the nav buttons).
>
> Thanks,
>
> Elaine
>
> http://www.webdandy.co.uk
>
>
>
>
>
> *******************************************************************
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> *******************************************************************
>
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
