CSS Fixed Element Positioning and Link - html

Question

I have two questions...
How do I make the #LeftTable and drop-down menu to keep their position on the page, regardless of the window size?
As it is right now, it will move to be relative to the size of the window. I'd rather it stay in exactly the same place on the background picture (even if it means having scrolling bars at the bottom of the browser). How do I do this?
How do I get the HTML link to work within the button?
body {
background-color: gray;
background-image: url('images/backgroundpic.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
ul {
list-style-type: none;
position: fixed;
bottom: 0;
margin: 0;
padding: 0;
background-color: #333;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #87cefa;
}
li.dropdown {
display: inline-block;
}
ul li {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
bottom: 30px;
left: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
input#gobutton {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) cursor: pointer;
padding: 5px 25px;
background: #87CEFA;
border: 1px solid #1E90FF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
box-shadow: 0 0 4px rgba(0, 0, 0, .75);
color: #f3f3f3;
font-size: 1.1em;
}
input#gobutton:hover,
input#gobutton:focus {
background-color: #000080;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
box-shadow: 0 0 1px rgba(0, 0, 0, .75);
}
#LeftTable {
position: absolute;
width: 25%;
min-width: 25%;
right: 75%;
left: 25%;
top: 25%;
bottom: 50%;
Right: 100px;
border: 1px;
color: black;
font-weight: bold;
background-color: white;
opacity: 0.5;
filter: alpha(opacity=50);
border: 1px solid black;
padding: 5px;
}
<table id = "LeftTable">
<tr>
<td width = "20%"></td>
<td width = "80%" id='test'>
<table>
<tr><td>Left</td></tr>
<tr><td>Left</td></tr>
</table>
</td>
</tr>
</table>
<table class="gobutton" align="center">
<tr>
<td>
<div class="b_left"></div>
<div class="b_middle">
<input id="gobutton" type="submit" value="LISTEN" />
<a href="http://www.google.com">
</a>
</div>
<div class="b_right"></div>
</div>
</td>
</tr>
</table>

Answer 1

For your link:
You link works however in your example it's trying to open in a frame so its failing. If you create a html file on your computer, or host the html on a site it should work. I tested this on my computer and the link does work like this:
<a href="http://www.google.com">
<input id="gobutton" type="submit" value="LISTEN" />
</a>
For your table
if you want the position to never change you should not use percentages you should use measurements like pixels.
so instead of
#LeftTable {
position: absolute;
width: 25%;
min-width: 25%;
right: 75%;
left: 25%;
top: 25%;
...
you would have something like:
#LeftTable {
position: absolute;
width: 25%;
min-width: 25%;
right: 50px; //in pixels
left: 50px; //in pixels
top: 50px; //in pixels
...
also you may have to wrap your tables in a div and apply the background to that if you want the image t move with the left table:
<div class="main">
//tables
</div>
.main{
background-image: url('imageurl');
width:100%;
height:100%;
position: absolute;
bottom: 0;
margin: 0;
}
here's an example: http://codepen.io/nilestanner/pen/EgNXwE