Re: [WSG] Advice on design

[Ian.chamberlain]

It may be worth taking at look at listamatic, I "borrowed" a nab bar  
solution that copes with zooming quite well from there a while back.

Regards
Ian
http://www.chamberlainsofharrogate.co.uk

Sent from my Ipod touch


On 25 Jul 2008, at 11:17, Martin Heiden <[EMAIL PROTECTED]> wrote:

Elaine,

on Friday, July 25, 2008 at 11:42 wsg@webstandardsgroup.org wrote:

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).

I'd use an unordered list with background images for the graphics and
normal text. For this, you must slice the navigation. The decorative
part of the image may remain one single slice.

Problem: Text-Sizing.

If the user increases the text size, the layout will break.
It may be possible to avoid this by absolute positioning with em
sizing:

<ul id="navigation">
   <li id="home"><a href="home.html"><span>Home</span></a></li>
   [...]
</ul>

ul#navigation li {
 float:left;
}

ul#navigation li a {
 display: block;
 height: 100%;
 width: 100%;
}

li#home {
 position: relative;
 width: n px;
 height: m px;
}

li#home a span {
 position: absolute;
 top: y em;
 left: n/2 px;
 width: z em;
 margin-left: -z/2 em;
}

I didn't test this, but it may be a starting point.

regards

 Martin







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