Link in my header image..

[suess0r]

Hi, this is kinda basic but I want to give my header image a link to my portfolio for instance (portfolio.html) here's what i got

 

#headerPan{

width:778px; margin:0 auto 0 auto; background:url(images/newheader.jpg) no-repeat; height:343px;

}

 

stanks!

[Karl33to]

an easy way to get a link in there if you have your header as a background image is to overlay a transparent gif with a link on it within the container

 

<div id="headerPan">
<a href="http://www.link.com"><img src="transparent.gif" width="100" height="100" /></a>
</div>

 

#headerPan{
   width:778px; margin:0 auto 0 auto; background:url(images/newheader.jpg) no-repeat; height:343px;
}

 

or alternatively just set your header as a normal image within the div (ie not using background-image)

[suess0r]

I see what u mean but i was wondering how to do it in css in my code and not try to just put a transparency over it. I did try that but it kinda screwed up my divs for some reason, how can I give this header a link to like: portfolio.html

 

Here's what i gots

#headerPan{

width:778px; margin:0 auto 0 auto; background:url(images/newheader.jpg) no-repeat; height:343px;

}

 

#headerPan ul{

width:539px; margin:0 0 0 139px; display:block; height:21px;

}

#headerPan ul li{

display:block; float:left; height:21px; margin:0; padding:0;

}

#headerPan ul li a{

font: bold 12px/21px "Trebuchet MS", Arial, Helvetica, sans-serif; padding:0 14px 0 14px; color:#EAEAEA;

background-color:#242424; text-decoration:none; margin:0; height:21px;

}

#headerPan ul li a:hover{

color:#EAEAEA; background-color:#0867C3;

}

[AndyB]

It might help if there's a live page we can see that might help us visualize what you're trying to do.

 

Basics are that a background is a background and you can't make anything in the background clickable.  The use of a transparent gif is the simple way to make the background apparently link to something.

 

Then again, maybe what would work for you is the old reliable image map.

[suess0r]

Thanks Andy, I agree. The example is: http://www.designzillas.com - the top header image has the "view gallery" on there that I want to take straight to my portfolio. But when I tried adding a transparant gif it screwed up the placement of my Search bar. Thanks again, I appreciate all the help!

[suess0r]

OK, so i scaled the transparant image down to just cover the gallery part and made a few adjustments and got it worked out. Thanks again for the help