Solved

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

Posted on 2012-12-23
3
254 Views
Last Modified: 2013-01-06
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
Comment
Question by:rgb192
3 Comments
 
LVL 4

Expert Comment

by:brendonfeeley
ID: 38717283
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
 
LVL 15

Accepted Solution

by:
StealthyDev earned 500 total points
ID: 38719747
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
 

Author Closing Comment

by:rgb192
ID: 38749369
thanks for great css
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now