2 Replies - 15817 Views - Last Post: 05 August 2011 - 05:40 PM

#1 ravi951  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 29
  • Joined: 21-July 11

moving submit button position using html and css

Posted 03 August 2011 - 02:52 AM

hi all,
i have created one simple login form using html an css.in that login form how to change the position of the submit button to center, right and left.
presently it is left now....
where to change the position......
below is my html code..
<!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=utf-8" />
<title>Dynamic Inline Form Validation Demo</title>
<link rel="stylesheet" type="text/css" href="messages1.css" />
<script type="text/javascript" src="messages1.js"></script>
</head>
<body>
<div id="wrapper">
  <form name="form" id="form" class="form" action="success1.html" onsubmit="return validate(this)" method="post">
    <label for="name">User Name:</label>
    <input type="text" name="realname" id="name" />
	<span id="realnameerror"></span>
    
	<label for="email">Email Id:</label>
    <input type="text" name="email" id="email" />
	<span id="emailerror"></span>
    
	<label for="password">Password:</label>
    <input type="password" name="password" id="password" />
	<span id="passworderror"></span>
	
    <label for="repassword">Retype Password:</label>
    <input type="password" name="password2" id="password2" />
	<span id="password2error"></span>
	
	<label for="phoneno">Phone no:</label>
    <input type="text" name="phoneno" id="phoneno" />
	<span id="phonenoerror"></span>
	
	<input type="submit" value="Submit" class="submit" />
  </form>
</div>
</body>
</html>



below is the css for it.....
* 
{
 margin:0; 
 padding:0;
}

body 
{
  font:12px Verdana, Arial, Helvetica, sans-serif; 
  color:black;
}

#wrapper 
{
  width:700px; 
  margin:50px auto;
}

.form 
{
  float:left; 
  padding:10px 10px 10px 10px; 
  background:lightblue; 
  border:2px solid white;
}

.form label 
{
  float:left; 
  width:130px; 
  padding:10px 10px 0 0; 
  font-weight:bold;
  text-align:right;
  clear:left;
}

.form span
{
  float:left;
  margin-top:1em;
  margin-left:0.5em;
  color:red;
}

.form select 
{
  float:left; 
  width:146px; 
  margin-top:10px;
}

.form input 
{
  float:left; 
  margin-top:10px;
}

.form .submit 
{
  clear:both;
}

 #msg 
{
  display:none; 
  position:absolute; 
  z-index:200; 
  background:url(images/msg_arrow.gif) left center no-repeat; 
  padding-left:7px;
}
#msgcontent 
{
  display:block; 
  background:yellow; 
  border:2px solid orange; 
  border-left:none; 
  padding:5px; 
  min-width:150px; 
  max-width:250px;
}




Is This A Good Question/Topic? 0
  • +

Replies To: moving submit button position using html and css

#2 codexacc  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 29-July 11

Re: moving submit button position using html and css

Posted 04 August 2011 - 05:16 AM

You can style the Class of 'Submit' in your stylesheet:
.form .submit
{
clear:both;
}

Was This Post Helpful? 0
  • +
  • -

#3 singularity  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 17
  • View blog
  • Posts: 184
  • Joined: 17-October 08

Re: moving submit button position using html and css

Posted 05 August 2011 - 05:40 PM

View Postravi951, on 03 August 2011 - 09:52 AM, said:

hi all,
i have created one simple login form using html an css.in that login form how to change the position of the submit button to center, right and left.
presently it is left now....
where to change the position......
below is my html code..
<!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=utf-8" />
<title>Dynamic Inline Form Validation Demo</title>
<link rel="stylesheet" type="text/css" href="messages1.css" />
<script type="text/javascript" src="messages1.js"></script>
</head>
<body>
<div id="wrapper">
  <form name="form" id="form" class="form" action="success1.html" onsubmit="return validate(this)" method="post">
    <label for="name">User Name:</label>
    <input type="text" name="realname" id="name" />
	<span id="realnameerror"></span>
    
	<label for="email">Email Id:</label>
    <input type="text" name="email" id="email" />
	<span id="emailerror"></span>
    
	<label for="password">Password:</label>
    <input type="password" name="password" id="password" />
	<span id="passworderror"></span>
	
    <label for="repassword">Retype Password:</label>
    <input type="password" name="password2" id="password2" />
	<span id="password2error"></span>
	
	<label for="phoneno">Phone no:</label>
    <input type="text" name="phoneno" id="phoneno" />
	<span id="phonenoerror"></span>
	
	<input type="submit" value="Submit" class="submit" />
  </form>
</div>
</body>
</html>



below is the css for it.....
* 
{
 margin:0; 
 padding:0;
}

body 
{
  font:12px Verdana, Arial, Helvetica, sans-serif; 
  color:black;
}

#wrapper 
{
  width:700px; 
  margin:50px auto;
}

.form 
{
  float:left; 
  padding:10px 10px 10px 10px; 
  background:lightblue; 
  border:2px solid white;
}

.form label 
{
  float:left; 
  width:130px; 
  padding:10px 10px 0 0; 
  font-weight:bold;
  text-align:right;
  clear:left;
}

.form span
{
  float:left;
  margin-top:1em;
  margin-left:0.5em;
  color:red;
}

.form select 
{
  float:left; 
  width:146px; 
  margin-top:10px;
}

.form input 
{
  float:left; 
  margin-top:10px;
}

.form .submit 
{
  clear:both;
}

 #msg 
{
  display:none; 
  position:absolute; 
  z-index:200; 
  background:url(images/msg_arrow.gif) left center no-repeat; 
  padding-left:7px;
}
#msgcontent 
{
  display:block; 
  background:yellow; 
  border:2px solid orange; 
  border-left:none; 
  padding:5px; 
  min-width:150px; 
  max-width:250px;
}



Add position relative and left 130px to submit like below:
.form .submit
{
clear:both;position:relative;left:130px;
}
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1