Topic: background image as a link? Pages that link to <a href="https://ozoneasylum.com/backlink?for=27332" title="Pages that link to Topic: background image as a link?" rel="nofollow" >Topic: background image as a link?\

 
Author Thread
CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

IP logged posted posted 01-16-2006 15:32 Edit Quote

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

code:
#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 :

code:
<!-- 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:\

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 01-16-2006 15:57 Edit Quote

[uber_quick_reply]

what about changing the markup to :

code:
<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]

Tyberius Prime
Paranoid (IV) Mad Scientist with Finglongers

From: Germany
Insane since: Sep 2001

IP logged posted posted 01-16-2006 15:57 Edit Quote

how about giving the background imag eto the link itself?
You could use a &nbsp; 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...

Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

IP logged posted posted 01-16-2006 16:10 Edit Quote

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,

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

IP logged posted posted 01-16-2006 16:34 Edit Quote

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:\

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 01-16-2006 18:37 Edit Quote

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.

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 01-16-2006 20:09 Edit Quote

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.

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 01-16-2006 20:40 Edit Quote

^ exactly =)

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 01-17-2006 16:36 Edit Quote

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

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 01-17-2006 16:55 Edit Quote

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

JKMabry
Maniac (V) Inmate

From: raht cheah
Insane since: Aug 2000

IP logged posted posted 01-17-2006 19:10 Edit Quote

yet another

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

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

IP logged posted posted 01-19-2006 04:03 Edit Quote

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:\

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 01-19-2006 08:26 Edit Quote

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

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 01-19-2006 12:38 Edit Quote

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.

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 01-19-2006 12:50 Edit Quote

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

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

IP logged posted posted 01-21-2006 04:20 Edit Quote

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:\

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 01-22-2006 05:55 Edit Quote

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

zavaboy
Bipolar (III) Inmate

From: f(x)
Insane since: Jun 2004

IP logged posted posted 01-22-2006 20:57 Edit Quote

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

divinechaos
Obsessive-Compulsive (I) Inmate

From:
Insane since: Dec 2001

IP logged posted posted 01-24-2006 01:33 Edit Quote

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



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu