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]
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.
[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]
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.
There’s no extra closing tag, because it closes with the </div>.
Notes:
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).
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
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.
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.
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.