Forum Moderators: not2easy
So both the image becomes a hyerplink, along with the text underneath the image?
thanks
Test page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
list-style-type:none; /*remove bullets*/
}
li{
display:inline; /*fix IE whitespace in lists bug*/
}
li a:link, li a:visited{
display:block; /*allows anchor to take width and height*/
width:100px; /*equal to image width*/
height:50px;/*equal to image height*/
background:url(your_image.gif) 0 0 no-repeat; /*the image*/
text-indent:-3000px; /*moves text out of the way*/
overflow:hidden;
text-decoration:none;
}
li a:link:hover, li a:visited:hover{
background:url(your_hover_image.gif) 0 0 no-repeat; /*you can also swap the image on hover to get a rollover effect if desired*/
}</style>
</head>
<body>
<ul>
<li><a href="#">Link text<a></li>
<li><a href="#">Link text<a></li>
<li><a href="#">Link text<a></li>
<li><a href="#">Link text<a></li>
</ul>
</body>
</html>
CSS is commented. Post questions if you have them.
cEM
[edited by: createErrorMsg at 3:45 pm (utc) on Nov. 8, 2005]
For example:
a
{
display: block;
border: 1px solid red;
}
a:link, a:visited
{
background: #ccc;
}
a:hover, a:active
{
background: #eee url(yourimage) top left;
}
I was trying to use:
<style type="text/css">
<!--
#title {
margin:0; padding:0;
position:relative;
width:167px; height:133px;
margin:0; padding:0;
overflow:hidden;
}
#title div{
display:block;
position:absolute; left:0; top:0; z-index:1;
width:167px; height:133px;
margin:0; padding:0;
background:url(/image.gif) no-repeat left top;
}
-->
</style>
</head>
<body>
<h2 id="title"><a href="http://www.myurl.com">test</a><div><a href="http://www.myurl.com"></a></div></h2>
</body>
</html>
But had no luck. The above method works if i remove the links and just use it as a <h2> image replace. But i would like the text and image to both be linked
I know you have provided a solution, but can you comment on the above?
Im new to CSS
thanks
So you have a heading:
<h2 id="title"><a href="http://www.myurl.com">test</a><div><a href="http://www.myurl.com"></a></div></h2>
What exactly is it that you want shown here? Why all the extra <a> and <div> tags? Why not just this:
<h2 id="title"><a href="http://www.myurl.com">test</a></h2>
Then give your a tag this style:
#title a { display: block; }
So it fills the entire <h2>.
Next, specify the default background image of your link:
#title a:link, #title a:visited
{
background: url(/image.gif) no-repeat top left;
}
Next, specify the different background image when you mouseover the link:
#title a:hover, #title a:active
{
background: url(/someotherimage.gif) no-repeat top left;
}
But i would like the text and image to both be linked
If you want the text visible on top of the image, simply delete...
text-indent:-3000px;
overflow:hidden;
...from the CSS. This will display the image with the link text on top of it, both linked to the url specified.
I assumed from your original post that you wanted the text hidden with the image in it's place. The image replacement technique described in msg#2 is far more elegant way to hide the text than positioning an in-source image on top of the link text.
If what you mean is that you want the text and the image to both be linked to different urls, then a slight variation to your code will make it work. But bear in mind that the text link will be inaccessible to users, since the image will be covering it up. On the surface, this might look like link-text stuffing to SEs, so use with caution.
Regardless, in your code above:
1) Remove the div. Just place the two anchors inside the H2.
2) Change the #title div selector to #title a#overlap.
3) Add id="overlap" to the last <a> tag.
css:
#title a#overlap{
display:block;
position:absolute; left:0; top:0; z-index:1;
width:167px; height:133px;
margin:0; padding:0;
background:url(image.jpg) no-repeat left top;
}html:
<h2 id="title"><a href="http://www.myurl.com#1">test</a><a href="http://www.myurl.com#2" id="overlap"></a></h2>
cEM
[edited by: createErrorMsg at 5:53 pm (utc) on Nov. 8, 2005]
are all these solutions cross browser compatible?
cEM
