linking images/bg images

linking images

[meybaud35mm]

Hey -

I have been having the hardest time linking bg images. I have always been told that it was not possible but sites like lynda.com and just general css sites use this technique of image replacement/link.

here is the selector and inline elements that i am working with.

/* selector */
#aboutus {
width : 95px;
height : 32px;
float : left;
text-indent : -9999px;
background : #fff, url(images/aboutusbtn.jpg) no-repeat;
}

/* inline */

<div id="aboutus"><a href="www.test.com">test</div>

The image completely disapears and the text remains. This is the polar opposite of everything that I have been reading and learning. NUMBER 1 QUESTION : HOW DO YOU LINK IMAGES THAT WILL BREAK DOWN INTO A STANDARD TEXT DOCUMENT IN THE CASE CSS IS DISABLED WITHIN A BROWSER?

I appreciate the senior opinions!

[doodlebee]

>>The image completely disapears and the text remains.<<

I'm not sure what you mean by the rest of the question (it's a little bit convoluted...) but as to this, you need to remove the comma after the #FFF in your "background" call.

[Setek]

As doodlebee said, the image not being there is probably due to that.

Now, also, about linking background images - you won't get a link on that background image that way?

Rather, if you put the background image on the

a

itself...

div#header a { display: block;
float: left;
width: 100px;
height: 100px;
background: #fff url('rar.jpg') no-repeat left top;
outline: none;
text-indent: -1000em; }

This way, the entire background image will be linkable. Removing of outline is for Firefox (aswell as other standards-compliant browsers, I think) that adds a dotted outline on click.

Better thing about this also, is that you can do

a:hover

stuff too, if you wanted to subtley change the image on mouse over :)

[edit]
P.S.: Remember to close your <a> tag... in your example code you haven't :)
[/edit]

[edited by: Setek at 2:29 am (utc) on Sep. 6, 2006]

[meybaud35mm]

Well... besides the comma in my "call", it still doesnt create link the image.

I want to be able to link an image that will collapse in the case that CSS is disabled. Basically a "true" style sheet. Case in point, if you visit [csszengarden.com...] all the images and css is disabled in order do create a document. I really dont know how else to explain myself - lol.

I appreciate the replies.

[meybaud35mm]

You're right. I find myself getting confused at how others create selectors, etc. I tend to "group" inline elements when others create a seperate selector for each inline element.

i.e.;

div#test a {

div#test p {

div#test cite {

I am not sure if this is just preferrence, but I preffer something along these lines:

div#test a, p, cite {

Thanks!

[bedlam]

i.e.;

div#test a {

div#test p {

div#test cite {

I am not sure if this is just preferrence, but I preffer something along these lines:

div#test a, p, cite {

This will not have the effect you're looking for. The grouping you've shown above is equivalent to the following set of separate selectors:

div#test a { ... }
p { ... }
cite { ... }

There are no shortcuts with selectors. This is perhaps unfortunate from the point of view of code brevity, but it has the substantial advantage of making code completely unambiguous. The proper grouping of your original stuff looks like this:

div#test a,
div#test p,
div#test cite { ... }

-b

[Setek]

I tend to "group" inline elements when others create a seperate selector for each inline element

Technically, a

p

isn't an inline element by default, it's a block element.

Also, they really only need to be grouped in such a way when the same styles are being applied to them.

Only when that occurs, can you optimise your code down a bit by having the same property values for multiple selectors.

Which is probably why you've seen separate style rules for each, rather than grouped together - they hold differing property values.

[meybaud35mm]

Thanks for the reply.