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.
Related
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.
All that it displays when I click on it is black background.
Here is my code:
<div class="cbp-item art illustration">
<a class="cbp-caption cbp-lightbox" data-title="Abstract Art Museum" href="https://www.youtube.com/embed/watch?v=LnwPD69Fbh4"> <div class="cbp-caption-defaultWrap">
<img src="assets/images/portfolio/masonry/art.jpg" class="portfolio-thumbnail" alt="" >
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<div class="cbp-l-caption-title">3D Abstract Museum</div>
<div class="cbp-l-caption-desc">Video</div>
</div>
</div>
</div>
</a>
</div>
I tried to change URL and use embed code. I also tried to research more on it but it kept on showing lightbox for images with code that had modal involved in it. I have seen this code work before without the use of modal but I feel like something else is missing.
I'm fairly basic when it comes to coding websites, but I wanted to incorporate anchor points in to my horizontal scrolling website. I've had a go but it isn't working.
Below is the code I've tried - I'm not sure if it's something to do with my navbar not being the standard <li> instead im using separate divs. I will include an image of how i'm designing the site so that you can understand the concept.
HTML:
<div id="navbar">
<div class="tab1" href="#home">
<div class="text1">Home</div>
</div>
<div class="tab2" href="#work">
<div class="text2">Work</div>
</div>
<div class="tab3" href="#about">
<div class="text3">About</div>
</div>
</div>
<div id="container">
<div id="fullscreen">
<div class="box home" id="home">
<div class="heading">
<h1>Hi,</h1>
<h2>I'm Nathan Wilson</h2>
<h3>a Graphic Designer based in Nottingham, U.K.</h3>
</div>
</div>
<div class="box work" id="work">
</div>
<div class="box about" id="about">
</div>
</div>
</div>
Image: https://imgur.com/fh6hq3O
I want to incorporate smooth scrolling eventually, but that's something I'll look in to once i've fixed this issue.
Anchor points work due to property binding the tag elements as follow
Where You Click!
<a name="anchor-point-1"></a>
So #anchor-point-1 is the property element that binds to the NAME of the anchor tag which you can place anywhere in your markup vertically or horizontally depending on how you are styling your app.
you can do multiple anchor tags as follows for a tabs like template
Where You Click!
<a name="anchor-point-tab-1"></a>
Where You Click!
<a name="anchor-point-tab-2"></a>
It doesn't matter what you name the tags as long as your original link and the anchor have the same binding element HREF = the same NAME property.
You can also bind the elements to divs, spans, and other tags for these types of visual and scrolling effects
For internal anchoring attributes
There are three anchor attributes you need to know to create functional hyperlinks. These attributes are href, target, and download.
These are considered anchors as well but do not bind one tag to another!
Anchor 1: mailto:
<a href="mailto:contact#anchor.com">
Anchor 2: tel:
make call (555)123-9876
Anchor 3: target="_blank"
<a href="https://test.com" target="_blank">
To learn about the dynamics and inner working of all the attributes of A href tags please go to the link below.
https://html.com/anchors-links/
hope this is sufficient!
Your doing it right, except that you have to use <a> balise instead of <div>
<a class="tab1" href="#home">
<div class="text1">Home</div>
</a>
You are close. Instead of wrapping your <div> within a <div class="tab1" href="#home"> you need to use the anchor tag Test. Try this.
<div id="navbar">
<div class="tab1">
Home
</div>
<div class="tab2">
Work
</div>
<div class="tab3">
About
</div>
</div>
<div id="container">
<div id="fullscreen">
<div class="box home" id="home">
<div class="heading">
<h1>Hi,</h1>
<h2>I'm Nathan Wilson</h2>
<h3>a Graphic Designer based in Nottingham, U.K.</h3>
</div>
</div>
<div class="box work" id="work">
Work Content
</div>
<div class="box about" id="about">
About Content
</div>
</div>
</div>
We've created an animated timer like so:
Unfortunately it's looking like this currently on iPad:
The iPad is on 10.3.3 which is a couple version old but we cant see any CSS/HTML features that are not supported.
Here's the jsfiddle with all the code:
https://jsfiddle.net/liammkenny/58rezv3c/192/
The html structure is fairly simple:
<body>
<div class='timer'>
<div class="cover wedge"></div>
<div class="left wedge"></div>
<div class="right wedge">
</div>
<div class="mask">
<div class="stop"></div>
<span class="units">123
</span>
</div>
</div>
</body>
What's making it display so badly?
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>