At 1/18/2007 09:39 AM, Peggy Coats wrote:
>I was actually referring to the background image. I have the client
>logo as a bg in the header div. What I wound up doing was putting a
>transparent .gif there and linking that back to the home page. Many
>people will click on a page logo to return to the home page, and she
>wanted that on the site in addition to a text link.
Here's one way to do this:
<h1>
<a href="index.php">
<span>Acme Widgets</span>
</a>
</h1>
/* make the anchor a dimensioned block with background image */
h1 a
{
display: block;
width: 300px;
height: 100px;
background: url("logo.jpg") left top no-repeat;
}
/* apply a hover state for usability */
h1 a:hover
{
/* both normal & hover images are contained in the same image file */
background-position: left -100px;
OR:
/* alternative hover image (doesn't load until hover event) */
background-image: url("logo-hover.jpg");
}
/* hide the text from visual user agents */
h1 a span
{
position: absolute;
left: -1000em;
}
This technique works well. Its main failing is that the logo doesn't
show if images are disabled. For that a foreground image with alt
text is preferred.
Combining both normal and hover images in the same file is a great
technique that obviates the need for preloading images and is
ultimately lighter: two images are heavier than one image twice the
size. Google 'CSS Sprites' for more on that.
Regards,
Paul
__________________________
Juniper Webcraft Ltd.
http://juniperwebcraft.com
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/
