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...
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
**
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] Background image in the mast head...
from a cursory examination it seesm to position the top left corner of a span
(500px width) 500px to the left of the edge of the visible page. (thus making
the span invisible.)
In what context is it being used?
Paul
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Devendra
Shrikhande
Sent: Wednesday, April 13, 2005 11:22 AM
To: wsg@webstandardsgroup.org
Subject: 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
**
**
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...
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
**
