This may seem pretty basic, are you allowed to put a link inside of a link? See attached image below:
I'm trying to have the whole grey bar clickable to go somewhere, but if the user clicks the wheel or the move arrow, they are other links. See my current code:
<a href="#" class="sp_mngt_bar">
<h1><?php echo $v; ?></h1>
</a>
Is this a good practice? Am I doing it wrong? How would you do this?
Thanks for the help!
Straight from the W3C for HTML4:
12.2.2 Nested links are illegal
Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.
Since the DTD defines the LINK element to be empty, LINK elements may not be nested either.
HTML 5
And for HTML5 it is a little different.
You cannot have Interactive Content inside an A element. Interactive Content includes anchor tags.
To simply answer the question: No.
That being said, here's a pure html/css workaround:
https://codepen.io/pwkip/pen/oGMZjb
.block {
position:relative;
}
.block .overlay {
position:absolute;
left:0; top:0; bottom:0; right:0;
}
.block .inner {
position:relative;
pointer-events: none;
z-index: 1;
}
.block .inner a {
pointer-events: all;
}
<div class="block">
<a class="overlay" href="#overlay-link"></a>
<div class="inner">
This entire box is a hyperlink. (Kind of)<br><br><br><br>
I'm a W3C compliant hyperlink inside that box
</div>
</div>
Wrap your nested link inside an object tag :
<a href="#" class="sp_mngt_bar">
<h1><?php echo $v; ?></h1>
<object></object>
<object></object>
</a>
Although I totally agree with the selected answer and yes, you shouldn't have Interactive Content inside an A element, sometimes you may need a workaround to this.
Here's an example where you need to put an interactive element inside an A tag. That little close button on the top right.
Here's the HTML for this. (It's not the actual build, I made it a bit simpler)
<a href="#">
<span class="hide">X</span> <!-- THIS IS THE SMALL 'X' WHICH HIDES THE WHOLE BOX -->
<img src="images/camera.svg" width="50" alt="Camera" />
<em>
Upload a profile picture
<small>
Here's the deal. Make your profile look awesome and even get 25 karma for it. We're not kidding.
</small>
</em>
<strong>
+ 25 K
</strong>
</a>
So, basically we want to hide this box when the user clicks on the 'X'. Otherwise, just it should work like a simple A tag. Here's the jQuery which did the trick.
$('.hide').click(function(e) {
e.preventDefault();
e.stopPropagation(); // THIS IS THE KEY PART
// DO WHATEVER YOU WANT, I FADED OUT THE BOX FOR EXAMPLE
$(this).parent().fadeOut(300);
});
I hope this helps someone with the same problem. ;)
I would restyle it so that it is more like this format:
<div class="sp_mngt_bar">
<h1><a href="#"<?php echo $v; ?></a></h1>
</a>
Nested links are illegal. To achieve the same behavior as with nested links you can do the following:
Use #mikevoermans HTML format as shown below and bind click event
<div class="sp_mngt_bar">
<h1><a href="#"<?php echo $v; ?></a></h1>
</div>
Your click event should look like this:
$(".sp_mngt_bar").bind("click", function(e) {
var target = $(e.target);
if(target.has('.t_icons_settings') { //Do something for settings }
else if(target.has('.t_icons_move') { //Do something for move }
else { //Do something for sp_mngt_bar
});
While technically not an answer to the question, another workaround is to bind the click event to a span or div:
<a href="outer-link">
Outer Link
<span class='inner-link'>Inner Link</span>
</a>
$('.inner-link').click(function (e) {
// Prevent the click-through to the underlying anchor
e.stopPropagation();
// Go to a link
window.location.href = 'page.html';
// Or call a javascript method
doSomething();
return false;
});
One solution is to position a link absolutely inside of the parent link container:
<div style="position: relative">
<a href="#">
<h1><a href="#"<?php echo $v; ?></a></h1>
<div id="placeholder" style="height: 24px">
</a>
<div style="position: absolute; bottom: 0">
</div>
</div>
#Jules answer, just shorter:
.parent {
position:relative;
}
.overlay-link {
position:absolute;
inset: 0;
}
html:
<div class="parent">
<a class="overlay-link" href="..."/>
<div class="child">
</div>
</div>
Related
This may seem pretty basic, are you allowed to put a link inside of a link? See attached image below:
I'm trying to have the whole grey bar clickable to go somewhere, but if the user clicks the wheel or the move arrow, they are other links. See my current code:
<a href="#" class="sp_mngt_bar">
<h1><?php echo $v; ?></h1>
</a>
Is this a good practice? Am I doing it wrong? How would you do this?
Thanks for the help!
Straight from the W3C for HTML4:
12.2.2 Nested links are illegal
Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.
Since the DTD defines the LINK element to be empty, LINK elements may not be nested either.
HTML 5
And for HTML5 it is a little different.
You cannot have Interactive Content inside an A element. Interactive Content includes anchor tags.
To simply answer the question: No.
That being said, here's a pure html/css workaround:
https://codepen.io/pwkip/pen/oGMZjb
.block {
position:relative;
}
.block .overlay {
position:absolute;
left:0; top:0; bottom:0; right:0;
}
.block .inner {
position:relative;
pointer-events: none;
z-index: 1;
}
.block .inner a {
pointer-events: all;
}
<div class="block">
<a class="overlay" href="#overlay-link"></a>
<div class="inner">
This entire box is a hyperlink. (Kind of)<br><br><br><br>
I'm a W3C compliant hyperlink inside that box
</div>
</div>
Wrap your nested link inside an object tag :
<a href="#" class="sp_mngt_bar">
<h1><?php echo $v; ?></h1>
<object></object>
<object></object>
</a>
Although I totally agree with the selected answer and yes, you shouldn't have Interactive Content inside an A element, sometimes you may need a workaround to this.
Here's an example where you need to put an interactive element inside an A tag. That little close button on the top right.
Here's the HTML for this. (It's not the actual build, I made it a bit simpler)
<a href="#">
<span class="hide">X</span> <!-- THIS IS THE SMALL 'X' WHICH HIDES THE WHOLE BOX -->
<img src="images/camera.svg" width="50" alt="Camera" />
<em>
Upload a profile picture
<small>
Here's the deal. Make your profile look awesome and even get 25 karma for it. We're not kidding.
</small>
</em>
<strong>
+ 25 K
</strong>
</a>
So, basically we want to hide this box when the user clicks on the 'X'. Otherwise, just it should work like a simple A tag. Here's the jQuery which did the trick.
$('.hide').click(function(e) {
e.preventDefault();
e.stopPropagation(); // THIS IS THE KEY PART
// DO WHATEVER YOU WANT, I FADED OUT THE BOX FOR EXAMPLE
$(this).parent().fadeOut(300);
});
I hope this helps someone with the same problem. ;)
I would restyle it so that it is more like this format:
<div class="sp_mngt_bar">
<h1><a href="#"<?php echo $v; ?></a></h1>
</a>
Nested links are illegal. To achieve the same behavior as with nested links you can do the following:
Use #mikevoermans HTML format as shown below and bind click event
<div class="sp_mngt_bar">
<h1><a href="#"<?php echo $v; ?></a></h1>
</div>
Your click event should look like this:
$(".sp_mngt_bar").bind("click", function(e) {
var target = $(e.target);
if(target.has('.t_icons_settings') { //Do something for settings }
else if(target.has('.t_icons_move') { //Do something for move }
else { //Do something for sp_mngt_bar
});
While technically not an answer to the question, another workaround is to bind the click event to a span or div:
<a href="outer-link">
Outer Link
<span class='inner-link'>Inner Link</span>
</a>
$('.inner-link').click(function (e) {
// Prevent the click-through to the underlying anchor
e.stopPropagation();
// Go to a link
window.location.href = 'page.html';
// Or call a javascript method
doSomething();
return false;
});
One solution is to position a link absolutely inside of the parent link container:
<div style="position: relative">
<a href="#">
<h1><a href="#"<?php echo $v; ?></a></h1>
<div id="placeholder" style="height: 24px">
</a>
<div style="position: absolute; bottom: 0">
</div>
</div>
#Jules answer, just shorter:
.parent {
position:relative;
}
.overlay-link {
position:absolute;
inset: 0;
}
html:
<div class="parent">
<a class="overlay-link" href="..."/>
<div class="child">
</div>
</div>
I'd like the buttons (moon, planets, etc...) staying red when we are on the current page.
Link to my site: http://www.chooseyourtelescope.com/moon-telescope/
Here, the "moon" button should be red.
Here is the code:
HTML
<div class="top-logos"><img src="" alt="LUNE"></div>
<div class="top-logos"><img src="" alt="PLANETES"></div>
<div class="top-logos"><img src="" alt="CIEL PROFOND"></div>
<div class="top-logos"><img src="" alt="SOLEIL"></div>
<div class="top-logos"><img src="" alt="TELESCOPE POLYVALENT"></div>
CSS
.top-logos {
width:20%;
top:108px;
padding:5px;
position: relative;
text-align:center;
float: left;
background:#0e0e18
}
.top-logos:hover {
background:#dd0000;
}
.top-logos:active {
background:#dd0000;
}
I don't know anything about Javascript but I can use it if you tell me what to do. Also I've JQuery installed.
You already have the class current-logo on the appropriate element. Just style that:
.current-logo div.top-logos {
background-color: #dd0000;
}
It looks like you already have this set up on your site with the .current-logo class on the anchor tags.
In your CSS file, all you need to do is
.current-logo div {
background-color: #dd0000;
}
You need to make sure that the .current-logo class changes based on what page you are on.
It looks like you're using Wordpress so the best way to do it would be to use the built-in menu functionality. You need a register your menu in functions.php and it will automatically update based on the pages you have for your site. You can read about that here.
Per your comment about it being in a file called base.php, you could do something like this in base.php:
<a href=".../moon-telescope/" <?php if (is_page('moon-telescope')): echo 'class="current-logo"'; endif; ?> >
<div></div>
</a>
<a href=".../planets/" <?php if (is_page('planets')): echo 'class="current-logo"'; endif; ?> >
<div></div>
</a>
Change to match your pages.
My project requirements has changed from my previous post.
I now have a div that contains an image, and content (text with a link) overlayed ontop. The content has the same dimensions as the image. My problem now is that I cannot click on the link assigned to the image. I believe this is because the content is hiding background link.
http://jsfiddle.net/2mjne/1/
HTML
<div class="ad">
<img src="http://www.placekitten.com/320/200">
<a href="#">
<div class="content">
text
<a class="link" href="">link</a>
</div>
</a>
</div>
CSS
.ad {
position: relative;
height: 200px;
width: 320px;
}
.content {
position: absolute;
top: 0;
height: 200px;
width: 320px;
}
.link {
visibility: hidden;
}
JS
$(document).ready(function() {
$('.content').mouseover(function() {
$(this).find('.link').css('visibility', 'visible');
});
$('.content').mouseout(function() {
$(this).find('.link').css('visibility', 'hidden');
});
$('a').click(function() {
console.log('a clicked');
});
$('.link').click(function() {
console.log('button clicked');
});
});
EDIT: There are two different links in my module. One link is from the background image, and the other link is from the a tag found in .class.
Your link isn't assigned to the image...move your opening tag before the img:
<div class="ad">
<a href="#">
<img src="http://www.placekitten.com/320/200" />
<div class="content">
text
<a class="link" href="#">link</a>
</div>
</a>
</div>
This is my solution which sort of works. The only issue I have is that is you mouse over the text area to the left of 'meow' and below the word 'my', you will notice you are still in the region of the text link instead of the background link. This is because the text link still has jurisdiction over this space. I am trying to figure out how to get rid of it.
http://jsfiddle.net/WHpMr/
If the text area on top of the image is the same size as the image, the mouse can't reach the image and so, that link doesn't exist for the user/mouse combination.
Also, remember that the user don't expect the link to change in the empty space between words, so the text link should work as expected.
So your solution can be something like this:
Detect the click of the mouse and when pressed, present the user with two options, one for each destination, plus a brief and clear explanation. Is an uncommon way, but it will work.
Present some kind of legend in the page, mentioning all the hidden links and the keyboard access. You can use the accesskey attribute and JS to make that work.
Bye
This question already has answers here:
Make a div into a link
(30 answers)
Closed 9 years ago.
I want to make it so that a whole div is clickable and links to another page when clicked without JavaScript and with valid code/markup.
If I have this which is what I want the result to do -
<a href="#">
<div>This is a link</div>
</a>
The W3C validator says that block elements shouldn't be placed inside an inline element. Is there a better way to do this?
It is possible to make a link fill the entire div which gives the appearance of making the div clickable.
CSS:
#my-div {
background-color: #f00;
width: 200px;
height: 200px;
}
a.fill-div {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
HTML:
<div id="my-div">
</div>
<div onclick="location.href='#';" style="cursor: pointer;">
</div>
a whole div links to another page when clicked without javascript and
with valid code, is this possible?
Pedantic answer: No.
As you've already put on another comment, it's invalid to nest a div inside an a tag.
However, there's nothing preventing you from making your a tag behave very similarly to a div, with the exception that you cannot nest other block tags inside it. If it suits your markup, set display:block on your a tag and size / float it however you like.
If you renege on your question's premise that you need to avoid javascript, as others have pointed our you can use the onClick event handler. jQuery is a popular choice for making this easy and maintainable.
Update:
In HTML5, placing a <div> inside an <a> is valid.
See http://dev.w3.org/html5/markup/a.html#a-changes (thanks Damien)
Without JS, I am doing it like this:
My HTML:
<div class="container">
<div class="sometext">Some text here</div>
<div class="someothertext">Some other text here</div>
text of my link
</div>
My CSS:
.container{
position: relative;
}
.container.a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-indent: -9999px; //these two lines are to hide my actual link text.
overflow: hidden; //these two lines are to hide my actual link text.
}
My solution without JavaScript/images. Only CSS and HTML. It works in all browsers.
HTML:
<a class="add_to_cart" href="https://www.example.com" title="Add to Cart!">
buy now<br />free shipping<br />no further costs
</a>
CSS:
.add_to_cart:hover {
background-color:#FF9933;
text-decoration:none;
color:#FFFFFF;
}
.add_to_cart {
cursor:pointer;
background-color:#EC5500;
display:block;
text-align:center;
margin-top:8px;
width:90px;
height:31px;
border-radius:5px;
border-width:1px;
border-style:solid;
border-color:#E70000;
}
Nesting block level elements in anchors is not invalid anymore in HTML5. See http://html5doctor.com/block-level-links-in-html-5/ and http://www.w3.org/TR/html5/the-a-element.html.
I'm not saying you should use it, but in HTML5 it's fine to use <div></div>.
The accepted answer is otherwise the best one. Using JavaScript like others suggested is also bad because it would make the "link" inaccessible (to users without JavaScript, which includes search engines and others).
jQuery would allow you to do that.
Look up the click() function:
http://api.jquery.com/click/
Example:
$('#yourDIV').click(function() {
alert('You clicked the DIV.');
});
Well you could either add <a></a> tags and place the div inside it, adding an href if you want the div to act as a link. Or else just use Javascript and define an 'OnClick' function. But from the limited information provided, it's a bit hard to determine what the context of your problem is.
.clickable {
cursor:pointer;
}
Something like this?
<div onclick="alert('test');">
</div>
AFAIK you will need at least a little bit of JavaScript...
I would suggest to use jQuery.
You can include this library in one line. And then you can access your div with
$('div').click(function(){
// do stuff here
});
and respond to the click event.
we are using like this
<label for="1">
<div class="options">
<input type="radio" name="mem" id="1" value="1" checked="checked"/>option one
</div>
</label>
<label for="2">
<div class="options">
<input type="radio" name="mem" id="2" value="1" checked="checked"/>option two
</div></label>
using
<label for="1">
tag and catching is with
id=1
hope this helps.
Here is what I am trying to accomplish in HTML/CSS:
I have images in different heights and widths, but they are all under 180x235. So what I want to do is create a div with border and vertical-align: middle them all. I have successfully done that but now I am stuck on how to properly a href link the entire div.
Here is my code:
<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
<div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
<img src="myimage.jpg" height="62" width="180">
</div>
</div>
Please note that for the sake of copy pasting here easily, the style code is inline.
I read somewhere that I can simply add another parent div on top of the code and then do a href inside that. However, based on some research it won't be valid code.
So to sum it up again, I need the entire div (#parentdivimage) to be a href link.
UPDATE 06/10/2014: using div's inside a's is semantically correct in HTML5.
You'll need to choose between the following scenarios:
<a href="http://google.com">
<div>
Hello world
</div>
</a>
which is semantically incorrect, but it will work.
<div style="cursor: pointer;" onclick="window.location='http://google.com';">
Hello world
</div>
which is semantically correct but it involves using JS.
<a href="http://google.com">
<span style="display: block;">
Hello world
</span>
</a>
which is semantically correct and works as expected but is not a div any more.
Why don't you strip out the <div> element and replace it with an <a> instead? Just because the anchor tag isn't a div doesn't mean you can't style it with display:block, a height, width, background, border, etc. You can make it look like a div but still act like a link. Then you're not relying on invalid code or JavaScript that may not be enabled for some users.
Do it like this:
Parentdivimage should have specified width and height, and its position should be:
position: relative;
Just inside the parentdivimage, next to other divs that parent contains you should put:
<span class="clickable"></span>
Then in css file:
.clickable {
height: 100%;
width: 100%;
left: 0;
top: 0;
position: absolute;
z-index: 1;
}
The span tag will fill out its parent block which is parentdiv, because of height and width set to 100%. Span will be on the top of all of surrounding elements because of setting z-index higher than other elements. Finally span will be clickable, because it's inside of an 'a' tag.
Going off of what Surreal Dreams said, it's probably best to style the anchor tag in my experience, but it really does depend on what you are doing. Here's an example:
Html:
<div class="parent-div">
Test
Test
Test
</div>
Then the CSS:
.parent-div {
width: 200px;
}
a {
display:block;
background-color: #ccc;
color: #000;
text-decoration:none;
padding:10px;
margin-bottom:1px;
}
a:hover {
background-color: #ddd;
}
http://jsbin.com/zijijuduqo/1/edit?html,css,output
Two things you can do:
Change #childdivimage to a span element, and change #parentdivimage to an anchor tag. This may require you to add some more styling to get things looking perfect. This is preffered, since it uses semantic markup, and does not rely on javascript.
Use Javascript to bind a click event to #parentdivimage. You must redirect the browser window by modifying window.location inside this event. This is TheEasyWayTM, but will not degrade gracefully.
I'm surprised no one suggested this simple trick so far! (denu does something similar though.)
If you want a link to cover an entire div, an idea would be to create an empty <a> tag as the first child:
<div class="covered-div">
<a class="cover-link" href="/my-link"></a>
<!-- other content as usual -->
</div>
div.covered-div {
position: relative;
}
a.cover-link {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
This works especially great when using <ul> to create block sections or slideshows and you want the whole slide to be a link (instead of simply the text on the slide). In the case of an <li> it's not valid to wrap it with an <a> so you'd have to put the cover link inside the item and use CSS to expand it over the entire <li> block.
Do note that having it as the first child means it will make other links or buttons inside the text unreachable by clicks. If you want them to be clickable, then you'd have to make it the last child instead.
In the case of the original question:
<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
<a class="cover-link" href="/my-link"></a> <!-- Insert this empty link here and use CSS to expand it over the entire div -->
<div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
<img src="myimage.jpg" height="62" width="180">
</div>
<!-- OR: it can also be here if the childdivimage divs should have their own clickable links -->
</div>
Make the div of id="childdivimag" a span instead, and wrap that in an a element. As the span and img are in-line elements by default this remains valid, whereas a div is a block level element, and therefore invalid mark-up when contained within an a.
put display:block on the anchor element. and/or zoom:1;
but you should just really do this.
a#parentdivimage{position:relative; width:184px; height:235px;
border:2px solid #000; text-align:center;
background-image:url("myimage.jpg");
background-position: 50% 50%;
background-repeat:no-repeat; display:block;
text-indent:-9999px}
<a id="parentdivimage">whatever your alt attribute was</a>
This can be done in many ways.
a. Using nested inside a tag.
<a href="link1.html">
<div> Something in the div </div>
</a>
b. Using the Inline JavaScript Method
<div onclick="javascript:window.location.href='link1.html' ">
Some Text
</div>
c. Using jQuery inside tag
HTML:
<div class="demo" > Some text here </div>
jQuery:
$(".demo").click( function() {
window.location.href="link1.html";
});
I simply do
onClick="location.href='url or path here'"
What I would do is put a span inside the <a> tag, set the span to block, and add size to the span, or just apply the styling to the <a> tag. Definitely handle the positioning in the <a> tag style. Add an onclick event to the a where JavaScript will catch the event, then return false at the end of the JavaScript event to prevent default action of the href and bubbling of the click. This works in cases with or without JavaScript enabled, and any AJAX can be handled in the Javascript listener.
If you're using jQuery, you can use this as your listener and omit the onclick in the a tag.
$('#idofdiv').live("click", function(e) {
//add stuff here
e.preventDefault; //or use return false
});
this allows you to attach listeners to any changed elements as necessary.
A link with <div> tags:
<div style="cursor: pointer;" onclick="window.location='http://www.google.com';">
Something in the div
</div>
A link with <a> tags:
<a href="http://www.google.com">
<div>
Something in the div
</div>
</a>