Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    96
    Thanks
    1
    Thanked 5 Times in 4 Posts

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

    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
    Code:
    <!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

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

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    CSS:

    Code:
    #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

    Code:
    <img src="images/loginbutton.png">
    This should leave it clickable!!

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    Attached Thumbnails Attached Thumbnails Register link no longer clickable when i put it near my login link.-image-2.jpg  
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #4
    New Coder
    Join Date
    Feb 2012
    Posts
    96
    Thanks
    1
    Thanked 5 Times in 4 Posts
    dang i thought relative made everything look the same on all resolutions

  • #5
    New Coder
    Join Date
    Feb 2012
    Posts
    96
    Thanks
    1
    Thanked 5 Times in 4 Posts
    Quote Originally Posted by AndrewGSW View Post
    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.
    Why does it look 3d on your computer? can you make it normal so i can see the problem please.

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by bigcasey123 View Post
    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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    Why does it look 3d on your computer? can you make it normal so i can see the problem please.
    Attached Thumbnails Attached Thumbnails Register link no longer clickable when i put it near my login link.-image-6.jpg  
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #8
    New Coder
    Join Date
    Feb 2012
    Posts
    96
    Thanks
    1
    Thanked 5 Times in 4 Posts
    Quote Originally Posted by AndrewGSW View Post
    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.
    Last edited by bigcasey123; 08-07-2012 at 01:46 AM.

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by bigcasey123 View Post
    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
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #10
    New Coder
    Join Date
    Feb 2012
    Posts
    96
    Thanks
    1
    Thanked 5 Times in 4 Posts
    Quote Originally Posted by AndrewGSW View Post
    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
    Oh lol i thought i was gonna have to start over cause i thought it looked different on your resolution lol.

  • #11
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by bigcasey123 View Post
    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
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #12
    New Coder
    Join Date
    Feb 2012
    Posts
    96
    Thanks
    1
    Thanked 5 Times in 4 Posts
    Quote Originally Posted by AndrewGSW View Post
    You could always supply your visitors with 3D glasses
    GREAT IDEA! lol


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •