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>
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 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>
Depending on where I put the </a> tag, the boxes look different. Here is what it looks like at the moment.
JSFiddle
<a href="#"> <div class="box">
<header><h2>Responsive C3</h2></header>
<div id="chartA">
</div>
</div></a>
How can I keep the first box as a clickable object while the second box is aligned side by side? With out the <a></a> tags then they align just fine.
the class box allow your blocks to float:left and therefore be side-by-side.
If you apply class="box" to the a tag instead of the div tag it will work as you expect.
<a href="#" class="box">
<div>
<header>
<h2>Responsive C3</h2>
</header>
<div id="chartA">
</div>
</div>
</a>
Here is a good article to understand more about float : https://css-tricks.com/all-about-floats/ and another about display: https://css-tricks.com/almanac/properties/d/display/
So I am trying to add some web links but I want them positioned underneath my p element. As of right now I currently have my href elements in line with my p element. So here is my current code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-9">
<p>Here are a few links which may provide some insight to Lisa:
Hold My Hand
Lean on Me
</p>
</div>
</div>
</div>
You have your anchor tags wrapped inside a p tag. Either place it outside the p tag or add a span to the text and make it 100% wide (using bootstrap class) .
Wrap your p tag text with span tag
Since you are using bootstrap you can use the class col-xs-12
<span class='col-xs-12'>Here are a few links which may provide some insight to Lisa: </span>
if you want to position your links under the text that you write you have many ways to do it...
you can use this tags '<div>', '<br>', '<ul>' like below
Solution one (using div tag) :
<div class="container-fluid">
<div class="row">
<div class="col-xs-9">
<p>Here are a few links which may provide some insight to Lisa:
<div>Hold My Hand</div>
<div>Lean on Me</div></p>
</div>
</div>
</div>
Solution two (using ul and li tag) :
<div class="container-fluid">
<div class="row">
<div class="col-xs-9">
<p>Here are a few links which may provide some insight to Lisa:
<ul>
<li>
Hold My Hand
</li>
<li>
Lean on Me
</li>
<ul>
</p>
</ul>
</div>
</div>
</div>
Solution three (using br tag) :
<div class="container-fluid">
<div class="row">
<div class="col-xs-9">
<p>Here are a few links which may provide some insight to Lisa:
</br>
Hold My Hand
</br>
Lean on Me
</p>
</ul>
</div>
</div>
</div>
Move the closing tag, </p>
<div class="container-fluid">
<div class="row">
<div class="col-xs-9">
<p>Here are a few links which may provide some insight to Lisa: </p>
Hold My Hand
Lean on Me
</div>
</div>
</div>
I have got some elements on my page, they should all be styled the same except for every other one, where I just want to change some styling.
Here is the CSS which I was hoping would select the div inside the stack of different elements:
.stagger_reviews[class=inner]:nth-child(2n+2) {
background-color:#003;
}
Here is the HTML:
<div class="stagger_reviews">
<!-- Later use PHP to load reviews, CSS should switch the images from left to right -->
<article class="container box style1">
<a style="background-image:url(images/blank-user.jpg); " href="#" class="image fit"></a>
<div class="inner">
<header>
<h2>Martyn Ball</h2>
</header>
<p>
I found this service on a Google Search, didn't expect it to be so great!
</p>
</div>
</article>
<article class="container box style1">
<a style="background-image:url(images/blank-user.jpg); " href="#" class="image fit"></a>
<div class="inner">
<header>
<h2>Martyn Ball</h2>
</header>
<p>
I found this service on a Google Search, didn't expect it to be so great!
</p>
</div>
</article>
</div>
As you can see I just want to adjust the one div inside each article which has the class name inner. And maybe some other elements as well but once I have this working I can do that.
The style isn't being applied to the second inner div, I have made about 4 copies of the article and none are being changed.
Here is the solution, I put the nth-child in the wrong place.
.stagger_reviews > article:nth-child(2n+2) div[class=inner]