Topic: background image as a link?

I'm using stylesheets to load the images in the background like this :

#header{
	height:100px;
	background: url(../imgs/topper.jpg) no-repeat;
	width: 750px;
	text-align:left;
}

#header h1{
	padding:0px;
	margin:0px;
}

#header h1 span{
	display: none;
}

Then in the html I have this :

<!-- ye ol' hide the text in a span trick -->
<div id="header"><h1><span><a href="index.html">My Site</a></span></h1></div>

It doesn't make it a link anymore because the span is set to display:none;

So is there a better way to do this and to make that still a link? I really don't want to put any images in the html.

Thanks in advance!

Later,

C:\

[uber_quick_reply]

what about changing the markup to :

<div id="header"><h1><a href="index.html"><span>My Site</span></a></h1></div>

and making setting the A to display:block; so it takes all the space it can. Or something like that

[/uber_quick_reply]

how about giving the background imag eto the link itself?
You could use a   and width on the link, if you want to supress the text as well...
or try to put the link around the div... that should work as well...

I don't think that putting an anchor tag around a div is semantically correct however.

butI agree that putting the background image to the link itself would be a workaround.

Cheers,

ah yes. poi comes in with a quick winner. I did try putting the link around the div but like Blaise said, it's not semantically correct and won't validate at all.

That's what I was really after is some nice semantic html because at this rate, this site is going to change about a million times before it's done and I
don't want to have to write the html over and over.

Thanks for the super uber quick replies!

Later,

C:\

Of course, the whole idea of using a background image as a link is not really semantically correct either.

Why not just use an <img> tag? It looks from the code like that is your actual intent anyway - you are using the div to show the image. Seems kinda backwards...

If the image is your header, you could put the image within the <h1> tags, and you've got all your bases covered.

CPrompt: Too bad, my english is even worse than usual in my uber quick replies.

DL-44: True. With the alt attribute set correctly of course. I just wonder how good/bad it is for accessibility/semantic/SEO, but I guess it's absolutely fine. And cherry on the cake, if the browser is not retarded, with images off, it should render the alt as normal content using the style rules of the A, H1, DIV, whatever.

^ exactly =)

If you hide the text within the a appropriately, it's fine.

I, for example, in one of the templates I recently made, have a header DIV that displays the whole head image, title and all, in the background. To make the title words render as a link I created a span wrapped around an anchor, the anchor being made to display block and take up all available space. The span had the title attribute set, giving us our tooltip on rollover and making it functional for screenreaders.


Justice 4 Pat Richard

yet another

completely redundant, linked and no image in the markup, and semantic as possible? you be the judge there

good stuff. Thanks for the help and JK for that groovy example.

I thought that it made it more "semantic" by NOT using images in the html at all. Maybe I'm a bit confused on what is ment by "semantic"?

Later,

C:\

Semantic, as I understand it, is "using the correct element for the correct purpose". So, italics use <em>, bold uses <strong>, code goes into <code> blocks, quotes into <blockquote>, paragraphs into <p> and so on and so forth.


Justice 4 Pat Richard

It's all about intent.

There are places where the intent is to show an image. There are places where the image is just the fluff.

The img tag is a valid part of the mark up, and avoiding using it when the intent is to show an image is just as pointless as avoiding tables when what you are trying to show is a table.

How your situation falls into this is open for debate, of course. IMO, if you are looking for something to click on, and using an image such as a logo relevant to the site, it is less semantic to create hidden elements and try work arounds when all you are really doing is trying to make an image to click on...

Just a side note - it is important to note that while italics and bold are often the attributes assigned to <em> and <strong>, it is certainly not a given, and they are certainly not synonymous.

Well true. Under the idea of semantics being "the right element used for the right purpose" then <em> would be for any text you want to emphasise, and <strong> owuld be for any text you decide needs to be given greater focus. That fits in nicely with the intent, doesn't it?


Justice 4 Pat Richard

OK, well I guess I was a little misled on what "semantic" actually ment. I guess that in non graphical browsers that the alt attribute of the image tag will be read instead of the image name? That would be the purpose of the alt attribute.

I do think it might be better in my situation to actually have the image in the html but the example that JK did is quite good

Later,

C:\

Yes. alt attributes are there to provide something meaningful when the image can't be loaded due to a broken link or unsupported format. So, in otherwords, text-based brosers will read the alt attribute if it exists to try and give their user's something meaningful to refer to.


Justice 4 Pat Richard

I may be a bit late, but here's what I'd do: http://asylum.zavaboy.com/ex/ex1.htm

In addition to zavaboy's solution, I would throw in Stu Nicholl's new FF dotted-border fix.

http://cssplay.co.uk/menu/naf_ir.html

Cheers,
DC