[RESOLVED] Image replacement h1 linking problem

@LynxoJan 21.2008

Hello

I have a problem with the main headline I have, where you have the companys name. I used a h1, replaced the text with an image with the following technique:

#head h1 {
background: url(../i/logo.jpg) no-repeat;
width: 127px;
height: 75px;
text-indent: -9000px;
margin: 0 auto;
position: relative;
top: 15px;
cursor: pointer;
}

The important bits are the first four paragraphs, everything else is just positioning it.

Well, the problem is that I have made it link (inside the h1 tags) but when I click it, nothing happens! Neither in Firefox 2, nor IE7.

Anybody knows what to do here? I really have no idea…?

to post a comment

CSS

11 Comments(s) _↴

@alexejJan 21.2008 — #i think you cant link the background image and if you dont have any content in your H1 tags then no link.

Just i guess doh

@LynxoauthorJan 21.2008 — #i think you cant link the background image and if you dont have any content in your H1 tags then no link.

Just i guess doh[/QUOTE]
I have the text as content. However, it is way out of the way with the text indent-thingy... I guess I actually made the text clickable, not the background-image then?

@jesseriddleJan 21.2008 — #Have anyway where we can actually take a look at this particular issue that your experiencing. Is the site you working on have a live link?

@here-to-helpJan 21.2008 — #You can use Javascript to make your <h1> tag clickable

[code=html]
 <h1 onclick="document.location='http://www.google.com';" style="cursor:pointer">Click Here</h1>
 
 [/code]

And you can still keep your bg image.

----------------------------------
Web Services: www.funmediadesign.com

Web Templates: www.funmedia.ca

@smyhreJan 21.2008 — #Well you can do <a href="yourlink.com"><h1>title</h1></a> and that will work but the problem is that it will not validate so don't use that method.

Method 2 involves actually bringing your title in by way of image tag in html which is what you wanted to avoid in the first place, but it is the easiest method I can think of in only html or css.

Method 3 is well....complicated but it works. You have to make a blank png image the height and width of the h1. And do the following:

[code=html]<div id="header">
 <h1><a href="http://www.yourlink.com"><img src="images/test.png" class="test" /></a>Your Title</h1>
 </div>[/code]

[code=html]h1 {
 background-image: url(../images/title.gif);
 background-repeat: no-repeat;
 height: 146px;
 text-indent: -999999px;
 margin: 0px 0px;
 }
 
 .test {margin: 0px 0px 0px 999999px;}
 
 #header {height: 146px; overflow: hidden;}
 [/code]

But method three is really way more work then you want so basically javascript is probably your best bet to keep your bg image and have the link as well.

@LynxoauthorJan 21.2008 — #For now, I'm using the non-validating method. And no, it isn't live unfortunally...

However, are you saying Javascript is my last bet here? Usually, I can find a way around those problems.

That last black png thingy, as you say, seems to be more trouble than its worth...

But huge thanks of course to all suggestions! ?

@smyhreJan 21.2008 — #here-to-help has a good javascript solution but if you really want to stay away from javascript, for whatever reason, I would actually use method 2 which I posted before. I can't really think of any other way around it in html and css then what I have already posted. Though now that I think about it method 3 can be simplified in the following way:

[code=html]<div id="header">
 <h1><a href="http://www.yourlink.com"><img src="images/test.png" alt="click here" /></a>Your Title</h1>
 </div>[/code]

[code=html]h1 {
 background-image: url(../images/title.gif);
 background-repeat: no-repeat;
 height: 146px;
 }
 
 #header {height: 146px; overflow: hidden;}[/code]

As long as the blank png image uses the full width and height of the header div and overflow is hidden then the title will not be shown. So there would be no need for text indent and margins. though this would require that you use a png fix for IE6 as it doesn't fully support png images

@Jeff_MottJan 21.2008 — #Wow... JavaScript!? People are making this way more complicated than it needs to be.

Lynxo, instead of hiding the content of the H1, instead just hide the content of the H1 A.

#head h1 {
 background: url(../i/logo.jpg) no-repeat;
 width: 127px;
 height: 75px;
 [color=silver]/* text-indent: -9000px; *//* Delete */[/color]
 margin: 0 auto;
 position: relative;
 top: 15px;
 cursor: pointer;
 }
 
 #head h1 a {
 display: block;
 [b][color=red]text-indent: -9000px;[/color][/b]
 width: 100%;
 height: 100%;
 }

@here-to-helpJan 21.2008 — #Jeff Mott is right.

This should work for you and is better than Javascript.

[code=html]<html>
 <head>
 <style>
 
 #head h1 a{
 background: url(../i/logo.jpg) no-repeat;
 text-indent: -9000px;
 cursor: pointer;
 }
 </style>
 </head>
 
 <body>
 
 <div id="head">
 <h1><a href="http://www.google.com" >Company name</a></h1>
 </div>
 </body>
 </html>
 [/code]

---

revised: Didn't try it in IE...might not work in IE.
----------------------------------

Web Services: www.funmediadesign.com

Web Templates: www.funmedia.ca

@LynxoauthorJan 21.2008 — #Wow, that easy, huh?

Thanks guys, gonna try it out tomorrow!?

@smyhreJan 22.2008 — #I knew there had to be an easier way to do it then I posted. I still have a lot to learn.:o

Also in #CSS _↴

Stylesheet Events Help With Scroll Bar How do I align submit button using CSS?

Success!

Help @Lynxo spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Image replacement h1 linking problem

11 Comments(s) _↴

---

revised: Didn't try it in IE...might not work in IE.
----------------------------------

Also in #CSS _↴

Success!

Social

Version

[RESOLVED] Image replacement h1 linking problem

11 Comments(s) ↴

--- revised: Didn't try it in IE...might not work in IE. ----------------------------------

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

---

revised: Didn't try it in IE...might not work in IE.
----------------------------------

Also in #CSS _↴