Gamerz Posted December 2, 2009 Share Posted December 2, 2009 Okay, so I made a header image, and inside this image, I added some HTML and text. One of the HTML I added is a form. Users can enter username and password, then login. But, on one side, the text is NOT clickable. Nor is the "Submit" button clickable... So here's my whole page..you can test it out if you like...how do I exactly fix the problem, and make it so I can enter text on the form? <html> <body> <img src="header.jpg" height="110" width="1350" /> <DIV STYLE="position:absolute; top:5px; right:20px"> <CENTER><FONT COLOR="00ff00"><br> <form action="login.php" method="POST"> Username: <input type="text"><br> Password: <input type="password"><br><br> <input type="submit" value="Login!"> <input type="submit" value="Forgot Password?"> </form> </FONT></CENTER> </DIV> <DIV STYLE="position:absolute; top:10px; right:110px"> <table border="0" cellpadding="0" cellspacing="5"> <tr valign="top" align="left"> <td width="1" bgcolor="white"><br /> </td> <td width="150" valign="top" align="left"> <p><br><br><br><br><br></p> </td> </tr> </table> </DIV> </body> </html> EDIT: The problem has to do something with the below code. I took the code out, and it worked fine...so what's wrong with adding a second DIV like shown below? <DIV STYLE="position:absolute; top:10px; right:110px"> <table border="0" cellpadding="0" cellspacing="5"> <tr valign="top" align="left"> <td width="1" bgcolor="white"><br /> </td> <td width="150" valign="top" align="left"> <p><br><br><br><br><br></p> </td> </tr> </table> </DIV> Quote Link to comment Share on other sites More sharing options...
DavidAM Posted December 2, 2009 Share Posted December 2, 2009 You need to look at z-index for the DIV's. I had this problem trying to overlay a DIV with a login form on my page header DIV. It turned out the DIV with the login was "underneath" the header so I could not click on it. Give the DIV with the login a higher z-index to bring it up to the "top". <DIV STYLE="position:absolute; top:5px; right:20px; z-index: 3"> I'm no expert with CSS and STYLES, so you may have to play with it. I think I also gave my page header DIV a z-index of -1 (negative one). I think the table is causing a problem because you put it "on top" of the form. Think of the DIV's as index cards, you put one on the table, then put one on top of it. You can't write on the first one because the second one is covering it. Hope that helps. Quote Link to comment Share on other sites More sharing options...
JustLikeIcarus Posted December 2, 2009 Share Posted December 2, 2009 DavidAM is correct. Setting a z-index on the div with the form will make it accessible. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.