Correct Way To Place a Link Around DIV?

Hi,

I am trying to put a link around a set of DIVS so that a block of the page has a link to it and just a single set of words. However with the code below it creates an HTML error.

Does anyone know how to place a link around a DIV?

<a href="/users/register.php" rel="nofollow"   >
<div class="maincellleft">
<div class="cellreason">
text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>
<div class="cellreasoncontent">
text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>
</div>
</a>

[FONT=Verdana]Unless you are using HTML5, it is invalid to nest a block element inside an inline element. Although HTML5 allows you to do this, I understand it may cause problems in various browsers and is best avoided.

I don’t really understand why you would want to do this anyway. Can you explain a bit more about what you’re doing here?[/FONT]

Im a trying to create an area of the page which has a link instead of just a word.

Similiar to the navigation menu on this site http://www.play.com/ in which the whole block can be clicked on and not just the word.

That’s because in those cases, the block is an image. As images are in-line elements, it’s perfectly valid to wrap <a> tags around them. However, if you include text as part of the image, you need to ensure the information will be available even if images are not.

Is it possible to add a link to a div without an image?

I have a mouseover affect on a large square but I am struggling to add a link to it. Can I add a link without having an image as the background?

[FONT=Verdana]As I said in my first post, unless you are using HTML5, it is invalid to wrap a block element - e.g. <div> in an in-lie element - e.g. <a>. Even in HTML5, it can cause browser rendering problems and is best avoided.

I’m still no clear what you want to do here. What is the effect that you’re trying to achieve, and why does it require the use of an <a> tag?[/FONT]

http://www.guru.com/emp/takeTour.aspx

Hi,

This is another example, the menu on the left hand side has large areas with a link covering it. Is this acheived using only images?

If you mean that the background to the list item changes from grey to white on hover, then that’s done by using display: block on the <li> and setting padding, etc. to give the required size of block.

How do I add a link to it without creating an html error?

[font=verdana]You can fake the link on a <div> with this code:

<div onClick="window.open( 'whatever/page/you-want.htm','_top' ); return false;">

There’s no extra closing tag, because it closes with the </div>.

Notes:

  1. Because this relies on Javascript, it is inaccessible to anyone who doesn’t have Javascript available. You should therefore include a regular <a href=“…”> link around the first block of text in the <div> (or the block that looks most likely to be a link, if it isn’t the first one).

  2. All this does is to make the entire <div> into a clickable link, it doesn’t do anything for the styling, so you will get no :hover effect unless you put a class on the <div> and include a relevant CSS line, eg

div.whateverclass:hover {background:#ccc; color:red;}

[/font]

Can’t believe all those answers and not one mentions the <span>, and inline element that can be used inside links.

Just change your divs to spans :slight_smile:

Yes, in this instance I suppose you could do that and put a span {display:block;}, but that only works if you’ve got <div>s and nothing else, whereas the Javascript solution works whatever content you’ve got, including headings, lists, the lot.

This is very easy to do just with CSS. For example, the best way to do a menu like that is to have an <a> element inside the <li> and simply set it to display: block. Setting the <a> to display: block makes it fill the container.

As Ralph said display:block will make the anchor stretch horizontally to fill the container and create the block hover effect.

If you want text inside the anchor you will have to use inline elements.

Here’s an example that is about 10 years old but shows how to do it (view source).

Or you could absolutely position an anchor over existing content but gets a little complicated (that’s another old demo with hacks for IE6 that could be removed these days).

Hi,

I tried the following Javascript but it creates an error that the onClick is no recognised.

<div onClick="window.open( '/users/register.php','_top' ); rel="nofollow"; return false;">	

Does anyone use a method to put a link around a DIV?

Hi,

You’ve been given lots of examples above to accomplish this so I’m a bit confused.

Just put the anchor inside the div and set it to display:block and the whole are becomes active.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.test {
	width:300px;
	height:300px;
	border:1px solid #000;
}
.test a {
	width:300px;
	height:300px;
	display:block;
	background:red;
}
.test a:hover { background:green }
</style>
</head>

<body>
<div class="test"><a href="#">test</a></div>
</body>
</html>


If you are getting en error with onClick then it probably means you are using an xhtml doctype and the attribute should be onclick instead (lowercase as with all xhtml attributes). However having a link activated by JS is a bad idea at the best of times.

See the links I posted in post#14 form more methods.

Many thanks, I thought Javascript would be the best option. I tried the CSS example and it worked perfectly. However when I tried it with the same format it does have the same affect.

This format doesn’t change the layout but link only works on the text “REQUEST A QUOTE” and not the DIV it is in.

Am I doing something wrong?



.topheaderlinkcells {
   float:left;
padding-top: 5px;
padding-bottom: 4px;
margin-left: 5px;
margin-right: 5px;
margin-top: 10px;
margin-right: 5%;
 font-size:0.8em;
   font-family:Verdana, Geneva, sans-serif;
}

.topheaderlinkcells a {
display:block;
color: #6696F5;
}

.topheaderlinkcells:hover {
color: #6696F5;
border-bottom:3px solid #6696F5;
}







<div class="topheaderlinkcells">
<a href="/quoterequests/quoterequest.php"   rel="nofollow" >
REQUEST A QUOTE
</a>
</div>


Hi,

Put the padding on the anchor and not the div.

e,g,


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.topheaderlinkcells {
	float:left;
	margin:10px 5% 5px 5px;
	font-size:0.8em;
	font-family:Verdana, Geneva, sans-serif;
}
.topheaderlinkcells a {
	display:block;
	color: #6696F5;
	padding:5px 5px 7px;
	background:#f9f9f9;
	text-decoration:none;
}
.topheaderlinkcells a:hover {
	border-bottom:3px solid #6696F5;
	padding:5px 5px 4px;
}
</style>
</head>

<body>
<div class="topheaderlinkcells"> <a href="/quoterequests/quoterequest.php"   rel="nofollow" > REQUEST A QUOTE </a> </div>
</body>
</html>


Brilliant thanks, that worked straight away.

I am trying to do another link however this has blue text on white background. Then on mouseover it has white text on blue background. However what ever I try I cant get the right combination to work. I have tried a class just on the text but on the works when you mouseover the actually text and not the DIV.

.topheaderlinkcells {
	float:left;
	font-size:0.8em;
	font-family:Verdana, Geneva, sans-serif;
margin-right: 5%;
margin-top: 10px;
	color: #6696F5;
}

.topheaderlinkcells a {
	display:block;
	text-decoration:none;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
}

.topheaderlinkcells:hover {
color: #fff;
background: #6696F5;
}

Hi,

As mentioned above you style the anchor and not the div. Leave the div alone apart from its size and position.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.topheaderlinkcells {
	float:left;
	margin:10px 5% 5px 5px;
	font-size:0.8em;
	font-family:Verdana, Geneva, sans-serif;
}
.topheaderlinkcells a {
	display:block;
	color: #6696F5;
	padding:5px 5px 7px;
	text-decoration:none;
	color: #6696F5;
}
.topheaderlinkcells a:hover {
	color: #fff;
	background: #6696F5;
}
</style>
</head>

<body>
<div class="topheaderlinkcells"> <a href="/quoterequests/quoterequest.php"   rel="nofollow" > REQUEST A QUOTE </a> </div>
</body>
</html>