RE: [WSG] Looking for some nicely designed web apps...
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...
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...
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...
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...
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...
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...
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
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
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...
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?
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
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...
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...
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
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?]
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
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 ¤
