• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 299
  • Last Modified:

Use only letters, numbers, and the underscore. Password must be between 4 and 20 characters long.

final picture

the code makes this



change the text to match the color of the final picture

want line
Use only letters, numbers, and the underscore. Password must be between 4 and 20 characters long.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style>
body {
  background:#111;
}
#form1 {
  padding:10px;
  width: 450px;
  margin:auto;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size:13px;
  color: #FFFFFF;
  /* Change #1 */
  background-color: #111;    /*text-align: center;*/   
}
#text-label {
    width: 240px;
    margin: auto;
    text-align: center;
    
    
}
#pass1, #pass2 {
    margin: auto;
    width: 440px;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    color: #FFFF00;
    background-color: #000000;
    padding-top:4px;
    padding-bottom:4px;
    margin-top:4px;
    margin-bottom:4px;
    border:none;
}
#submit1 {
    padding:5px; 
    display: block;
    margin-top: 6px;
    margin-right: auto;
    margin-left: auto;    
    font-size: 10px;        
    
}
.ctrText {
  text-align: center;
}
</style>

</head>


<body>

<form action="process.php" method="post" id="form1">
<div class="ctrText"><label for=pass1>Use this form to create new password for user: XXXX YYYYYYY:</label><br>
  Account corresponds to email d________.com
</div>
<label>New Password</label>
<input name="pass1" type="password" id="pass1" title="Use this form to create new password for user: XXXX YYYYYYY"  />
<label>Confirm Password</label>
<input name="pass2" type="password" id="pass2" title="Confirm password"  />     
<input id="submit1" type="submit" value="Generate new password" />    
</form>



</body>
</html>

Open in new window

0
rgb192
Asked:
rgb192
1 Solution
 
brendonfeeleyCommented:
Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style>
body {
  background:#111;
}
#form1 {
  padding:10px;
  width: 450px;
  margin:auto;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size:13px;
  color: #7d7d7d;
  /* Change #1 */
  background-color: #111;    /*text-align: center;*/   
}
#text-label {
    width: 240px;
    margin: auto;
    text-align: center;
    
    
}
#pass1, #pass2 {
    margin: auto;
    width: 440px;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    color: #FFFF00;
    background-color: #000000;
    padding-top:4px;
    padding-bottom:4px;
    margin-top:4px;
    margin-bottom:4px;
    border:none;
}
#submit1 {
    padding:5px; 
    display: block;
    margin-top: 6px;
    margin-right: auto;
    margin-left: auto;    
    font-size: 10px;        
    
}
.ctrText {
  text-align: center;
}
</style>

</head>


<body>

<form action="process.php" method="post" id="form1">
<div class="ctrText"><label for=pass1>Use this form to create new password for user: XXXX YYYYYYY:</label><br>
  Account corresponds to email d________.com
</div>
<label>New Password</label>
<input name="pass1" type="password" id="pass1" title="Use this form to create new password for user: XXXX YYYYYYY"  />
<label>Confirm Password</label>
<input name="pass2" type="password" id="pass2" title="Confirm password"  /><br/>
<div class="ctrText">Use only letters, numbers, and the underscore. Password must be between 4 and 20 characters long.</div>
<input id="submit1" type="submit" value="Generate new password" />    
</form>



</body>
</html>

Open in new window

0
 
StealthyDevCommented:
Hi,

I've altered some of your HTML code to match your final picture. Please find the code below.

Thanks,
Senthur

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style>
body {
	background: #111;
	color: #979797;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 13px;
}

#form1 {
	padding: 10px;
	width: 450px;
	margin: auto;
}

#text-label {
	width: 240px;
	margin: auto;
	text-align: center;
}

#pass1,#pass2 {
	margin: auto;
	width: 440px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #FFFF00;
	background-color: #000000;
	padding-top: 4px;
	padding-bottom: 4px;
	margin-top: 4px;
	margin-bottom: 4px;
	border: none;
}

#submit1 {
	padding: 5px;
	display: block;
	margin-top: 6px;
	margin-right: auto;
	margin-left: auto;
	font-size: 10px;
}

.ctrText {
	text-align: center;
}

.formContent {
	text-align: left;
}
</style>

</head>


<body>
	<div class="ctrText">
		<label for="pass1">Use this form to create new password for
			user: XXXX YYYYYYY:</label> <br /> <br> Account corresponds to email
			d________.com <br /> <br />
		<div class="formContent">
			<form action="process.php" method="post" id="form1">
				<label for="pass1">New Password</label> <input name="pass1"
					type="password" id="pass1"
					title="Use this form to create new password for user: XXXX YYYYYYY" />
				<label for="pass2">Confirm Password</label> <input name="pass2"
					type="password" id="pass2" title="Confirm password" />
				<div>Use only letters, numbers, and the underscore. Password
					must be between 4 and 20 characters long.</div>
				<br /> <input id="submit1" type="submit"
					value="Generate new password" />
			</form>
		</div>
	</div>
</body>
</html>

Open in new window

0
 
rgb192Author Commented:
thanks for great css
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Tackle projects and never again get stuck behind a technical roadblock.
Join Now