RE: [WSG] Advice on design
Hi,
Thanks to everyone for the help with the design of the site. As always very
helpful suggestions and ideas.
Thanks,
Elaine
http://www.webdandy.co.uk
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Martin Heiden
Sent: 25 July 2008 11:18
To: Web Dandy Design
Subject: Re: [WSG] Advice on design
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=homea href=home.htmlspanHome/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]
***
Re: [WSG] Advice on design
hmm, well if u - used images as background for the effect and text on it in html then you could add a nice highlight effect when people hoover them... - you can always use plain text but I'm not sure about the positioning - you can also use just images and use a nice swap technique - and provide a text-only navigation at the bottom of the page like in this tutorial: http://www.subcide.com/tutorials/csslayout/ -- Krystian - Sunlust - I-M-A: Freelancer on the side: http://sunlust.net Full time Website Designer: http://smesolutions.co.uk/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Advice on design
hello, i will do it in this way http://www.gaspar.com.pt/ex/banner.gif Cut the bottom of banner and then slice every images of the menus then cut the image height. Then in each link you put the image with diferents height and then the text. Problems of this solution, if u use hover, you have to use a script that change the src of img, easy with mootools and all images have a little yellow blur that is part of the background of the image, u could for the text to start a little down to dont cath de blur. Or forget all this cut all images like the att and then ul li id=menu1atext/a/li li id=menu2atext/a/li li id=menu2atext/a/li But every link a, will have a diferent padding-top and background, and you can use the hover. Good luck for the site. Cheers, gaspar 2008/7/25 Web Dandy Design [EMAIL PROTECTED]: 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] *** -- Make it simple for the people -- http://www.artideias.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Advice on design
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...spanHome/span/a and add margin to it.
With span it would look like
HTML:
ul id='menu'
li id='home'a href='/whatever'spanHome/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]
***
Re: [WSG] Advice on design
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=homea href=home.htmlspanHome/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]
***
Re: [WSG] Advice on design
Hi, I would suggest you use the popular sprite technique for this. Using HTML text as link text - applying a background image to the link, changing its background positioning on rollover (if you do want to use a different visual for a mouse over effect). I wrote a quick tutorial for my webstudents on this soem time ago - might explain in more detail what I mean: http://graphiceyedea.co.uk/wp/2007/10/30/clever-rollovers/ (have a look at the sample file for links to other articles on this) Hope this helps :-) Prisca On Fri, Jul 25, 2008 at 10:56 AM, Krystian - Sunlust [EMAIL PROTECTED]wrote: hmm, well if u - used images as background for the effect and text on it in html then you could add a nice highlight effect when people hoover them... - you can always use plain text but I'm not sure about the positioning - you can also use just images and use a nice swap technique - and provide a text-only navigation at the bottom of the page like in this tutorial: http://www.subcide.com/tutorials/csslayout/ -- Krystian - Sunlust - I-M-A: Freelancer on the side: http://sunlust.net Full time Website Designer: http://smesolutions.co.uk/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- • graphiceyedea.co.uk • eyedea.eu • eyelearn.org • -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Advice on design
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=homea href=home.htmlspanHome/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]
***
