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.

Just copy/pasted your code and all the links work for me. What is the part not working for you? — CodingNagger
– CodingNagger, Commented Nov 17, 2017 at 11:45
Only "Contact us" works for some reason, all the other texts are unclickable — J. Doe
– J. Doe, Commented Nov 17, 2017 at 11:47
What is your problem actually, you don't wanna work rest of the 3 links but only "Contact"? — Hanif
– Hanif, Commented Nov 17, 2017 at 11:49
What? No, I want all links to work but Contact is the only one that works and I don't know why. — J. Doe
– J. Doe, Commented Nov 17, 2017 at 12:01

jmtalarn · Accepted Answer · 2017-11-17 11:47:21Z

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>

You're probably right, I do have an image in the background and I'm trying to make the links overlap the background image. When I try to run the code you provided, the text doesn't show up at all because they're probably behind the image.

Rauli Rajande · Accepted Answer · 2017-11-17 11:54:24Z

0

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)

answered Nov 17, 2017 at 11:54

Rauli Rajande

2,0201 gold badge21 silver badges26 bronze badges

3 Comments

J. Doe Over a year ago

When I do this, the background image will overlap the text/links and they won't show up at all.

Rauli Rajande Over a year ago

Ok, for background image use css background-image on body or .container. If you want to use real image, give your background image absolute position with z-index:10 and your nav relative position with z-index: 20.

J. Doe Over a year ago

I have no idea what's wrong, this is what happens: imgur.com/a/TJOTG This is my code: pastebin.com/fBnTgYf0

Nawaz Ghori · Accepted Answer · 2017-11-17 12:00:16Z

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>

Mohammed Wahed Khan · Accepted Answer · 2017-11-17 12:15:46Z

0

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.

edited Nov 17, 2017 at 12:15

Mohammed Wahed Khan

8882 gold badges15 silver badges37 bronze badges

answered Nov 17, 2017 at 11:50

Ahtsham Farooq

1222 silver badges10 bronze badges

Collectives™ on Stack Overflow

HTML & CSS - Links doesn't work

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related