Unable to click some hyperlinks due to css formatting - html

Question

My final is to recreate a basic html page with my own css like csszengarden.com.
I made a simple one page deal at http://randallmiller.pcriot.com/72bclass/final72b/index.html.
However a few of my links are not clickable. Here is the css for the site. Any help would be greatly appreciated!
EDIT: I fixed the unclickable part with z-index:1, I think because of the padding on linkblock2. However, now my a:hover to turn them grey is only working for a few.
html{
height:100%;
}
body{
background:#000000;
}
h3{
margin-top:0;
}
h3 span{
color:white;
display:block;
}
.pgtitle1{
word-spacing:10px;
padding-top:25px;
margin-left:125px;
font:1.5em "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.pgtitle2{
padding-top:10px;
margin-left:275px;
font:bold .7em "Comic Sans MS", cursive;
letter-spacing:2px;
}
div#linkblock1{
position:absolute;
top:200px;
padding-left:25%;
}
div#linkblock2{
position:absolute;
top:200px;
padding-left:67.5%;
}
div a{
border-bottom:solid 1px white;
text-decoration:none;
text-align:center;
padding:5px;
display:block;
width:90px;
}
div a:hover{
color:rgb(200,200,200);
}
div a:visited{
color:blue;
}
div#fg_img{
height:323px;
background:url(bg.jpg) no-repeat center;
margin-top:50px;
line-height:999;
overflow:hidden;
}
h2{
font-size:.75em;
color:#FFF;
position:absolute;
top:10px;
left:60px;
}

Answer 1

You've covered up some of your links with #fg_img. Set some z-indexes.

Answer 2

Your divs are overlapping each other in many weird ways, the position:absolute on the div with the right links "linkblock2" is overlapping the links on the left.
You should really remove the position:absolute and use float on the divs, and you wouldn't run into that problem.
Not sure if it's an option or not, but check out a CSS Grid system if you can use it on your assignment.