I am displaying an image link to Facebook chat. The link is also affecting text in the same column below but outside of the div? I only want the Image to link nothing else! Thanks for any help!
<div><a href="https://test.com"><img src="https://test.com/wp-content/uploads/2021/06/messenger-button.png" width="300px" height="auto"></div>
Screenshot
You didn't close the <a> tag after the <img> tag! So it extends to wherever the browser decides to automatically correct this error.
Make that:
<div><img src="https://test.com/wp-content/uploads/2021/06/messenger-button.png" width="300px" height="auto"></div>
Related
I have a div for the header, and then I have 4 divs nested inside of it for:
A Logo of the Brand
The Menu
Social Media Logo #1
Social Media Logo #2
Now I'm trying to link the logo to the homepage, and the social media logos to the corresponding profiles.
The problem is that the image doesn't show up. When I delete the the image link from HTML code and put it inside of CSS of that div it does show the image but it's still not clickable.
HTML:
<a href="">
<div id="fb">
<img src="face.png"/>
</div>
</a>
CSS:
#fb {
float:right;
width:90px;
height:90px;
margin:20px;
}
EDIT: Sorry if I did anything wrong. Im new here and Im learning to code.
EDIT #2: Formating
I'm unable to comment as I've rarely used this account, but the html you have above should work as is. What is currently being shown in your browser window?
For future reference, these types of posts are well received here. You've not included specifically what the problem is, or what you've tried to fix it, or even what is being shown. Not trying to be rude, just speaking from experience.
Look, we can make link on our page with this symbol # as I remember or we can just add name of our page.
If you want to make clickable only image we can make it in this way
<img src="pass to your image" />
If you want to create button with image we can add properties to element a, code is above, width and height to our element a and make the image in the center of our "button" in real it will be a e
lement.
Or we can create element button and put inside of him image. And style button with height and width. Here is code
<button onclick="location.href='link to another website'"><img src="pass to image" /></button>
If your image didn't visible. It can be mistake in your path to your image from html file, try to use ../ to return to previous folder. Use developer tools in Chrome. And in tab Console you will see your error why is it didn't show.
If you want to make a image that is also a link, wrap the image in an a tag this you can wrap in a div.
<div>
<img src="your_image_path" alt="alt_name">
</div>
I am trying to make a portfolio page and am want to use a thumbnail of one of my projects (a live page) as a link to that project. I've gotten the thumbnail made, but can't figure out how to make it a clickable link.
This is my code so far:
<div class="thumbnail-container">
<div class="thumbnail">
<figure>
<iframe src="https://codepen.io/valsburger/full/wppwmJ " scrolling="no">
</iframe>
</figure>
</div>
</div>
I've tried putting an element around the iframe in several locations. Nothing seems to be working.
Don't do that, will cause your page to be slower and frankly is just unnecessary.
Here is a photo of the page you want to:
Here is the code you should use:
<div class="thumbnail-container">
<div class="thumbnail">
<figure>
<img src="https://i.stack.imgur.com/7y4fc.jpg">
</figure>
</div>
</div>
An iframe is a "window into another world". There's could be lots of links in that window. So, it would be a bad idea if you could link the iframe itself. An iframe gets embedded, you cannot link it.
And frankly, I'm not sure WHY you'd even want to link an iframe in the first place? Seems very odd to me. Why don't you link the thumbnail itself?? That would be just a normal img element.
An ugly solution would be to place a transparent, relatively positioned <div> on top of the <iframe>, size it to cover the <iframe> and wrap it in <a> tags linking to your page.
Although I would suggest using regular <img> elements as thumbnails.
I have spent a lot of time researching this issue and I am not sure I understand why this happens. I have changed the directories for my image, changed what my image is called, where the image is placed etc. I feel like there may be something I am missing. I want to keep the image within the header tag.
<h2><img src="Pictures/Rest.jpg" class="img-thumbnail" width="400" height="400" alt="Restaurant"/></h2>
yes it possible use it with anchor tag.
more detail check it this link Can we place `<img>` inside `<h1>` according to web standards?
I have a problem with html links in wordpress.
For example if I want to add:
Dvi1
and
<div id="div1">
text
</div>
If I click on div1 I'm redirecting to homepage, not going to the div1 location(<div id="div">). What could be the problem?
PS: If I use adblock it works, without it, it doesn't.
You can use an anchor tag to achieve your functionality...
Place <a name="div1"></a> as the first line in your DIV and then when you click on the link it should take you there without any issues.
I have a title tag around an image which is only supposed to show on hover. It works in IE but in chrome the title tag text is actually shown on the image as well as on hover.
Here is my html snip for that section
<img id="projects" title="Some of My Projects." />
The image is in a table but I'm not sure if that is what would be affecting this. I do have a picture of what is happening but not enough reputation to post it in my question apparently.
Does anyone have any ideas?
Thanks!
I discovered that setting the background-image using CSS without setting a "src" attribute apparently makes Chrome treat the image as though it didn't load, so it will display the alt or title text on top of the background image. Setting a src attribute on the image instead of using the background-image in CSS made it stop showing the text.
I have found this as well, adding a title attribute on an img tag that lacks the src attribute, instead where one would use a sprite map via a background-image instead leads to the image showing as broken on Chrome (but works on IE).
My solution: wrap it in a span that applies the title:
<span title="Some of My Projects."><img id="projects" /></span>