Links dont work (beginner html css only) - html

Question

I've had a look through some questions I thought were similar to mine but it turns out even the beginner questions are advanced for me!
For some reason my links in the header and footer work, but not in the side bar or the main body, could someone please explain to me why and how i can fix it?
I've opened the html without the css and it works fine then, but i dont know how my css would make a link invalid :S
Code is here: http://codepen.io/anon/pen/gppbmP
Im "pretty" sure its the css thats messing things up so ive pasted that down there, but the codepen has the html too :)
(i am aware that it is super basic, but it is my first try and everyone has to start somewhere! :))
body {
font-family: "Helvetica";
background: #DCDCDC;
}
header a {
font-size: 12px;
color: black;
text-decoration: none;
}
.side a {
font-size: 12px;
color: gray;
text-decoration: none;
}
.product a {
font-size: 12px;
color: gray;
text-decoration: none;
text-align: center;
}
.product p {
font-size: 12px;
color: gray;
text-align: center;
}
footer a {
font-size: 12px;
color: gray;
text-decoration: none;
}
body a:hover {
color: #FF0066;
}
.nav1 {
float: left;
position: relative;
top: 15px;
left:20px;
}
.nav2 {
position: absolute;
top: 47px;
right: 70px;
float: right;
}
h1 {
font-family: 'Satisfy', cursive;
font-size: 48px;
position: relative;
left: 420px;
}
header {
background-image: url("http://www.hugohd.com/wp-content/uploads/Pink-Beach-Sunset-Wallpaper-Android-Wallpaper-hugohd.com_.jpeg");
margin: 30px;
}
.product {
background: white;
position: relative;
float: right;
left: -32px;
height: 350px;
padding: 30px;
}
.product img {
height: 200px;
width: 150px;
margin: 5px;
}
.side {
margin: 30px;
float: left;
background-color: white;
height: 800px;
width: 200px;
padding: 10px;
position: relative;
top: -29px;
text-align: center;
}
.side ul {
list-style-type: none;
margin: 0;
padding: 0;
}
footer ul {
list-style-type: none;
margin: 0;
padding: 0;
}
footer ul li {
display: inline;
padding: 80px;
}
footer {
position: relative;
bottom: -40px;
right: 100px;
}
Thanks in advance! x
Edit: Thank you for helping, everyone! it now works :) x

Answer 1

Update
What follows below may be of use if you are unsure how to set up anchor tags (some seem to be wrong) but see Tasos K's solution above (and voters look at his solution as well).
Original Answer
You seem to be missing http:// at the start of your href=:
google
^^ that's the correct way of doing it but sometimes you have:
google
When you leave out http:// the browser thinks that the link is relative to the html page that it is trying to display. If you look at where those links try to take you they will be something like http://www.example.com/www.google.com.
That's actually a handy thing to use though because it means that media like javascript, css and images that are on your website don't need to be referenced with a full url. You can just use:
<img src="/images/background.png">
(instead of)
<img src="http://www.example.com/images/example.png">
Similarly with links, you can reference other pages on your site with:
Page 2

Answer 2

You are positioning your <footer> with position:relative; and it goes over the side menu. You can see it clearly if you add a background-color:
footer {
background-color:#DEDEDE;
}
You can see it here in a demo. Depending on what you want to do, a solution to fix this can vary.
To fix the issue with your current layout, just set the z-index property to a value, e.g. 1. See demo here
.side {
z-index: 1;
}
.container {
position:relative;
z-index:1;
}
My suggestion is to reconsider your layout to avoid similar issues in the future.

Answer 3

adding this to your CSS file will make the links clickable
.product {
z-index:1000;
}
Working demo with functional product links here.

Answer 4

#Sarah, i dont have exact know how , why? but if you rename your class from side to side1 or something else and then change the css to same as side1 or something it works fine.
Again i am not sure what could be the reason side is not working. And request you not to grade down if you dont accept.