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