I want to add a link to a DIV.
One simple way is to place link outside the DIV
<a href= ‘http://www.domain.com’ class=‘headernavlink’><div class=“headernavgrey”>
Link Here
</div></a>
But I found a discussion which says it should and shouldn’t be used.
making a div a link - HTML / CSS answers
Does anyone know the correct method of adding a link to a div?
Unless you are using HTML5, a link can only encompass text and ‘inline’ elements (that’s things like <b>, <em> and so on), but not ‘block’ elements (which, as it says, are for blocks, like <div>, <p> etc).
If you’ve only got text (and maybe inline elements as well) inside the <div> then you can just put the <a> inside the <div> rather than outside it.
If you’ve got multiple block elements inside the <div> and you want to make them all link to the same place, my preferred method is to put a normal <a> link on whatever is the most obvious bit of text to have as a link (eg a heading), and then use a bit of Javascript to make the whole <div> clickable - something like this:
<div onClick="window.open( '/folder/file.htm','_top' ); return false;">
The reason for using an ordinary <a> as well is so that anyone who hasn’t got Javascript running can still follow the link.
What stevie said – as a rule I’d only make the relevant text (like the heading) a link with the anchor inside it. Block level containers like DIV really have no place inside an anchor…
Though the classnames in your example make me cringe… we have tags for headers, it’s called a numbered heading… and if an outer container has a class or ID, you probably don’t need a class or ID on the element inside it.
It smells like what I refer to as George Carlin’s “Not every ejaculation needs a name” – not every element needs a DIV around it or a class/ID on it.
Do you have an example page of what you are trying to accomplish – you know with real content and real markup? We could probably point you in a better direction for doing whatever it is you are trying to do if we could actually see it.
I would suggest using the following format for adding a ink in div tag
<div class=“headernavgrey”><a href= ‘http://www.domain.com’ class=‘headernavlink’>
Link Here</a></div>
If you only have one element in the div then put the anchor inside the div as Stevie said and then set the anchor to display:block and it will expand to fill the horizontal space of the parent.
It looks as though you are creating a navigation anyway and you probably should be using a list to do this , but as Deathshadow said we’d need to see the section of code at hand to give more pertinent advice.
Thanks,
So do I just add- display:block to the CSS.
I have 6 cells with padding which I am trying to add a link.
Similiar affect to this site: Social bookmarking for things to do - Whaddado - know more, do more
I did have one attempt at using the code but it stopped the CSS code from working on the text. Does using display:block affect any code which is used on the text?
Looking at that link I fail to see anything relevant to what you are asking… or at least nothing that should be a “DIV that’s an anchor”.
Can you be more specific as to WHAT on that page you are trying to replicate? “6 cells with padding” doesn’t really tell us a whole lot – though if they are cells like a table…
Though I’m wondering if we’re having ranguage rarrier issues as your sentence structure is nonsensical… to the point I almost hit “flag” to report as spam…
“affect any code which is used on the text”? Wrong verb, wrong tense, wrong target… No clue what that’s even supposed to mean.
Let’s try it another way 
Are you trying to do something like this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.menu {
list-style:none;
margin:0;
padding:0;
}
.menu li {
display:inline
}
.menu a {
float:left;
color:#000;
background:red;
text-decoration:none;
padding:20px;
border:1px solid #000;
margin-right:-1px
}
.menu a:hover {
background:#fcf;
color:#fff;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">test link</a></li>
<li><a href="#">test link</a></li>
<li><a href="#">test link</a></li>
<li><a href="#">test link</a></li>
<li><a href="#">test link</a></li>
<li><a href="#">test link</a></li>
</ul>
</body>
</html>
Copy, paste, test and report.
Hi,
This is the code I have currently:
<div class="headernav">
<div class="headernavboxleft">
<a href= 'http://www.domain.co.uk' class='headernavlink'><div class="headernavwhite">
Home
</div></a>
<a href= 'http://www.domain.co.uk' class='headernavlink'><div class="headernavgrey">
Questions
</div>
<a href= 'http://www.domain.co.uk' class='headernavlink'><div class="headernavgrey">
Answers
</div></a>
<a href= 'http://www.domain.co.uk' class='headernavlink'><div class="headernavgrey">
Deals
</div></a>
<a href= 'http://www.domain.co.uk' class='headernavlink'><div class="headernavgrey">
Compare
</div></a>
<a href= 'http://www.domain.co.uk' class='headernavlink'><div class="headernavgrey">
Search
</div></a>
<a href= 'http://www.domain.co.uk' class='headernavlink'><div class="headernavgrey">
Support
</div></a>
</div>
<div class="headernavboxright">
Follow us on:
<img src="'http://www.domain.co.uk" />
<a href="http://www.facebook.com" target=”_blank”><img src="http://www.domain.co.uk" /></a>
</div>
</div>
With Social bookmarking for things to do - Whaddado - know more, do more they have cells which are fitted with links and not just the text.
Did you not check the code I gave you above?
I need you to try the things I offer you otherwise we will be no nearer knowing what you want.
The code you listed above could be converted as shown below and have the same functionality using css (as in the example I already gave).
<ul class="headernav">
<li class="headernavwhite"><a href= 'http://www.domain.co.uk'> Home </a></li>
<li><a href= 'http://www.domain.co.uk'>Questions</a></li>
<li><a href= 'http://www.domain.co.uk'>Answers</a></li>
<li><a href= 'http://www.domain.co.uk'>Deals</a></li>
<li><a href= 'http://www.domain.co.uk'>Compare</a></li>
<li><a href= 'http://www.domain.co.uk'>Search</a></li>
<li><a href= 'http://www.domain.co.uk'>Support</a></li>
<li class="headernavboxright"> Follow us on: <img src="'http://www.domain.co.uk" alt="" /><a href="http://www.facebook.com"><img src="http://www.domain.co.uk" alt="" /></a></li>
</ul>
There is no need for all those classes you had as everything can be reached via the parent apart form the 2 items that were different - these are the only ones that need extra classes.
they have cells which are fitted with links and not just the text.
I’ve no idea what you really mean by that I’m afraid. The link you have provided is using lists and anchors just as in the example I have already given you. What makes you think there is something special about it?
We could spend days on this unless you can be more specific and also take the time to try out the things that we suggest and then identify what it is that you need different
Holy hannah – talk about endless classed DIV for nothing. NONE of those lists should be included… take Paul’s advice and make that a list and get rid of EVERY SINGLE DIV. If every single like element inside a parent container is getting the same class, NONE of them need classes.
… and again, it’s invalid to put anchors around div – you should research the difference between “block level” and “inline level” elements, and probably learn a bit about “semantic markup” too.
I would also suggest avoiding the use of classnames that say what the appearance is, and instead use classes to say WHY you are giving it the appearance… so the markup would be:
<ul id="mainMenu">
<li><a href="http://www.domain.co.uk" class="current">Home</a></li>
<li><a href="http://www.domain.co.uk">Questions</a></li>
<li><a href="http://www.domain.co.uk">Answers</a></li>
<li><a href="http://www.domain.co.uk" >Deals</a></li>
<li><a href="http://www.domain.co.uk" >Compare</a></li>
<li><a href="http://www.domain.co.uk" >Search</a></li>
<li><a href="http://www.domain.co.uk" >Support</a></li>
</ul>
<div class="socialLinks">
Follow us on:
<a href="http://www.facebook.com"><img src="http://www.domain.co.uk" alt="facebook"/></a>
</div>
Though with the broken engrish I’m not 100% sure what you are trying to do with them…
Hi
I am trying to do the navigation menu as Whaddado.com - mouseover background colour change with link.
How does the <li> work?
I am limited on what I can do as my computer keeps crashing every 20 minutes and I am writing this on my iPhone.
I’m also considering making the mouseover affect of each link in a different colour, how can do this?
As my computer keeps crashing I just need to buy this code until I get my computer sorted or get round to buying a laptop.
We’ve already given you examples to do that. Just try the example I gave far above. It will rollover with a change of colour that fills the whole block.
How does the <li> work?
Apologies, but it seems we may have over estimated your knowledge of html and if you don’t understand lists yet then it may be hard for you to follow.
A list is a block level html element that is used for… lists of things - such as a list of links in a menu. You can read about it here. Take some time to research or nothing we say will make much sense.
You will need to add a class to each item and set a different rule for each link in the colour that you choose. Seems a bit overkill to me though but if that’s what you want then you will need the extra classes.