HTML & CSS - Links doesn't work

Question

I have made a very simple website using HTML and CSS, I have added a few links as well but only one of the links actually work. There are 4 links in total and only the one at the bottom of the code will work. Please help. This is my HTML code:

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {  margin: 0;  padding: 0;  border: 0;  font-size: 100%;  font: inherit;  vertical-align: baseline;}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
  font: 25px 'Open Sans', Arial, Helvetica, sans-serif;
}

ol,ul {
  list-style: none;
}

blockquote,q {
  quotes: none;
}

blockquote:before,blockquote:after,q:before,q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.nav {
  float: left;
}

.home {
  position: absolute;
  top: 173px;
  width: 100%;
  padding-right: 1200px;
}

.faq {
  position: absolute;
  top: 173px;
  width: 100%;
  padding-right: 900px;
}

.shop {
  position: absolute;
  top: 173px;
  width: 100%;
  padding-right: 580px;
}

.contact {
  position: absolute;
  top: 173px;
  width: 100%;
  padding-right: 200px;
}

html {
  box-sizing: border-box;
}

*,
*:before,*:after {
  box-sizing: inherit;
}

a {
  text-decoration: none;
}

.header {
  text-align: center;
}

.hemsidan {
  background: #ffffff url(../images/hemsidan.png)no-repeat 50% 50%;
  height: 1389px;
  width: 100%;
}

<header class="header">
  <div class="container">
    <div class="hemsidan"><img src="images/hemsidan.png" height="1389" width="1366" alt=""></div>
    <div class="centered">Centered</div>
    <nav>
      <ul class="nav">
        <li class="home"><a href="#">Home</a></li>
        <li class="faq"><a href="http://pages.ebay.com/seller-center/faq/index.html">FAQ</a></li>
        <li class="shop"><a href="https://www.blocket.se/">Shop</a></li>
        <li class="contact"><a href="https://twitter.com/realdonaldtrump">Contact us</a></li>
      </ul>
    </nav>
  </div>
</header>

I am very new to HTML and CSS so forgive me for the horrible coding, I just want the links to work.

Answer 1

Links are just overlapping as top value is given 173px for all of them. Just change top: 173px; to some other value for each link or instead of padding-right just use "right" and "left" positioning. or remove all these lines below.

.home {
  position: absolute;
  top: 173px;
  width: 100%;
  padding-right: 1200px;
}
.faq {
  position: absolute;
  top: 173px;
  width: 100%;
  padding-right: 900px;
}
.shop {
  position: absolute;
  top: 173px;
  width: 100%;
  padding-right: 580px;
}
.contact {
  position: absolute;
  top: 173px;
  width: 100%;
  padding-right: 200px;
}

You position each link as required.

Answer 2

This is the sanitized code (As mentioned you were using position: absolute; for links which was leading to a click to other place but not on link)

ol,
ul {
  list-style: none;
}

li {
  display: inline-block;
  margin: 10px;
}

a {
  text-decoration: none;
}

.container {
  text-align: center;
}

<div class="container">
  <div class="hemsidan"><img src="images/hemsidan.png" height="1389" width="1366" alt=""></div>

  <nav>
    <ul class="nav">
      <li class="home"><a href="#">Home</a></li>
      <li class="faq"><a href="http://pages.ebay.com/seller-center/faq/index.html">FAQ</a></li>
      <li class="shop"><a href="https://www.blocket.se/">Shop</a></li>
      <li class="contact"><a href="https://twitter.com/realdonaldtrump">Contact us</a></li>

    </ul>
  </nav>
</div>

Answer 3

Your li elements are absolutely positioned over each other. This means that last li covers and blocks previous li-s.

Instead of absolute positioning and padding-rights do this:

.home { 
    display: inline-block;
}
.faq{
    display: inline-block;
}
.shop{  
    display: inline-block;
}
.contact{
    display: inline-block;
}

(There is really no need for ul and li elements at all. Just put your links inside nav block and give them some padding)

Answer 4

I think there isn't any problem with the links. I suppose as you're positioning them as absolute in the container they are overlapping one over the other and what you are actually clicking is some div or element blank area.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
font: 25px 'Open Sans', Arial, Helvetica, sans-serif;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.nav {
float: left;
}
.home { 
//position: absolute; 
//top: 173px; 
width: 100%; 
padding-right: 1200px;
}
.faq{
//position: absolute; 
//top: 173px; 
width: 100%; 
padding-right: 900px;
}
.shop{  
//position: absolute; 
//top: 173px; 
width: 100%;
padding-right: 580px;
}
.contact{
//position: absolute; 
//top: 173px;  
width: 100%;
padding-right: 200px;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
 box-sizing: inherit;
}
a {
text-decoration: none;
}
.header {
text-align: center;
}
.hemsidan{
background: #ffffff url(../images/hemsidan.png)no-repeat 50% 50%;
height: 1389px;
width: 100%;
}

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hemsidan</title>
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<header class="header">
<div class="container">
<div class="hemsidan"><img src="images/hemsidan.png" height="1389" width="1366" alt=""></div>
<div class="centered">Centered</div>
<nav>
<ul class="nav">
<li class="home"><a  href="#">Home</a></li>
<li class="faq"><a href="http://pages.ebay.com/seller-center/faq/index.html">FAQ</a></li>
<li class="shop"><a href="https://www.blocket.se/">Shop</a></li>
<li class="contact"><a href="https://twitter.com/realdonaldtrump">Contact us</a></li>

</ul>
</nav>
</div>
</header>

</body>
</html>