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>
Related
I need help to understand one thing: a picture tag behaves like a container for an img tag if its parent has 'display: flex'.
If I add width:50% to img, it doesn't make img 50% of div but make img 50% of picture. If I add width:50% to picture and width: 100% to img it works as I need.
But why do I need to add style to the picture to make img 50% of div? I thought that picture is just an invisible wrap to keep sources. But it behaves like a div. Why?
<div style="display: flex;">
<picture style="width: 50%">
<source srcset="img/cmn/logo.webp" type="image/webp">
<img src="image.png" alt="img" style="width: 100%;">
</picture>
</div>
When using a <picture> element, it effectively takes over as the principal element of its content, the content becomes dependencies of the picture element. So how this works is expected.
You now work with the picture element and not with the individual image element(s) inside of it. This means you have to scale the picture element and not anything inside of it.
That said, it's common practice in responsive web design to always have img elements fill the full width of their parent container (width: 100%;), for responsiveness to become easier to handle and more predictable.
Authoritative information: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
From the specification
The picture element is a container which provides multiple sources to its contained img element
So yes, it behaves like a div for the image and in your case the picture is the flex item (not the image)
I am trying to build a website where I occurred this error. Where I am trying to position an h1 element,
but there is something coming between my way. Here This is the image the blue part is highlighted and coming in my way. I tried using inspect but it tells its a div called (our-team).but as per my CSS the div has height as much as the background image CSS code:-.
.our-team{
height: 500px;
}
html code:-
<div class="our-team">
<img class="background-team"
src="https://images.pexels.com/photos/807598/pexels-photo-807598.jpeg?
auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" srcset="">
<h1 class="heading-team">Our Team</h1>
<div class="team-members">
<h1 class="member-name">Lara</h1>
</div>
And when I inspect on our team it shows an image(This is the inspected image).
Thank you,
in your example, you didn't close the first div.our-team tag
Maybe that's the reason?
BTW, if I understood you correctly, maybe this one help you?
https://jsfiddle.net/Madebyspeedster/fq0emnk1/14/
Maybe try and move the margin or padding to a -25px
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;
}
I'm taking a crack at writing a Javascript-based image gallery. Right now I have the code set so that I know the images will all be at the same height, but...
How can I arrange my markup and CSS so that all of the images will display on just one line, and when a new one would be outside the width of the browser window, the parts of the image that are 'out of bounds' are simply hidden and don't display on the next line?
I've been experimenting with overflow, float, and display in various ways for the images themselves and their container div to no avail. There must be something simple I'm overlooking here.
Right now the markup looks like:
<div id="slider">
<img src="img1.png" />
<img src="img2.png" />
<img src="img3.png" />
</div>
How should I style this so it displays on one line, even if the combined width of the images is greater than the width of the browser window?
Thanks.
#slider {
white-space: nowrap;
overflow : hidden;
width : 100%
}
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.