i need to have a link on my background image...

Forum Moderators: not2easy

Message Too Old, No Replies

i need to have a link on my background image...

could not find any specific help yet

snoopdogg

3:29 am on Jun 19, 2004 (gmt 0)

i wonder why i can't put a link <a href="http//www.xyz.com"></a> on my background.

i tried a lot of variations...now i'm pretty worried if this actually works somehow.

so here's what's inside:

------------------------

#header {
background:#269 url("http://left.com/right.gif") no-repeat left bottom;
padding:0 0 0 160px;
margin:0 0 10px;
color:#fff;
width:100%;
width/* */:/**/auto;
width:auto;
}

-------------------------

thank you for any hint!

snoop

Rambo Tribble

1:03 pm on Jun 19, 2004 (gmt 0)

For starters, for a link to be clickable, it needs to be in the foreground.

Although it will usually work, browsers being forgiving and all, you really shouldn't put a link on a block element; your page won't validate because technically, links should only be on inline elements.

One solution is to give your link display:block and then give it the background you desire.

D_Blackwell

7:52 pm on Jun 19, 2004 (gmt 0)

Rambo has you on the right track. Make the whole block clickable, and avoid an ugly non-validating solution. I ripped this out of some navigation, where it's pretty common to link the whole box. It's a bit crude as an example, but you can see the options available, and should be able to refine something similar for your needs. The whole <li> is linked, not just the text of the link that might be within it. So, the entire "background" is clickable.

<html>
<style type="text/css" media="all">
ul {
margin: 0; padding: 0; border: none;
}
li {
border-bottom: .1em solid #000;
margin: 0; padding: 0; list-style: none; text-align: center;
background-color: #faebd7;
}
li a {
display: block; padding: .3em .5em;
text-decoration: none;
border-left: .5em double #900;
border-right: .5em double #900;
}
li a:hover {
border-left: .5em solid #000;
border-right: .5em solid #000;
color: #900;
}
</style>
<body>
<ul>
<li>
<a href="">
 
</a>
</li>
</ul>
</body>
</html>

somerset

8:30 pm on Jun 19, 2004 (gmt 0)

or just add a transparent gif and place it so it covers the area of the page you want clicking - you can make that into the usual image link.