Create div with image and text as one link - html

So I'm trying to replicate a link button I saw when browsing the web. The div contains the href link, title for the card, link for the image and further text. For me the only part of it with any kind of link is the title for the card. I'm a bit stumped on what to do, any suggestions?
<div id="advice-card">
<a href="tyres.html">
<span id="title">How long do tyres last for?</span>
</a>
<div id="advice-card-media">
<img src="assets/images/car-tyres.jpg" alt="Single tyre with dark background" height="240" width="240">
</div>
<div id="advice-card-content">
Here we go through how long car tyres last and what to look for when buying new tyres.
</div>
</div>

If I understand what you expect then try put any html element into and it will work like button.
<div id="advice-card">
<a href="tyres.html">
<span id="title">How long do tyres last for?</span>
<div id="advice-card-media">
<img src="assets/images/car-tyres.jpg" alt="Single tyre with dark background" height="240" width="240">
</div>
<div id="advice-card-content">
Here we go through how long car tyres last and what to look for when buying new tyres.
</div>
</a>
</div>

Related

Html. I've a problem with my carousel code, when I click on the chervon my screen page down?

Helle, I am making a website. This is a project for my studies. Since I haven't studied java script yet, I wanted to make a carousel in html en css only. This one works well except that when I press the right/left chevrons, the page scrolls down. I couldn't find where the problem was in my code.
My teacher asked me to come and ask you the question.
I therefore cometo ask you for help in order to find the solution.
Many thanks in advance.
Have a good day.
<body>
<div id="conteItemsCarrusel">
<div class="itemCarousel"id="itemCarousel-1">
<div class="carousel"id="acarrusel-1">
<img src="./image/cuisinier.jpeg" alt="itemCarousel-1">
</div>
<div class="fleche">
<a href="#itemCarousel-3">
<div class="gauche">
«
</div>
</a>
<a href="#itemCarousel-2">
<div class="droite">
»
</div>
</a>
</div>
</div>
<div class="itemCarousel"id="itemCarousel-2">
<div class="carousel"id="acarrusel-2">
<img src="./image/photojpgd.jpg" alt="itemCarousel-2">
</div>
<div class="fleche">
<a href="#itemCarousel-1">
<div class="gauche">
«
</div>
</a>
<a href="#itemCarousel-3">
<div class="droite">
»
</div>
</a>
</div>
</div>
<div class="itemCarousel"id="itemCarousel-3">
<div class="carousel"id="acarrusel-3">
<img src="./image/serveur.jpeg" alt="itemCarousel-2">
</div>
<div class="fleche">
<a href="#itemCarousel-2">
<div class="gauche">
«
</div>
</a>
<a href="#itemCarousel-1">
<div class="droite">
»
</div>
</a>
</div>
</div>
</div>
</body>
WhyMy page scrolls when I click on the chevrons and I don't know where is the problem in my code
The point of href="#foo" is to link to an element on the page and scroll directly do it.
You are presumably (you didn't include your CSS in your question) using :target to style that element. :target is designed so you can add additional styling to the element to draw more attention to it that it would get from just being at the top of the screen.
You appear to be trying to get the styling of the element linked to element without triggering the primary effect of linking to it.
You can't do that.
If you want a carousel, then use JavaScript. It's the right tool for the job.

Image not aligning properly on webpage

The image on my webpage is not properly aligned with the video for some reason. It looks like this: This is the image on my webpage
When I try to shift the picture up, it still does not align properly and jsut shifts everything up. How can I properly align the image and the video.
Here is my code so far:
<div class="col-md-9">
<div id="page-1" class= "page one">
<h2 class="heading">Projects</h2>
<div class="resume-wrap d-flex ftco-animate">
<div class="icon d-flex align-items-center justify-content-center">
<span class="flaticon-ideas"></span>
</div>
<div class="text pl-3">
<span class="date">Feb 2020</span>
<h2>CLARITY - NSBE Hacks UofT</h2>
<span class="position"> First place winner and winner of best Google hack</span>
<p> Clarity is a web app catered towards children that struggle with autism. Children with autism have trouble recognising the emotions of other people. Our application listens peoples speech and analyzes the emotions being conveyed in said speech. After the analysis, recommendations are given to the user on how to navigate the situation, in an attempt to make navigating social situations easier. </p>
<img src="/static/images/clarity.png" height = 200px width = 250px>
<video width="300" height="300" controls>
<source src= "/static/video.mp4" type ="video/mp4">
</div>
</div>
Try encapsulating the image and video within their own Bootstrap div. Something like this:
<div class="md-col-6">
<img src="/static/images/clarity.png" height = 200px width = 250px>
</div>
<div class="md-col-6">
<video width="300" height="300" controls>
</div>
This will force the image and video to remain in two columns, and most likely line up with each other. I'd also recommend inspecting the element to see if any padding or margins are causing the misalignment.

CSS Thumbnail no subtitle - subtitle only when showing enlarged thumbnail

I am working on a jekyll page.
On the page in question I have a series of pictures that I would like to show.
I would like to show a subtitle of an image but only when clicking on the thumbnail i.e. when the enlarged image is shown. Ideally it would have a semi-opaque background and the font-color would be white.
<div class="row">
<div class="col-xl-6 Keyfeature-selection pt-10 pb-40">
<div class="s-details-img mb-30">
<a href="{{relative_url}}/assets/img/service/details/01.jpg">
<img src="{{relative_url}}/assets/img/service/details/01.jpg" alt="">
</a>
</div>
</div>
<div class="col-xl-6 col-lg-12 service-details">
<div class="s-details-img mb-30">
<h3> Intuitive QGIS Interface
</h3>
<p> The software can be used through the famous QGIS interface, making digitizing and layer creating easy and straight-forward
</p>
</div>
</div>
</div>
I looked at figcaption but was only able to put the subtitle directly below the thumbnail. However I do not want to see the subtitle under the thumbnail.
Any ideas how to do that?
Just been playing around with this it might help.
codepen
<a class="lightbox" href="#dog">
<img src="https://i.huffpost.com/gen/749263/original.jpg"/>
</a>
<div class="lightbox-target" id="dog">
<figure>
<img src="https://i.huffpost.com/gen/749263/original.jpg"/>
<figcaption>add text here</figcaption>
</figure>
<a class="lightbox-close" href="#"></a>
</div>
just playing with clickable images to enlarge on click and display text.
have a play and see if you can get the outcome you're after.

Web link in html duplicating itself?

Newb at html and web... anything beyond usage. I'm not even sure this is the correct forum for this question.
I placed a link in the html for a container (image and text) that I had inserted into the footer of our page.
I inserted the code for the link to surround the image and text sections of that part of the container.
<div class="blah blah"
<a href="etc.etc">
<img
Continue on until after the last line of text
</a>
</div>
It was nice, clean, and the link encompassed the image and both lines of text.
I check an hour later, and every line of text and the image now have the link info repeated individually, and strangely duplicated between the lines of text for no apparent reason.
Running the site with odoo, based on bootstrap if I remember correctly.
Why is it duplicating the link information repeatedly?
It works fine, it's just ugly when going in to edit the code, and I'm not sure if I'm doing something wrong to cause it to happen.
Edit:
here is the current code, after apparent self duplication:
<div class="col-md-4 text-center">
<a href="http://edited/" target="_blank" title="edited
http://edited/">
<img class="fa-suitcase img-rounded" src="/website/image/ir.attachment/1143_1cc91ea/datas" style=""/>
</a>
<h3 class="mt8 mb0">
<a href="http://edited/" target="_blank" title="edited
http://edited/">
<span style="color:#FFFFFF;">edited</span>
</a>
</h3>
<div class="text-muted">
<a href="http://edited/" target="_blank" title="edited
http://edited/">
<span style="color:#D3D3D3;">edited</span>
</a>
</div>
</div>
When it was originally entered, it was this:
<a href="http://edited/" target="_blank" title="edited
http://edited/">
<div class="col-md-4 text-center">
<img class="fa-suitcase img-rounded" src="/website/image/ir.attachment/1143_1cc91ea/datas" style=""/>
<h3 class="mt8 mb0">
<span style="color:#FFFFFF;">edited</span>
</h3>
<div class="text-muted">
<span style="color:#D3D3D3;">edited</span>
</div>
</div>
</a>

img alternative text instead of broken image icon

I am sending a html built email body..
Is there a way to display an alternate text while the images are not yet loaded?
I tried overlapping two divs with img and text, it is working but the problem is that the broken-image icon is showing.
<div style="width:100%;min-height:50px!important;text-align:center;background-color:#eee;border-bottom:solid 2px #aaa">
<div style="min-height:10px"> </div>
<div style="min-height:30px">
<div style='width:200px;margin:0 auto;'>
<a href="http://google.com" target="_blank">
<div style='position:relative;'>
<div style='position:absolute; height:30px;width:200px;z-index:1000;'>
<img height="30" width="200" alt="View Presentation" src="http://www.clker.com/cliparts/X/1/Q/v/b/2/green-button.svg">
</div>
<div style='position:absolute;height:30px;width:200px;background-color:#EEE;'>
Click here to view
</div>
</div>
</a>
</div>
</div>
<div style="min-height:10px"> </div>
</div>
Kindly see my work here..
http://jsfiddle.net/msvillanueva/aYuAd/1/
This jQuery plugin can help you
http://www.appelsiini.net/projects/lazyload
Lazy Load is delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading.
Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load.