Re: [WSG] Advice on design

[Piotr Zalewa]

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]
*******************************************************************