Web link in html duplicating itself? - html

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>

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.

Create div with image and text as one link

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>

Button orders have different top-margin, even though they have the same css file

<a href="wordGenerator.html">
<h3 class="box">Word Generator</h3>
</a>
<a href="todo.html">
<h3 class="box">To-do list</h3>
</a>
<a href="calculator.html">
<h3 class="box" >Calculator</h3>
</a>
when I run the code, one of the links appear with different colour and in CSS top-margin of the one with different colour is lightly lower than the rest

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.

Can browser change HTML?

My mark up looks like this
<div class="thumbnail">
<a class="link-to-product" href="#">
<div class="stickers">
<div class="sticker discounts">Акции</div>
</div>
<div class="thumbnail-top">
<div class="img-wrap"><img src="img/box2.png" alt=""></div>
<div class="category">Жидкости</div>
<div class="title">Масло черного тмина</div>
</div>
<div class="thumbnail-down">
<div class="divider"></div>
<div class="price-container">
<div class="current-price">
<span>250 </span>
<span class="currency">грн.</span>
</div>
<div class="old-price">
<span>300</span>
</div>
</div>
<a class="buy-button" href="#">Купить</a>
</div>
</a>
</div>
This is what I see in browser devtools:
.thumbnail-down falls out of .link-to-product.
I tried different browsers (chrome, firefox), cleared cache, turned of css and js. And still .thumbnail-down falls out of .link-to-product.
I wrote the mark up in pug and compiled html with gulp. When i look at compiled html in dist folder it looks alright. I actually copied sample of code out from this file. Holy cow. What can cause such weird behavior?
I checked all links before this element and after. they are all properly closed
Not only it falls out. Browser copies .link-to-product. There is no css and js on this page, just pure html. And I copied it to different folder with no gulp and no other plugins
Try without nesting a inside a.
What I mean is
<a class="buy-button" href="#">Купить</a>
is inside
<a class="link-to-product" href="#">
My guess is that's what's causing the problem.