I need to put a link href="/favourites_new/" in the text so that when I click on the card (not on the text itself) I could go to another page. There is my simple code
<div class="left-card-parent">
<div class="left-card">
<h1 class="left-card-h2"> ⬅</h1>
<p>selected</p>
</div>
</div>
How should I solve my problem?
Add all you code inside an tag
for example
<a href=your link here>
<div class="left-card-parent">
<div class="left-card">
<h1 class="left-card-h2"> ⬅</h1>
<p>selected</p>
</div>
</div>
</a>
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.
I will not add the code but I need to make my button not just go to another page, but go to the middle section of the page. Like I want the button to lead to a scrolled down page. Does anyone know what to do ?
add id in the div of the page like <div id="hello">some thing here</div> and on button you can use something like this <button>scroll</button>
I'm assuming that just want your button to scroll down to section of the page. if i'm wrong then comment I'll edit the answer according to it.
#hello{
margin-top:20px;
margin-bottom:500px;
}
.height{
height:500px;
}
html{
scroll-behavior:smooth;
}
<div>
<button>
<a class="scroll" href="#hello">scroll</a>
</button>
<div class="height">
</div>
<div id="hello">Hello</div>
</div>
I believe the simplest way to achieve this would be to create a pair of tags, one for the button and one that is invisible at the desired destination. A basic example would be as follows:
<body>
<div id="header">
<h1>Title</h1>
</div>
<div class="outer">
<div class="inner">
<button>Go To 3rd Section</button>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</div>
<div class="inner">
<h1>My Second Heading</h1>
<p>My second paragraph.</p>
</div>
<div class="inner">
<a id="third"></a>
<h1>My Third Heading</h1>
<p>My third paragraph.</p>
</div>
</div>
</body>
After applying the appropriate css for your application, this would be a very simple way to link to a particular part of the page. The destination 'a' tag has a specified id
<a id="destination"></a>
while the corresponding button, which is wrapped inside an 'a' tag, has the href pointing to a particular id
<button>Destination</button>.
Hope this answers your question!
<body>
<div class="header-8">
<div class="container">
<div class="row">
<div class="col-md-8">
<h1 class="#headline.6">International Network</h1>
<h4>We know how large objects will act, but things on a small scale</h4>
<div class="cta">
<button class="button.bt.primary-color.btn-round">
Get Quote Now
</button>
<button class="button.bt.primary-color.btn-outline.btn-round">
LEarn More
</button>
</div>
</div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col_md_4">
<div class="card-item">
<div class="icn resize icn-md">
</div>
</div>
</div>
</div>
</header>
</body>
Please click the above link to view the picture.
As you can see, I am not able to find the vector icon code for my project in FIGMA.
See the left side, Vector is clicked and on the right side the icon are visible.
But I don't know what's the code for it.
Moreover, if anyone have done any FIGMA project, can you tell me that I have placed the div tags correctly in VSCODE according to the left side objects?
By the way,you can right click the svg icon and copy as svg,or download the svg and show in your browser,check the html elements and copy the svg elements is also works
Try to find your vector icon in inspect selection,it's here:
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>
I have the following HTML template :
<div class='item'>
<img href='...' attributes='...' \>
<div class='popup' attributes='...'>
</div>
</div>
I use Jquery to on mouse over of the div (and thus the image), and show the popup. The problem is, I can't seem to control+click to open in a new tab in chrome nor firefox; neither can I right click the image and open the link in a new tab. How can I do this?
Add target="_blank" to the link. It should look something like this:
<div class='item'>
<img src='....' attributes='...' \>
<div class='popup' attributes='...'>
</div>
</div>
The link that you want the image to open goes in a href='LINK' and the file path to the image goes in img src='PATH'
Check this example
Here's the code markup with an example of an image (ctrl+click on it and it will take you to google.com):
<div class="item">
<a href="http://www.google.com">
<img src="https://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" attributes="#"\>
</a>
<div class="popup" attributes="#">
</div>
</div>
You just needed to wrap your <img> tag with an <a> tag.
Hope it helps!
Surround your image with <a> tags and link to a new page which has the image on it.
All you need is
<div class='item' >
<a href='...' attributes='...' target="_parent">
<img src="yoursource.jpg"/></a>
<div class='popup' attributes='...'>
</div>
</div>
Add target="_parent" or you could use _blank to your href (and remove the img for now), then close the href with > and make and new img field. wrap your href and img with Should work now