Question about website logos

blue_harvester · 20 Jul 2006 at 22:48

When I right click on the OCUK logo at the top of the page and select properties I can see that this logo is in fact a GIF file called vBulletin_logo7.gif. However, I've noticed on other sites such as digg.com if I right click on the logo and select properties there doesn't seem to be an image file.

Other sites I've seen this on are popurls.com and logopond.com.

How/why is this done?

growse · 20 Jul 2006 at 22:56

They're using images as backgrounds to html elements rather than elements in their own right. They're therefore part of the style and not the content.

Difference between :

Code:

<img source="ponies.gif" />

and

Code:

<div id="pony" style="background: url("ponies.gif") top left no-repeat;">
</div>

Beansprout · 20 Jul 2006 at 23:08

In firefox: right click > view background image will show you the css image used

blue_harvester · 20 Jul 2006 at 23:12

Thanks for this.

blade007 · 20 Jul 2006 at 23:37

the thing is ... if it's in the css, it makes changing it later very easy, but if you want to click link your logo to your homepage you can't.

swings &r

huppy · 21 Jul 2006 at 01:32

You can - you can add an onclick event to the item who's background is the image.

blade007 · 21 Jul 2006 at 09:10

I didn't know you could add an onclick event into the css file. Sorry -I didn't know until huppy mentioned it. Haven't tried it myself, though.

Augmented · 21 Jul 2006 at 09:11

You can use an event handler to pick up the click (via script, not CSS), but that won't work for users with javascript disabled. And if there should be a link to the homepage there, then you shouldn't be using an onclick in place of an <a> element

.

Simplest solution is to make your <a> element display as a block and then modify the width and height so that it's the same size as your logo:

Code:

<h1><a href="/home">My First Website<a></h1>

Code:

h1 { background: transparent url(/path/to/image.png) no-repeat top left;}

h1 a {
display: block;
width: 250px;
height: 50px;}

Optionally adding a text-indent: -9999px to the <a> to hide the link text from visual browsers.

Google "Fahrner Image Replacement" for similar techniques.

growse · 21 Jul 2006 at 14:21

Are there better methods than the -9999px text movement? Can't help thinking that there must be a better way to hide text from a user who is rendering css, but display the text to someone who isn't. Display: none; I imagine will get rid of the whole div...

Augmented · 21 Jul 2006 at 15:00

growse said:
Display: none; I imagine will get rid of the whole div...

display: none; and visibility: hidden have issues in a number of screen readers that literally scrape the screen, and consequently don't read out the 'hidden' text.
The text-indent trick doesn't suffer from this issue afaik. Best solution I've seen so far.

http://www.stopdesign.com/articles/replace_text/

Al Vallario · 21 Jul 2006 at 16:47

growse said:
Are there better methods than the -9999px text movement? Can't help thinking that there must be a better way to hide text from a user who is rendering css, but display the text to someone who isn't. Display: none; I imagine will get rid of the whole div...

As Augmented stated there's nowt wrong with using a negative text indent to hide the text from users. This particular take on the Fahrner Image Replacement technique was devised by Mike Rundle, and known as the Phark Image Replacement Technique. It's the technique I use, and it works great

Keeping your markup unsoiled and assigning the logo through a stylesheet is a much better solution than inserting inline images - especially when the logo in question does not have a white, or transparent, background. As an added bonus, you can declare a different logo in your stylesheet for handheld devices, rather than commiting the atrocious crime of creating a different handheld site :eek:

av.