RE: [WSG] Looking for some nicely designed web apps...

2005-04-14 Thread Devendra Shrikhande
If you are looking for inspirational eye-candy that are also good example of 
coding:

http://www.webstandardsawards.com/

http://www.stylegala.com


¤ devendra ¤


David wrote:
 Been asked to do the front end visual design of a web app a local
 company is doing. Just looking for some great designs to get ideas from. 
 Any links appreciated.



**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**



RE: [WSG] Background image in the mast head...

2005-04-13 Thread Devendra Shrikhande
I trust you saw the light bulb glowing all the way from Wyoming! 
Deeply appreciate the detailed breakdown and explanation of the process.
 
#dss# 



From: [EMAIL PROTECTED] on behalf of russ - maxdesign
Sent: Tue 4/12/2005 7:35 PM
To: Web Standards Group
Subject: Re: [WSG] Background image in the mast head...



OK, you have an image set in the div as a background, but you want it to
act, to all intents, like a link.

The first thing to do is make the link area the same size as the background
image. This is achieved by converting the a element to a block (display:
block) and then giving it a width and height.

div id=masthead
a href=http://mysite.com;/a
/div

a { display: block; width: 750px; height: 100px; }

Now you have a background image and a link that is the same size.

The problem is that there is nothing inside the link. It is much better to
put content in there. Even more important, this content will be beneficial -
it can be used for print css and as a description for screen readers etc.

So, the next thing to do is place the text inside the a element

div id=masthead
a href=http://mysite.com;My Site/a
/div

The problem is now that this text will sit over the top of your background
image. Probably a very undesirable outcome.

So, you want to move this link text off the page, just for modern browsers
that support css. You do not want to use display: none as this has a
negative impact on screen readers - who may not register this text at all.

A solution is to wrap a span around this link content and then position it
off the page. Some still argue that this is not a good idea. If you choose
to do this option, a good method is position:absolute.

It moves just the span wrapped content off the page - leaving the link still
in position at the same size as the backgrounds image. If you set the span
to left: -500px, it will take the span and its content 500px to the left -
off the page.

You should then set a width of 500px so that if the content grows massively
it will not poke back in the left side of the page. This could occur if a
user set their own large font sizes.

Again, this is only one method, and it has downsides as well as upsides.
Does all that make sense? Apologies if not - written in a rush between
meetings.

HTH
Russ



 As a newbie to CSS, I do not know what this does:

 #masthead span { position: absolute; left: -500px; width: 500px; }

 Would appreciate your explanation - thanks!

 #DSS#


**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**



winmail.dat

[WSG] Background image in the mast head...

2005-04-12 Thread Devendra Shrikhande
Over the last few days I have encountered some sites that use something
similar to the code below:

div id=masthead
a href=http://mysite.com;img src=img/spacer.gif
width=750 height=100 border=0 alt= //a 
/div

In the code above the actual image that one wants to display on the page
in the banner is delivered through the masthead style. I did test the
page and it validated. I would welcome the groups advise on whether this
is an acceptable procedure if one wants to move towards a standards
approach. Also curious as to how this process affects accessibility?



#DSS#
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**



RE: [WSG] Background image in the mast head...

2005-04-12 Thread Devendra Shrikhande
Thank you for prompt and detailed response! 

#DSS#


-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of russ - maxdesign
Sent: Tuesday, April 12, 2005 4:40 PM
To: Web Standards Group
Subject: Re: [WSG] Background image in the mast head...


There are so many ways to do this but I would not use a spacer gif. One
way you could go is:

HTML
div id=masthead
a href=http://mysite.com;spanMy Site/span/a
/div

CSS
#masthead { width: 750px; height: 100px; background: blah... } #masthead
a { display: block; width: 750px; height: 100px; } #masthead span {
position: absolute; left: -500px; width: 500px; }

Be warned, this was written quickly without any checking, so be careful
:)

The advantage with this method is that for non-css users they will get
your text. Also, when you go to print it you can use this text version
if you need to, instead of a background image. There is also another
advantage. You can set the a element to any size - it does not need to
be the entire size of the banner - you could have it only the size of a
logo within the banner image. So, in some ways this method gives you a
good degree of flexibility.

However, like all methods there are good and bad. Worth looking at a
range of them and deciding what is right for your needs.

Russ



 Over the last few days I have encountered some sites that use 
 something similar to the code below:
 
 div id=masthead
 a href=http://mysite.com;img src=img/spacer.gif width=750 
 height=100 border=0 alt= //a /div
 

**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**

**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**



RE: [WSG] Background image in the mast head...

2005-04-12 Thread Devendra Shrikhande
Russ:

As a newbie to CSS, I do not know what this does:

#masthead span { position: absolute; left: -500px; width: 500px; }

Would appreciate your explanation - thanks!

#DSS#
 


-Original Message-

There are so many ways to do this but I would not use a spacer gif. One
way you could go is:

HTML
div id=masthead
a href=http://mysite.com;spanMy Site/span/a
/div

CSS
#masthead { width: 750px; height: 100px; background: blah... } #masthead
a { display: block; width: 750px; height: 100px; } #masthead span {
position: absolute; left: -500px; width: 500px; }

Be warned, this was written quickly without any checking, so be careful
:)

The advantage with this method is that for non-css users they will get
your text. Also, when you go to print it you can use this text version
if you need to, instead of a background image. There is also another
advantage. You can set the a element to any size - it does not need to
be the entire size of the banner - you could have it only the size of a
logo within the banner image. So, in some ways this method gives you a
good degree of flexibility.

However, like all methods there are good and bad. Worth looking at a
range of them and deciding what is right for your needs.

Russ

**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**



RE: [WSG] standards, compliance and forms...

2005-03-10 Thread Devendra Shrikhande
Thanks Patrick and Lukasz

¤ devendra ¤

 


-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Lukasz Grabun
Sent: Thursday, March 10, 2005 2:05 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] standards, compliance and forms...


On Thu, 10 Mar 2005 13:50:26 -0700, Devendra Shrikhande 

 Would welcome suggestions from the list on links that have tutorials 
 that explain how to build accessible and standards compliant online 
 forms.

http://www.webstandards.org/learn/tutorials/accessible-forms/01-accessible-forms.html

Here you are.

-- 
Lukasz Grabun
http://www.grabun.com/
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**

**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**



[WSG] 2 questions: antispam code Doc type...

2005-03-07 Thread Devendra Shrikhande
Issue #1:

Right now I am using a simple ColdFusion tag to generate the following code on 
a web page in an attempt to hide it from spammers:

script language=JavaScript type=text/javascript
document.write(a href='mailto:;);
document.write(Email.Handle);
document.write(\100);
document.write(thedomain.com);
document.write(');

document.write(My Name);  

document.write(/a);
/script
The problem is the HTML Validator croaks when it sees the following line:
document.write(');

And informs me:
Line 720, column 18: document type does not allow element a here

document.write(');



I then noticed issue #2:

Above the mention that my code is not standards compliant, I found this mention:

Character Encoding mismatch!
The character encoding specified in the HTTP header (utf-8) is different from 
the value in the meta element (iso-8859-1). I will use the value from the 
HTTP header (utf-8) for this validation.

So I guess the two alerts above must be related? I cannot figure out where the 
validator is picking out the utf-8 from. 

The page I am referring to is:
http://www.northwestcollege.edu/Intl/


Would welcome suggestions on how I can get this page to validate...



¤ devendra ¤

**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**



[WSG] errant left-alignment

2005-02-28 Thread Devendra Shrikhande
Hello

As I work my way through my first non-table layout, I've  run into a
small quandary. The complete display and CSS-based navigation menu shows
up left-aligned in IE55 PC. All is well in FF.

The HTML and CSS have been validated.

The test page:
http://www.shrikhande.us/CSSPage/index1.htm

Image of display on IE55 to show you how the display and the menu is
left-aligned.
http://www.shrikhande.us/CSSPage/indexIE55.gif

Look forward to your advice on resolving this problem.

Thanks!

#dss#
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**



RE: [WSG] errant left-alignment

2005-02-28 Thread Devendra Shrikhande
Worked like a charm...

Only thing is why is the Local Nav showing up left aligned? I have the
following style:


   div#locnav ul {
   list-style:none;
   padding:0;
   margin:0;
 width: 145px; /* Width of Menu Items */
 border-top: 1px solid #AF0A38;
   
   }
   div#locnav ul li {
   list-style:none;
   display:inline;
   margin:0;
   padding:0;
 text-align: right;
   }
   div#locnav ul li a {
   display: block;
   text-decoration: none;
   color: #777;
   padding: 3px;
 border-right: 1px solid #AF0A38;
   border-bottom: 1px solid #AF0A38;
   }
   div#locnav ul li a:hover {
   color: #fff; background: #AF0A38;
   }

I thought it would show up as right-aligned as it displays in FF.


#dss#
 


-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of John D Wells
Sent: Monday, February 28, 2005 12:59 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] errant left-alignment


You'll need to align the text of the body to be centered, and align the 
text back to left within your wrapper div:

body {
margin: 10px 0 10px 0;
padding:0;
background-color:#FFF;
color:#000;
min-width:750px;
text-align: center;

}
div#wrap {
background:#FFF;
margin:0 auto;
width:750px;
border: 1px solid #5E5E5E;
text-align: left;
}

That should do it (not tested). HTH
-John

On Feb 28, 2005, at 1:12 PM, Devendra Shrikhande wrote:

 Hello

 As I work my way through my first non-table layout, I've  run into a 
 small quandary. The complete display and CSS-based navigation menu 
 shows up left-aligned in IE55 PC. All is well in FF.

 The HTML and CSS have been validated.

 The test page:
 http://www.shrikhande.us/CSSPage/index1.htm

 Image of display on IE55 to show you how the display and the menu is 
 left-aligned. http://www.shrikhande.us/CSSPage/indexIE55.gif

 Look forward to your advice on resolving this problem.

 Thanks!

 #dss#
 **
 The discussion list for  http://webstandardsgroup.org/

  See http://webstandardsgroup.org/mail/guidelines.cfm
  for some hints on posting to the list  getting help
 **




**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**

**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**



[WSG] RE: Multiple list via CSS - newbie question...

2005-02-18 Thread Devendra Shrikhande
As I did some of my own poking around, I went ahead and increased the width of 
the disc-list and found that I could then eliminate the short wrap that is 
inherited from the menu list. So does that mean that I need to have a width 
declaration for every other list style - I thought if I was using a differen 
class I would not need to have to mention every property:value  that is 
addressed in the menu lists styles
 
http://www.shrikhande.us/CSSTest/ http://www.shrikhande.us/CSSTest/ 
 
Looking forward to your input.
 
#dss#
 



From: [EMAIL PROTECTED] on behalf of Devendra Shrikhande
Sent: Fri 2/18/2005 2:42 PM
To: wsg@webstandardsgroup.org
Subject: Multiple list via CSS - newbie question...


As I start to immerse myself into the world of CSS and Web Standards I thought 
I would use Nick Rigby's excellent list menu code from A List Apart 
(http://www.alistapart.com/articles/horizdropdowns/)
 
I then tweaked the code to change the colors and then tweaked it for another 
verison on the same page. However, now I am in a bit of a quandry because when 
I go to add a regular list within the content of the page, I inherit values 
from the menu list style. 
The test page is available at:
http://www.shrikhande.us/CSSTest/
 
For starters, I seek your counsel on:
1- Is my approach the best way to address the two different nav styles.
and.
2. How should I modify my style sheet so the lists that are styled within the 
content area of the page are not influenced by the meun style.
 
I look forward toyour advice.
 
TIA!

#dss#


winmail.dat

RE: [WSG] Not and IE bug?...follow up difference why a difference between IDs and classes?

2005-02-09 Thread Devendra Shrikhande
I thought I should pick up on the comment by Peter and ask one of my many 
newbie questions... What is the advantage of the fact that IDs must be unique 
on a page? I am aware of the circumstance that if you need to repeat an ID, 
set is as a class, but have still not figured out the advantage of an ID.

Apologies if this question is not appropriate for this list and should be 
directed more to a CSS-specific list. 

¤ devendra ¤

 


-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Peter Asquith
Sent: Wednesday, February 09, 2005 3:12 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Not and IE bug?!?


Hi Peter

Peter Flaschner wrote:
 Well, the clearing didn't do it. At least not as I understand it.

If you're following the lead of the page you mentioned, you will find 
removing the

overflow: hidden;

line from the style sheet should solve your problem. By setting the 
height to zero and then hiding the overflow you're effectively removing 
the clearer block from the page layout. Setting visibility to hidden, on 
the other hand, allows the block to take its specified position and size 
but not be rendered by the browser. I.e. it still takes up the space it 
would have.

I note, too, that your example page contains multiple elements sharing 
the same ID. IDs must be unique for a given page.

Cheers
Peter

-- 
Peter Asquith
http://www.wasabicube.com/
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**

**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**



RE: [WSG] newbie with popup menus question

2005-02-02 Thread Devendra Shrikhande
I did get some useful replies and thanks for resource... Yes, fireworks is in 
the past for me!


¤ devendra ¤


-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Kay Smoljak
Sent: Tuesday, February 01, 2005 1:01 AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] newbie with popup menus question


On Fri, 21 Jan 2005 16:06:27 -0700, Devendra Shrikhande [EMAIL PROTECTED] 
wrote:
 Till now I have been using Fireworks to create popup menus for web 
 sites.

Just saw this, looks like there were never any replies... Devendra, if you're 
still listening, Fireworks menus are actually really bad, accessibility-wise 
and from a web standards perspective. I would highly recommend checking out the 
Suckerfish menus - http://www.htmldog.com/articles/suckerfish/dropdowns/ - 
they're simple, lightweight, search engine friendly and all round fantastic.

-- 
Kay Smoljak
http://kay.smoljak.com/
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**

**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**



[WSG] Right aligned lists...

2005-01-25 Thread Devendra Shrikhande
I searched the archives and could not find an answer to my question...

Is it possible to generate right-aligned lists with CSS and have the bullet on 
the right instead of the left?

TIA!

¤ devendra ¤

**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**



RE: [WSG] Right aligned lists...

2005-01-25 Thread Devendra Shrikhande
Thanks Russ - purfect!

 devendra 



-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of russ - maxdesign
Sent: Tuesday, January 25, 2005 3:41 PM
To: Web Standards Group
Subject: Re: [WSG] Right aligned lists...


One method is here http://css.maxdesign.com.au/listutorial/08.htm



 I searched the archives and could not find an answer to my question...
 
 Is it possible to generate right-aligned lists with CSS and have the 
 bullet on the right instead of the left?
 
 TIA!
 
  devendra 
 
 **
 The discussion list for  http://webstandardsgroup.org/
 
 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
 **

**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**

**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**



[WSG] RE: newbie with popup menus question

2005-01-24 Thread Devendra Shrikhande
Andreas, David, Boss, et al:

Thank you for taking the time to respond. Your comments have certainly helped. 
Had forgotten about the invisible load associated with adding those popup menus 
and the need for an alternate navigation system is JavaScript is turned off.

Cheers!


¤ devendra ¤

 
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**



RE: [WSG] content-language[is it search op?]

2005-01-24 Thread Devendra Shrikhande
Thanks Kornel. Very useful resource.

 devendra 

 


-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Kornel Lesinski
Sent: Monday, January 24, 2005 11:32 AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] content-language[is it search op?]


On Mon, 24 Jan 2005 10:10:52 -0800, Chris Kennon [EMAIL PROTECTED] wrote:

 Would this fall under search engine optimization? If so where could I
 find more on the subject?

http://diveintoaccessibility.org/day_7_identifying_your_language.html

-- 
regards, Kornel Lesiski

**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**

**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**



[WSG] newbie with popup menus question

2005-01-21 Thread Devendra Shrikhande
Title: Message



Hello 


I am a newbie (to web 
standards) and have been inspired by Zeldman's "Designing with Web Standards". 


Till now I have been 
using Fireworks to create popup menus for web sites. Would welcome feedback from 
this group on:
1- How do the popup 
menus from Fireworks correspond to working towards XHTML -transitional 
compliance.
2- If the above does not 
validate (would not surprise me if it did not!) would welcome suggestions on 
other options for generating pop-up menus with XHTML-transitional compliance. 
Also how do popup menus work in the context of 
accessibility.

Look forward to your 
advice.


¤ devendra ¤