Member Avatar for MDanz

I've got a 101px x 101px div with a background image and words of text. I've attempted to make the whole div a hyperlink but it only made just the text a hyperlink.

if you check my website http://www.stackway.com/stack.php , when you click the word then the correct hyperlink comes up in the pop up div. If you click anywhere that isn't the word, the wrong hyperlink comes. please help!!

.rollb a {
display: block;


width: 101px;
height: 101px;


background: url("http://www.stackway.com/stacktopic.jpg");

}
echo (!empty($search)) ?"":"<td  valign=\"middle\"><div class='rollb' align='center' ><a  style='text-decoration: none' onmouseover='ChgText($number);ChgTo($number4); '  href='javascript:ShowContent(\"layer1\")' id='point' onclick='ShowContent(\"layer1\");'>
            
<br />
<font size='1px' face='Arial' color='#FFFFFF'><b>$newname2</b></font><br /><font color='#E9A014' size='1px' face='Arial'>$num_rows <br />Reply</font>



</a></div>
</td>";
  • 3 Contributors
  • 2 Replies
  • 141 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by drjohn
Member Avatar for digital29

Try putting the div INSIDE the hyperlink tag..something like this:
<a href="...">
<div id="...">

</div>
</a>

Member Avatar for drjohn

The above suggestion is probably not valid html.
What you have to do is fake the appearance of a div, or rather a block of text as that is probably what you want to do.
And yo also want to start with plain html, rather than wrapping it up in php as your first attempt at getting it to work.

I can guarantee that this code will work, as I've used it on a couple of sites. It makes the link into a block and applies styles that look like a div with borders to it. Adapt as necessary to suit your code.

And practice with it in a plain html page, not in php, because if you can't get it to work on a plain html page, you'll mess up how to make it work with php

the html

<p>
	<a class="mySites" href="http://www.colorschemer.com/online.html">
	<img src="images/colorschemer-1.jpg" >
	<span class="linker">ColorSchemer</span> starts from a color picker grid of standard colors, or a hex or RGB value, and generates a set of 12 related colors. You can then lighten or darken the entire scheme by repeated clicking. There is an online scheme gallery where you can save your scheme and view others efforts. There is a blog about the site and related products, and you can download a 15 day trial of their professional offline color studio product.</a>
	</p>

and the css

.mySites img {float:left; border:0; margin-right:10px;}

a:link.mySites, a:visited.mySites {

	text-decoration:none; 
	display:block;
	color:#333;
	padding:10px;
	min-height:125px;
	overflow:hidden;
	border: 2px solid #d3d3d3;
	background-color:#fdfdfd;
}

a:hover.mySites, a:active.mySites {
	border: 2px solid #000;
	background-color:#fff;
	color:#000;
	}
	
.linker {color:blue;}	
.linker:hover {background-color:navy; color:white;}

You probably will not need the image bit, it was just part of something I was doing.

PS all that inline styling you are using - shocking! ;)
PPS the site mentioned is not one of my sites, that's just a convenient class name I chose.

Edited by drjohn because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.