How do I make entire div a link? [duplicate] - html

This question already has answers here:
Make a div into a link
(30 answers)
Closed 8 years ago.
I have a div like this <div class="xyz"></div> and all the content in that div is in the css. How do I make that div into a link? I tried wrapping the a tag around it, but that didn't seem to work.
Thanks!!

You need to assign display: block; property to the wrapping anchor. Otherwise it won't wrap correctly.
<a style="display:block" href="http://justinbieber.com">
<div class="xyz">My div contents</div>
</a>

Using
<div class="xyz"></div>
works in browsers, even though it violates current HTML specifications. It is permitted according to HTML5 drafts.
When you say that it does not work, you should explain exactly what you did (including jsfiddle code is a good idea), what you expected, and how the behavior different from your expectations.
It is unclear what you mean by “all the content in that div is in the css”, but I suppose it means that the content is really empty in HTML markup and you have CSS like
.xyz:before { content: "Hello world"; }
The entire block is then clickable, with the content text looking like link text there. Isn’t this what you expected?

Wrapping a <a> around won't work (unless you set the <div> to display:inline-block; or display:block; to the <a>) because the div is s a block-level element and the <a> is not.
<a href="http://www.example.com" style="display:block;">
<div>
content
</div>
</a>
<a href="http://www.example.com">
<div style="display:inline-block;">
content
</div>
</a>
<a href="http://www.example.com">
<span>
content
</span >
</a>
<a href="http://www.example.com">
content
</a>
But maybe you should skip the <div> and choose a <span> instead, or just the plain <a>. And if you really want to make the div clickable, you could attach a javascript redirect with a onclick handler, somethign like:
document.getElementById("myId").setAttribute('onclick', 'location.href = "url"');
but I would recommend against that.

the html:
<a class="xyz">your content</a>
the css:
.xyz{
display: block;
}
This will make the anchor be a block level element like a div.

Related

Fit anchor parent to child image

How do you get rid of the element outline that the a tag inserts, without ruining the child element?
<a href="">
<img alt="picsum" src="https://picsum.photos/200/300">
</a>
Ideally highlighting the anchor tag should yield the full width and height of the child element
display: block should fix this issue:
a,
img {
display: block;
}
<a href="">
<img alt="picsum" src="https://picsum.photos/200/300">
</a>
What's happening is the <a> and img are display: inline by default, which creates extra space underneath them as inline is made to work well with text. It may seem stupid that things are this way but it allows an image to fit in nicely with text like you would do in a word processor.

css vertical whitespace when adding link between divs

Problem I've never run into. Searched without resolution but might not know the right search terms to use. So if already answered I beg pardon.
I had this html. (Kinda long so simplified)
<div class="movieabovewrap">
<div class="movieabove">
LINK TEXT
</div>
And I wanted the link to cover all of the movieabove div so I moved the link outside of it as in.....
<div class="movieabovewrap">
<a href="LINK">
<div class="movieabove">
LINK TEXT
</div>
</a>
(it seems to be cutting off the last end div on both)
Anyways when I moved the link outside the div all the sudden I get this vertical whitespace of about 10px above and below the divs which I assume is attached somehow to the a href element. Assuming as I can't get anything to show up when I inspect the elements. Is there someway to remove this vertical whitespace with css? It kinda trashes my design. :( Any help would be mucho appreciated.
Short answer: Using <span> instead of <div> inside <a> should do the trick for you.
Explanation: The a tag renders a text element, if you want it's children to also act as text elements they must have display: inline.
div elements have display: block by default.
span elements have display: inline by default.
Add display: block to the link, either inline or via css:
<div class="movieabovewrap">
<a href="LINK" style="display: inline-block;">
<div class="movieabove">
LINK TEXT
</div>
</a>
</div
or
.movieabovewrap > a {
display: inline-block;
}

can we place a div inside an "a" tag according to the accessibility?

According to the HTML5 specification, we can place a div inside an a tag. Does accessibility recommend it as we can't place a block element inside an inline element?
I mean something like it:
<a href="#">
<div class="textpart">
header
</div>
</a>
Are there any accessibility problems with this?
You can not make a block-level element a child of an inline-level element, validators will give you a high-five in the face with a chair.
You can however set an inline element inside of another inline element and then set it to display: block; and it will both validate and work...
<a>first line<span style="display: block;">second line</span>third line</a>

Reducing link clickable width

I have a link on my website and I dont like the way it is clickable along the whole width of the page.
I have tried putting blank divs with width attributes on either side of the link and tried putting a width attribute in the link itself. I also tried the overflow attribute recommended in another answer.
Does anyone have any suggestions? Here is the code:
<div align= 'center'>
<p style="font-size: 15px;">text</p>
</div>
p stands for a paragraph, which is a block level element. These use the full width available to them by default. Your case looks like you want a span instead, which is an inline element, like the link itself, that only spans the contained text.
<div align= "center">
<span style="font-size: 15px;">text</span>
</div>
Alternatively, you could skip the tag completely by applying the style directly to the link instead.
<div align= "center">
text
</div>
change your code to this:
<div align= 'center'>
<p style="font-size: 15px;">text</p>
</div>

clickable div with img in it?

I have a div i would like to make clickable. I know i need to make the div (and?) the link have a fixed width and height + display: block. I have an image inside of the div. It seems like the 'clickable' div is actually a large transparent link and this click does not play well with images as it doesnt share space. I need to right click the image and hit save as.
So how do i make the div clickable. I tried setting the img width and height but it made the img stretch.
You can set the <a> tag to fill the entire parent. Example:
<div>
<a href="..." style="display: block; height: 100%">
<img src="..." alt=".." />
</a>
</div>
and the entire <div> will be clickable.
To actually make a div into a link you have to use Javascript but from reading more into your question I'm not quite sure this is what you are asking. But if you ever do need to make a div into a link here it is.
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
It would be great if you could provide your markup so that we can see what you are seeing.
Thanks,
This answer is wrong! It doesn't pass HTML. I'm only keeping it up here so that other people can see it and know that it is not the answer to the question. (in case someone else had the same idea to this answer)
Why not just do something like
<a href="...">
<div>
<img src="..." alt="..">
</div>
</a>