Div Not Recognized

litoburrito · 05-27-2010, 06:23 AM

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

ahayzen · 05-27-2010, 11:07 AM

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

litoburrito · 05-27-2010, 07:48 PM

OK, i changed it but it's still not recognizing it.

litoburrito · 06-03-2010, 04:47 PM

Just Bumping...
Still need help guys please.

optimus203 · 06-03-2010, 05:21 PM

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>