jack kennedy jack kennedy - 1 year ago 74
CSS Question

Html and CSS buttons do not function

Hello I have a website that I am making. I have text and buttons over a background that used to work before the background was added. But now they no longer work. They are drawn to the screen but do not function. Look at this code for a minute:

<div id = "rect0">

<div class = "banner grid_18" href="about.html">
<a href="logic.html" class="button" id ="new">View Article</a>

<div class=" grid_8 callout">
<a href="gallery.html" class="button" id ="new1">View Gallery</a>


When the buttons are outside the div rect0 then they function but when they are inside they are not clickable. Here's the css encase that is effecting it.

position: relative;
margin-top: -10px;
margin-left: 0px;
width: 951px;
height: 270px;
padding-left: 4px;
padding-top: 1px;
background: #ffffff;
z-index: -1;

background: #242324;
color: #B7B7B7;
padding: 6px;
color: white;
font-size: 11px;
text-transform: uppercase;

.button:hover{color: #d2d2d2;}

position: absolute;
margin-left: -140px;
margin-top: 220px;

position: absolute;
margin-left: 117px;
margin-top: 220px;


What am I doing wrong that doesn't allow the buttons to be activated? Thanks - Jack.


Removing z-index: -1 makes it work. See this Fiddle as reference.

Since your buttons are all inside the div you apply z-index: -1; to they all get pushed into the background as well and are therefore disabled.