CODEWITHSUNDEEP
htmlcss
Randallsm83
Randallsm83

Reputation: 69

Unable to click some hyperlinks due to css formatting

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;  
}

Upvotes: 0

Views: 744

Answers (2)

pcalcao
pcalcao

Reputation: 15975

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.

Upvotes: 0

Quentin
Quentin

Reputation: 943185

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

Upvotes: 1

Related Questions