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 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2010
    Posts
    31
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Div Not Recognized

    Ok so i guess ill just let the coding speak for itself.
    The password div is not being recognized, can anyone help?
    I want the login to be in a straight line.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    	<title>Lito's page</title>
    	<meta http-equiv="Content-Language" content="en-us" />
    	
    	<meta http-equiv="imagetoolbar" content="no" />
    	<meta name="MSSmartTagsPreventParsing" content="true" />
    	
    	<meta name="description" content="Description" />
    	<meta name="keywords" content="Keywords" />
    	
    	<meta name="author" content="Enlighten Designs" />
    	
    	<style type="text/css" media="all">@import "css/master.css";</style>
    </head>
    <body>
    	<div id="bg">
    
    	<div id="login_bg">
    		<div id="username">
    			<input class="username" type="text" size="12" value="Username" />
    		</div>
    		<div id="password">
    			<input class="password" type="password" size="12" value="Password" />
    		</div>
    			<input class="submit" type="image" value="Go" src="L:\Lego\images\login\submit.png" />
    	</div>
    </div>
    </div>
    </body>
    </html>
    Code:
    html, body {
    	margin: 0;
    	padding: 0;
    }
    
    P {
    	font-family: Arial, Verdana, Helvetica;
    	color: #FFFFFF;
    	font-size: 12px;
    }
    
    #bg {
    	width: 100%;
    	background-image: url(../images/background/bg.png);
    	height: 791px;
    }
    
    #INPUT {
    	border-style:solid;
    	border-color: Gray;
    	border-width: 1px;
    	width: 200px;
    	padding: none;
    }
    
    #login_bg {
    	width: 514px;
    	background-image: url(../images/login/login_bg.png);
    	height: 122px;
    	float: right;
    }
    
    #username {
    	width: 125px;
    	margin-left: 75px;
    	margin-right: 0px;
    	margin-top: 20px;
    	margin-bottom: 0px;
    }
    
    	#username INPUT[type='text']
    		border-bottom: none;
    		border-left: none;
    		padding-bottom: 0px;
    		padding-left: 0px;
    		width: 5px;
    		padding-right: 0px;
    		background-image: url(../images/login/input_field.png);
    		height: 50px;
    		border-top: none;
    		border-right: none;
    		padding-top: 0px;
    	}
    
    .password {
    	float: right;
    	width: 50px;
    	margin-left: 80px;
    	margin-right: 0px;
    	margin-top: 20px;
    	margin-bottom: 0px;
    }
    
    	#password INPUT[type='text']
    		border-bottom: none;
    		border-left: none;
    		padding-bottom: 0px;
    		padding-left: 0px;
    		width: 5px;
    		padding-right: 0px;
    		background-image: url(../images/login/input_field.png);
    		height: 50px;
    		border-top: none;
    		border-right: none;
    		padding-top: 0px;
    	}	
    	
    .submit INPUT[type='submit']
    	border-bottom: none;
    	border-left: none;
    	padding-bottom: 0px;
    	padding-left: 0px;
    	width: 50px;
    	padding-right: 0px;
    	background: url(../images/login/submit.png);
    	height: 58px;
    	border-top: none;
    	border-right: none;
    	padding-top: 0px;
    }

  • #2
    Regular Coder ahayzen's Avatar
    Join Date
    Jun 2009
    Posts
    110
    Thanks
    8
    Thanked 11 Times in 11 Posts
    In your CSS

    Code:
    .password {
    	float: right;
    	width: 50px;
    	margin-left: 80px;
    	margin-right: 0px;
    	margin-top: 20px;
    	margin-bottom: 0px;
    }
    Should be

    Code:
    #password {
    	float: right;
    	width: 50px;
    	margin-left: 80px;
    	margin-right: 0px;
    	margin-top: 20px;
    	margin-bottom: 0px;
    }
    A dot is for classes and a hash is for ID's.

    Andy

  • #3
    New Coder
    Join Date
    Jan 2010
    Posts
    31
    Thanks
    2
    Thanked 0 Times in 0 Posts
    OK, i changed it but it's still not recognizing it.

  • #4
    New Coder
    Join Date
    Jan 2010
    Posts
    31
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Just Bumping...
    Still need help guys please.

  • #5
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    You were missing some opening brackets in your CSS declarations, but I don't think that was the issue. Is this what you are looking for? PS - I also cut down the clutter of your css code and utilized shorthand properties.

    Its not perfect, the submit button is overlapping the border of the password input, but its a start.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    	<title>Lito's page</title>
    	<meta http-equiv="Content-Language" content="en-us" />
    	
    	<meta http-equiv="imagetoolbar" content="no" />
    	<meta name="MSSmartTagsPreventParsing" content="true" />
    	
    	<meta name="description" content="Description" />
    	<meta name="keywords" content="Keywords" />
    	
    	<meta name="author" content="Enlighten Designs" />
        
        <style type="text/css" media="all">
        html, body {
    	margin: 0;
    	padding: 0;
    }
    
    p {
    	font-family: Arial, Verdana, Helvetica;
    	color: #FFFFFF;
    	font-size: 12px;
    }
    
    #bg {
    	width: 100%;
    	background-image: url(../images/background/bg.png);
    	height: 791px;
    }
    
    input {
    	border: 1px solid gray;
    	width: 200px;
    	padding: none;
    }
    
    #login_bg {
    	width: auto;
    	height: 122px;
    	background-image: url(../images/login/login_bg.png);
    	float: right;
    }
    
    #username {
    	float:left;
    	display:inline;
    	width: 125px;
    	margin: 20px 0 0 75px;
    }
    
    .username INPUT[type='text'] {
    		border: 0;
    		padding: 0;
    		width: 5px;
    		height: 50px;
    		background-image: url(../images/login/input_field.png);
    	}
    
    #password {
    	float:left;
    	display:inline;
    	width: 50px;
    	margin: 20px 0 0 80px;
    }
    
    .password INPUT[type='text'] {
    		border: 0;
    		padding: 0;
    		width: 5px;
    		height: 50px;
    		background-image: url(../images/login/input_field.png);
    	}	
    	
    #submit {
    	float:left;
    	display:inline;
    	width: 50px;
    	height:58px;
    	margin: 20px 0 0 80px;
    }
    	
    .submit INPUT[type='submit'] {
    	border: 0;
    	padding: 0;
    	width: 5px;
    	height: 58px;
    	background: url(../images/login/submit.png);
    }
    </style>
    </head>
    
    <body>
    	<div id="bg">
    
    	<div id="login_bg">
    		<div id="username"><input class="username" type="text" size="10" value="Username" /></div>
    		<div id="password"><input class="password" type="password" size="10" value="Password" /></div>
            <div id="submit"><input class="submit" type="image" value="Go" src="L:\Lego\images\login\submit.png" /></div>
        </div>
        
        </div>
    </body>
    </html>
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design


  •  

    Posting Permissions

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