Register link no longer clickable when i put it near my login link.

bigcasey123

08-07-2012, 12:50 AM

Here's my site http://thisisatest.host56.com/
it won't let you click register for some reason. When i put the register link some where else then it lets you click it. I don't get what the problem is, here is my coding.

Index
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<LINK REL="SHORTCUT ICON" HREF="images/icon.ico">
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>TEST</title>
</head>
<body>
<div id="main">
<div id="upload">
<a href="#"><img src="images/uploadbutton.png" title="Upload your own game"></a>
</div>

<div id="login">
<form action='login.php' method='POST'>
<input type='text' name='username' class='textbox' value="Username" onfocus="this.value=''" />
<input type='password' name='password' class='textbox' value="Password" onfocus="this.value=''" />
<a href="#" id="loginbutton"><img src="images/loginbutton.png"/></a>
<a href="#" id="register">register</a>
</form>

<div id="or" style="width: 80px;">
or
</div>
</div>

</div>
<div id="Copyright">
Copyright © 2012 yourwebsite.com. All rights reserved.
</div>
</body>
</html>

CSS

body {
background-image:url('images/background.jpg');
background-repeat:repeat;
}
#main {
border:1px solid black;
background-color:white;
height:900px;
width:800px;
position:relative;
left:90px;
border-radius: 5px;
}
#Copyright {
border:1px solid black;
background-color:white;
font-weight:bold;
position:relative;
top:-22px;
left:90px;
width:800px;
text-align:center;
}
#menuheader{
border:1px solid black;
height:35px;
width:200px;
background-color:black;
color:white;
font-family:Comic Sans MS;
font-size:20px;
text-align:center;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
position:relative;
top:31px;
left:30px;
}
#upload {
position:relative;
top:90px;
left:600px;
width: 120px;
height: 28px;
}
a img
{
border:none;
}
/* this is to change the login textbox */
.textbox {
height:15px;
width:120px;
color:gray;
padding:5px;
}
/* this is to move the login */
#login {
position:relative;
left:430px;
top:-10px;
width: 279px;
}
#loginbutton {
position:relative;
left:280px;
top:-29px;
}
/* this is to move the register link */
#register {
position:relative;
top:-10px;
left:220px;
}
#or {
position:relative;
left:290px;
top:-30px;
}

tempz

08-07-2012, 01:15 AM

CSS:

#or {
position: relative;
left: 295px;
top: -2.4pt;
z-index: 99;

#register {
position: absolute;
top: 25px;
left: 320px;
float: left;
display: inline;

#loginbutton {
position: absolute;
left: 280px;
top: 1px;
background: url('images/loginbutton.png');
width: 88px;
height: 25px;
display: inline;
float: left;

Remove

<img src="images/loginbutton.png">

This should leave it clickable!!

AndrewGSW

08-07-2012, 01:25 AM

All that relative-positioning is playing havoc with the layering of elements on your page. The div #login is sitting above the register option, preventing you from clicking it.

Personally, I would consider re-writing it. I would put that whole section (the form, register, Upload Game) into a single div. I would give it a specific width and probably use float: right, and use margins to position it within the larger white area.

I would use a combination of margins, padding and floating to position the various elements within this floated div.

But, I suppose, you could play with z-index to bring the 'register' button to the top.

bigcasey123

08-07-2012, 01:26 AM

dang i thought relative made everything look the same on all resolutions :(

bigcasey123

08-07-2012, 01:31 AM

AndrewGSW

08-07-2012, 01:36 AM

dang i thought relative made everything look the same on all resolutions :(

Relative is mostly used to provide context for absolutely positioned elements within it. Occasionally it is used to move a (small) element slightly from its default position in the document flow.

AndrewGSW

08-07-2012, 01:42 AM

Why does it look 3d on your computer? can you make it normal so i can see the problem please.

bigcasey123

08-07-2012, 01:43 AM

Relative is mostly used to provide context for absolutely positioned elements within it. Occasionally it is used to move a (small) element slightly from its default position in the document flow.
But it seems to look normal, so can't i just keep using it or is it against a css rule? Also i see the problem and it's an easy fix thanks.

AndrewGSW

08-07-2012, 01:49 AM

But it seems to look normal. So can't i just keep using it or is it against a css rule?

It might look normal but then you encounter problems like the one you have raised. You could examine tempz proposal if you don't want to start over.

You don't have to start over if you don't want to - it was just a suggestion/ recommendation :thumbsup:

bigcasey123

08-07-2012, 01:52 AM

It might look normal but then you encounter problems like the one you have raised. You could examine tempz proposal if you don't want to start over.

You don't have to start over if you don't want to - it was just a suggestion/ recommendation :thumbsup:
Oh lol i thought i was gonna have to start over cause i thought it looked different on your resolution lol.

AndrewGSW

08-07-2012, 01:55 AM

Oh lol i thought i was gonna have to start over cause i thought it looked different on your resolution lol.

You could always supply your visitors with 3D glasses :eek:

bigcasey123

08-07-2012, 02:35 AM

You could always supply your visitors with 3D glasses :eek:

GREAT IDEA! lol