Unable to click some hyperlinks due to css formatting

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

Test this in a text browser. Making things pretty with CSS is all very well, but the page should be sane without the stylesheets. — Quentin
– Quentin, Commented Dec 14, 2011 at 23:21

Quentin · Accepted Answer · 2011-12-14 23:19:34Z

1

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

answered Dec 14, 2011 at 23:19

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Randallsm83 Over a year ago

Thank you, is this a possibility why my a:hover isn't working on some of the links also?

Quentin Over a year ago

You've defined :visited after :hover so if a link is visited then the :visited styles will override the :hover styles.

pcalcao · Accepted Answer · 2011-12-14 23:23:52Z

0

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.

answered Dec 14, 2011 at 23:23

pcalcao

16k1 gold badge49 silver badges65 bronze badges

1 Comment

Randallsm83 Over a year ago

Got it, I will check out the grid system. Thank you!

Collectives™ on Stack Overflow

Unable to click some hyperlinks due to css formatting

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related