On 18-02-06 Peter Snow Cao wrote: >I want to put a link to my homepage on the logo image that is in the >upper left-hand corner of every page put there by the CSS file [...] >http://bikechina.com/ >What is the best way to do this? Is there a way I can do it in CSS or >do I have to use HTML to code each page? > > Lots of replies ... In the meantime I was experimenting somewhat. I found it can be done in CSS only, without losing text-readers, screen-readers, or missing the link when css and or images are turned off. No image-mapping or transparent.gif is needed. This is the testpage <http://home.tiscali.nl/developerscorner/css-discuss/test-bikechina.htm> logo in css (see source code), with screenshots of all options I see.
I found it can be done also with the (css-styled) logo as foreground image in the html. Also without losing the rest. This is the second testpage <http://home.tiscali.nl/developerscorner/css-discuss/test-bikechina-htm.htm>: logo in html. While the logo is important to show for the identity of the site and company, I agree with the 2 reasons to use the 2nd way, as David Dorward wrote: 1. CSS might be turned off or unavailable. - Then a background-img is invisible. In the html-way the logo is displayed as long as images are supported. 2. The user might want to print the page (and background image printing is disabled by default). - The logo in the html will always be printed together with the banner. Note: to serve the text/screen-readers, I've put a text-link as layer under the images. It has an <h3> tag to get better noticed by search engines. This text-link is also visible when in a screen-browser the images are turned off. Then a small trick is hidden: Although the text-link cannot be clicked itself when images are turned off and the css is still on (link covered up by the img-layers), I made a "pseudo-click". By dividing the the words "Bike China" and "Adventures" in two lines, they are just under the clickable area of the logo. Then even if the logo itself is not visible, this area can be clicked (also the tooltip is appearing when hovering). To see the area: Firefox > WebDeveloper extension > Images > outline images > background images. Endless, css! :-) Greetings, francky ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
