Why "index.html#contact" dont move to div with id "contact"?

Question

Code that should get me to div with id "contact":

<a href="index.html#contact" class="w3-bar-item w3-button w3-padding-large w3-hover-black"><i class="fa fa-envelope w3-xxlarge"></i>

div:

<div class="w3-padding-64 w3-content w3-text-light-grey" id="contact">

I this moves me to:

<div class="w3-half w3-margin-bottom"><ul class="w3-ul w3-black w3-center w3-opacity w3-hover-opacity-off"><li class="w3-dark-grey w3-xlarge w3-padding-32">Voice Assistant</li><li><a href="https://github.com/LudwikZimmenhof/Voice-Assistant"><img src="https://opengraph.githubassets.com/08acf1b9b376cf16c3a6ec2b3bcfea4e8ed1e33a3291221dbaf5e18086213795/LudwikZimmenhof/Voice-Assistant" style="max-width: 432px"></a></li></ul></div>

Website: https://ludwikzimmenhof.github.io/Portfolio/index.html

Github respo: https://github.com/LudwikZimmenhof/Portfolio

Anybody know how to fix it?

If you inspect the code you'll see where the #contact block starts. — Vucko, Jan 02 '22 at 11:51
Linking to external resources that demonstrate your code is absolutely fine, **but** the "*[mcve]*" code to reproduce and demonstrate your problem ***must*** be in the question, ideally as a [runnable Stack Snippet](https://meta.stackoverflow.com/q/358992/82548) in the question itself. — David Thomas, Jan 02 '22 at 12:16

score 2 · Accepted Answer · answered Jan 02 '22 at 12:08

2

You have at least two issues going on:

Since your #projects contains floated elements (float: left;) you need to use something to avoid it to collapse (a clear fix)
A large part of your projects aren't properly inside the #projects div, you current setup is:

<div id="projects">
  <div id="project-1"></div>
  <div id="project-2"></div>
  <div id="project-3"></div>
</div><!-- the project div end here -->

<div id="project-4"></div>
<div id="project-5"></div>
<div id="project-6"></div>

PS: There is also an issue with your CSS reset:

answered Jan 02 '22 at 12:08

Ben Souchet

1,450
6
20

I have fix that but link to contact still dont work – DrEsperanto Jan 02 '22 at 15:18
@DrEsperanto This is due to the way the first issue I pointed, you set the `#projects` div to `float: left;`by doing this you moved the issue to the `#contact` div, so you have to option: 1. set `float: left;` also on the `#contact` div or 2. use a better clear fix like the `:after` method (see how to in the link I put in my post). – Ben Souchet Jan 02 '22 at 15:29
but now #projects dont work – DrEsperanto Jan 02 '22 at 16:11
EDIT: I have fixed it – DrEsperanto Jan 02 '22 at 16:16

score 0 · Answer 2 · answered Jan 02 '22 at 12:19

0

I aggree with @Ben Souchet but if you want to fix it and you dont know how to resolve completely. You could point to this section for now...

Also: You can loose the 'index.html' in your href parameters ;)

Contact Info section

answered Jan 02 '22 at 12:19

RVÐ

42
4

Why "index.html#contact" dont move to div with id "contact"?

2 Answers2