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