Heather Maxine Heather Maxine - 1 year ago 63
CSS Question

Can't click on links with div in the way

I can't click on my links anywhere. They are not inside of the div that seems to be blocking my ability to click on them. They are also not supposed to be opaque because they are not inside of that div. They are in their own divs. Anyone see what I'm missing here? How do I change this so that I can click on my links again? I was messing with the background image for awhile. I just don't know what's going on. This is my cheezy website I'm making for school. I just need help so I can turn this in! Thank you!

<!DOCTYPE html>
<!--

LOCAL PAGE
Heather M Smith
My First Home Page
CSIS 1430
6/18/2017


-->

<html>

<head>
<title>Heather's Home Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
body
{
max-height: 100%;
margin: 0 auto;
}



#background{
background: #373737 url('pinkBackground.jpg') no-repeat;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: -3;
}

#heading
{
text-align: center;
}

#emailAddressLink
{
color: white;
}

#topBox
{
margin-top: 50px;
}

h1, h2, h3, h4
{
color: black;
font-family: Georgia;
text-shadow: 1px 0px 5px white;
text-align: center;
z-index: 4;
}

ol, ul, li
{
color: black;
font-family: Georgia;
font-size: 20px;
line-height: 2em;
z-index: 4;

}


.bigText
{
color: #373737;
font-family: Georgia;
font-size: 60px;
}

.link
{
color: #5200cc;
text-decoration: none;
font-family: Georgia;
font-size: 25px;
word-spacing: 5px;
line-height: 2em;
font-weight: bold;
text-shadow: 2px 0px 10px #ffff99;
z-index: 4;

}


.box
{
background-color: #DCD0C0;
padding: 20px;
border: 2px solid #373737;
margin: 10px auto;
width: 800px;
height: 300px;
opacity: .3;
z-index: -3;

}

.boxContents
{
width: 800px;
height: 340px;
margin: 10px auto;
margin-top: -350px;
text-align: left;
line-height: 2em;
z-index: 4;
}

#intro
{
font-family: Georgia;
font-size: medium;
word-wrap: normal;
font-size: 1.5em;
}

#slccLogo
{
position: relative;
float: right;
padding: 30px;
width: 250px;
height: 250px;
}

#owlImage
{
float: right;
width: 300px;
height: 200px;
}

#lastBox
{
line-height: 6em;

}




</style>
</head>

<body>
<!--BACKGROUND-->
<div id="background"></div>
<!--HEADING-->
<div id="heading">
<h1 class='bigText'>Heather's Home Page</h1>
<h2>CSIS 1430 | Email me:</h2>
<!--EMAIL ADDRESS-->
<address>
<a class='link' id="emailAddressLink"
href="mailto:[email protected]" target="_blank">
Heather's Email
</a>
</address>
</div>

<br>
<!--BACKGROUND DIV BOX-->
<div class='box' id="topBox"></div>
<!--INTRO-->
<div class="boxContents">
<span id="intro">Hello! I'm Heather, a student at
<a class='link' href="http://www.slcc.edu/">Salt Lake Community
College</a>
studying Computer Science. I want to be a software developer and
my goal
is to get an internship before I graduate. I'm getting some
experience at
Century Link, where I currently work. I have worked at Century
Link for
two years as a Repair Representative. Even though my interest
in computers is great, I'm also an aspiring artist.
<br>
I've been painting, drawing, and playing music for most of my
life
and I know there's always so much more to learn. I'm hoping to
use my
creativity in a way that can be applied to developing software
in the
future.
</span>
</div>


<br>
<!--COMPUTER SCIENCE COURSES-->
<div class='box'></div>
<div class="boxContents">
<h2 class="heading">My Computer Science Courses at <a class='link'
href="http://www.slcc.edu/" target="_blank">SLCC</a></h2>
<img id="slccLogo" src="SLCCLogo.png" alt="SLCC">
<ul>
<li class="link"><a href =
"https://heathersmithx.wordpress.com/computer-science-and-information-
systems">CSIS 1030</a></li>
<li>CSIS 1340 - content coming soon</li>
<li>CSIS 1400 - content coming soon</li>
<li>CSIS 1410 - content coming soon</li>
<li>CSIS 1430 - content coming soon</li>
<li>CSIS 1550 - content coming soon</li>

</ul>
</div>

<br>
<!--GENERAL EDUCATION COURSES-->
<div class='box'></div>
<div class="boxContents">
<h2>My General Education Courses at <a class='link'
href="http://www.slcc.edu/" target="_blank">SLCC</a></h2>
<img id="owlImage" src="Owl.png" alt="Wise Owl">
<ul>

<li class="link"><a
href="https://heathersmithx.wordpress.com/coursework/english-2010/">ENGLISH
2010 NOTEBOOKS</a></li>
<li class="link"><a href =
"https://heathersmithx.wordpress.com/coursework/film-culture/686-2/">FILM
1070 FINAL PAPER</a></li>
<li class="link"><a href="index/reflection.html">CSIS 1430
REFLECTION</a></li>
<li class="link"><a
href="https://heathersmithx.wordpress.com/outside-the-classroom/">OUTSIDE OF
SCHOOL...</a></li>

</ul>
</div>

<br>
<!--MY FAVORITE WEBSITES-->
<div class='box'></div>
<div class="boxContents">
<h2>My Favorite Web Sites!</h2>
<ol>
<li class='link'><a href = "http://www.dreamincode.net/"
target="_blank">Dream in Code</a></li>
<li class='link'><a href = "https://www.wolframalpha.com/"
target="_blank">Wolfram Alpha</a></li>
<li class='link'><a href = "https://slcc.instructure.com/"
target="_blank">SLCC Canvas</a></li>
<li class='link'><a href = "https://www.w3schools.com/"
target="_blank">w3schools</a></li>
</ol>
</div>

<br>
<!--PROJECTS FROM THIS CLASS-->
<div class='box'></div>

<div class="boxContents" id="lastBox">
<h2>Projects from CSIS 1430</h2>
<h4 class="link">
<a class='link' href='resume.html' target="_blank">RESUME | </a>
<a class='link' href='littleBoxes/littleBoxes.html'
target="_blank">LITTLE BOXES | </a>
<a class="link" href='map/utahMap.html' target='blank'>IMAGE MAP
|</a>
<a class="link" href='PizzaPlace/pizzaIndex.html'
target='blank'>PIZZA ORDER FORM |</a>
<a class='link' href='GuessingGame/GuessIndex.html'
target="_blank">GUESSING GAME | </a>
<a class='link' href='TicTacToe/TicTacToe.html'
target="_blank">TIC TAC TOE | </a>
<a class='link' href='index/reflection.html'
target="_blank">REFLECTION </a>
</h4>
</div>

</body>
</html>

Answer Source

The issue is with the .boxContents class. The margin-top selector is pulling everything off. If you remove it, your links should function as expected. Also, just on a side-note, it's worth avoiding using lots of z-indexes in your CSS if they aren't required. It can lead to issues and content being hidden all too easily.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download