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.
Related
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>
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>
Are either of these valid to make a container with a hover effect become a link? I have six of these on my homepage, addition to a few text links a the top of the page?
I thought wrapping the whole div would work, then thought maybe I just wrap the hover state. Neither worked.
<a href="/organdonor.html">
<img src="/images/console/organdonor.jpg" />
<div class="mask">
<h2>Organdonor.gov</h2>
<p>GOVERNMENT</p>
</div>
</a>
</div>
<a href="/coach.html">
<div id="console_coach" class="view">
<img src="/images/console/coach.jpg" />
<div class="mask">
<h2>Coach</h2>
<p>FASHION</p>
</div>
</div>
</a>
These are both valid according to HTML5. However, please do notice older versions of HTML did not consider non-inline elements as valid child elements of an anchor tag.
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). This example shows how this can be used to make an entire advertising block into a link:
https://www.w3.org/TR/html5/text-level-semantics.html#the-a-element
I'm hoping someone can help me figure out a way to embed my Youtube code into WordPress, but keep it to the right of the screen, I assume floating, in order to have the text wrap around it.
[youtube height="208" width="350"]http://www.youtube.com/watch?v=vNJUL92y9wo[/youtube]
I've tried using:
<div style="float:left; padding:10px;">[youtube height="208" width="350"]http://www.youtube.com/watch?v=vNJUL92y9wo[/youtube]</div>
But whenever I use a "style" tag, it just disappears on the page and goes invisible.
I appreciate any help I can get. I hope I've been specific enough.
This worked for me using the [embed] tags instead of the YouTube ones:
<div style="float:right; padding:10px;">
[embed height="208" width="350"]http://www.youtube.com/watch?v=vNJUL92y9wo[/embed]
</div>
I'm working on an image caption rollover effect for my site and it's pretty much done. I'm using a combination of CSS and jQuery.
It looks something like this...
It works well. The caption appears to the left of the image whenever you mouseover the image.
However, I'm getting a warning in Visual Studio that an h2 tag cannot be placed inside of a label according to XHTML 1.0 Transitional.
Here's the markup I'm working with...
<ul>
<li>
<a href="/controls/27/saturation-rollover-effect">
<label class="info">
<h2>Saturation Rollover Effect</h2>
<p>Product description here...</p>
</label>
<img src="/thumbnail/small/27-saturation-rollover-effect.jpg" alt="Saturation Rollover Effect" />
</a>
</li>
</ul>
I've also tried a span in place of the label, and I get the same message. I've also tried a div, but div's are not supposed to be inside of the a tag.
I'd prefer to keep all of this inside of the link like I have it to get the SEO benefit from the text. But I'd also like to be XHTML Transitional compliant, and semantic/meaningful at the same time. Any ideas?
A label is for form elements--not images.
An h2 is acceptable, though you'd typically want to use that for larger blocks of content usually.
HTML5 has introduced figure and figcaption which might be appropriate in this situation:
http://html5doctor.com/the-figure-figcaption-elements/
As for wrapping it in an a tag, that probably doesn't make sense unless the href resolves to a valid URI sans JavaScript. Since it's a roll-over effect, clicking a link woudldn't be applicable.
After a little rethink I came up with something that works and makes sense, I think...
<ul>
<li>
<div class="info">
<h2>Saturation Rollover Effect</h2>
<p>Product description here...</p>
</div>
<img src="/thumbnail/small/27-saturation-rollover-effect.jpg" alt="Saturation Rollover Effect" />
</li>
</ul>
I had to break the caption away from the link around the image. Then I added a link around the title of the product (which is probably more useful for SEO anyway). And this is valid XHTML. Thanks to David Thomas and BoltClock for the comments.
UPDATE:
This is live on my site now. It's functional in IE8, but not quite as pretty as it is in IE9, Chrome, or Firefox. And then I might make the thumbnails grayscale for a cleaner look. Overall it seems to work pretty well though... http://www.silverlightxap.com/