.login-page {
width: 360px;
padding: 10% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background-color: black;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
}
.form input {
outline: none;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
text-transform: capitalize;
outline: 0;
background: orange;
width: 100%;
border: none;
padding: 15px;
font-size: 14px;
color: white;
cursor: pointer;
}
.form button:hover,
.form button:active {
background: green;
border: none;
}
.form .zaten {
margin: 15px 0 0;
color: white;
font-size: 12px;
}
.form .zaten a {
color: orange;
text-decoration: none;
}
.register-form {
display: none;
}
<body>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="Name Surname">
<input type="password" placeholder="Password">
<input type="email" placeholder="Email">
<input type="tel-no" placeholder="Telephone Number">
<button type="button">Register</button>
<p class="zaten"> Already have a account? <a href="#"> Login </p>
</form>
<form class="login-form">
<input type="text" placeholder="Email or Phone Number">
<input type="password" placeholder="Password">
<button type="button">Login</button>
<p class="zaten"> Not registered yet? <a href="#"> Register </p>
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$('.zaten a').click(function()
{
$('form').animate({height:"toggle",opacity:"toggle"}, "slow");
});
</script>
</body>
When I look at how my site looks, I saw <p class="zaten"> Not registered yet? <a href="#"> Register </p> place as whole clickable orange text. How can I change the color and make it text, not link.
If you have difficulty understanding pardon me, English is not my native language. If you need more informaiton, ask freely.
"</a>"missing closing tag...
<p class="zaten"> Not registered yet? Register </p>
$('.zaten a').click(function()
{
$('form').animate({height:"toggle",opacity:"toggle"}, "slow");
});
.login-page {
width:360px;
padding: 10% 0 0;
margin: auto;} .form {
position:relative;
z-index: 1;
background-color:black;
max-width: 360px;
margin: 0 auto 100px;
padding:45px;
text-align:center;} .form input {
outline:none;
background:#f2f2f2;
width:100%;
border: 0;
margin: 0 0 15px;
padding:15px;
box-sizing: border-box;
font-size:14px;} .form button {
text-transform: capitalize;
outline: 0;
background: orange;
width: 100%;
border: none;
padding: 15px;
font-size: 14px;
color:white;
cursor: pointer;} .form button:hover,.form button:active {
background: green;
border:none;} .form .zaten {
margin:15px 0 0;
color:white;
font-size:12px;} .form .zaten a {
color: orange;
text-decoration: none;} .register-form {display:none;}
<body>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="Name Surname">
<input type="password" placeholder="Password">
<input type="email" placeholder="Email">
<input type="tel-no" placeholder="Telephone Number">
<button type="button">Register</button>
<p class="zaten"> Already have a account? Login </p>
</form>
<form class="login-form">
<input type="text" placeholder="Email or Phone Number">
<input type="password" placeholder="Password">
<button type="button">Login</button>
<p class="zaten"> Not registered yet? Register </p>
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
I have noticed that you have forgotten to close a tag and that lead to unexcpted
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="Name Surname">
<input type="password" placeholder="Password">
<input type="email" placeholder="Email">
<input type="tel-no" placeholder="Telephone Number">
<button type="button">Register</button>
<p class="zaten"> Already have a account? Login </p>
</form>
<form class="login-form">
<input type="text" placeholder="Email or Phone Number">
<input type="password" placeholder="Password">
<button type="button">Login</button>
<p class="zaten"> Not registered yet? Register </p>
</form>
</div>
</div>
Related
I am doing a vue project,but I want to create a form to log in and put an image behind the form.
I tried, but when I put the image behind the form, it did not appear on the page.
What should I do to add a picture behind the form?
Html:Here in this section I wrote HTML code.
<template>
<div>
<div class="signup-form">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<title>Bootstrap Simple Login Form with Blue Background</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form action="/examples/actions/confirmation.php" method="post">
<h2>Sign Up</h2>
<p>Please fill in this form to create an account!</p>
<hr>
<div class="form-group">
<div class="row">
<div class="col-xs-6"><input type="text" class="form-control" name="first_name"
placeholder="First Name" required="required"></div>
<div class="col-xs-6"><input type="text" class="form-control" name="last_name"
placeholder="Last Name" required="required"></div>
</div>
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" placeholder="Email"
required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password" `
required="required">`
</div>
<div class="form-group">
<input type="password" class="form-control" name="confirm_password" placeholder="Confirm
Password" required="required">
</div>
<div class="form-group">
<label class="checkbox-inline"><input type="checkbox" required="required"> I accept the
Terms of Use & Privacy Policy</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg">Sign Up</button>
</div>
</form>
<div class="hint-text">Already have an account? Login here</div>
</div> </div>
</template>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
export default {
data: {
counter: 0
}
};
</script>
Css:Here in this section i wrote Css Code.
<style scoped>
body {
color: #fff;
background: #3598dc;
font-family: 'Roboto', sans-serif;
}
.form-control{
height: 41px;
background: #f2f2f2;
box-shadow: none !important;
border: none;
}
.form-control:focus{
background: #e2e2e2;
}
.form-control, .btn{
border-radius: 3px;
}
.signup-form{
width: 390px;
margin: 30px auto;
}
.signup-form form{
color: #999;
border-radius: 3px;
margin-bottom: 15px;
background: #fff;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form h2 {
color: #333;
font-weight: bold;
margin-top: 0;
}
.signup-form hr {
margin: 0 -30px 20px;
}
.signup-form .form-group{
margin-bottom: 20px;
}
.signup-form input[type="checkbox"]{
margin-top: 3px;
}
.signup-form .row div:first-child{
padding-right: 10px;
}
.signup-form .row div:last-child{
padding-left: 10px;
}
.signup-form .btn{
font-size: 16px;
font-weight: bold;
background: #3598dc;
border: none;
min-width: 140px;
}
.signup-form .btn:hover, .signup-form .btn:focus{
background: #2389cd !important;
outline: none;
}
.signup-form a{
color: #fff;
text-decoration: underline;
}
.signup-form a:hover{
text-decoration: none;
}
.signup-form form a{
color: #3598dc;
text-decoration: none;
}
.signup-form form a:hover{
text-decoration: underline;
}
.signup-form .hint-text {
padding-bottom: 15px;
text-align: center;
}</style>
You can use CSS' position property to stack an element on top of another. Here is an example.
/** GENERAL STYLES **/
* {
box-sizing: border-box;
}
form {
width: 300px;
margin: 1em auto;
border: 1px solid #eee;
}
form .form-group label,
form .form-group input {
width: 100%;
}
form h2 {
margin: 0 0 1em;
}
/** THE FIXES **/
.relative {
position: relative;
}
form .form-content {
padding: 1em;
position: relative;
}
form .behind-form {
position: absolute;
bottom: 0;
width: 100%;
}
form .behind-form img {
width: 100%;
display: block;
}
<form class="relative">
<div class="behind-form">
<img src="https://pixabay.com/get/52e8d3454e56a914f1dc8460da29317e173edce7545972_640.jpg" />
</div>
<div class="form-content">
<h2>Sign Up</h2>
<p>Please fill in this form to create an account!</p>
<div class="form-group">
<label>Name</label>
<input type="text" />
</div>
<div class="form-group">
<label>Email</label>
<input type="text" />
</div>
</div>
</form>
I am very new to css and html, and can't seem to find a common sense way to group these elements together so I can put two clusters of forms and headers on the same line. I am trying to implement responsive design with an emphasis on mobile first. Ideally, I would love to have these two clusters of forms centered on the same line with a nice big hyphen in between them.
I have already tried div-ing the start and end times and floating them left and right, but the spacing is wonky. The end top and bottom header line up, while the forms oddly move outside to the right.
h2 {
border-bottom: 2px solid #ccc;
padding-bottom: 5px;
text-align: left;
color: gray;
font-size: 16px;
font-weight: normal;
width: 131px;
}
.min, .sec, .hour {
width: 33px;
box-sizing: border-box;
border: 0 solid #ccc;
font-size: 16px;
margin: 0;
padding: 0;
background: white;
display: inline-block;
}
h3{
border-top: 2px solid #ccc;
width: 131px;
}
*:focus {
outline: 0;
box-shadow: none;
}
#start {
float: left;
}
#end {
float: right;
margin: 0;
}
<div id="start" align="middle">
<h2 class="start-time">start</h2>
<div class="time">
<form class="hour">
<input type="text" size="3" maxlength="3" placeholder="hr">
</form>
:
<form class="min">
<input type="text" size="3" maxlength="2" placeholder="min">
</form>
:
<form class="sec">
<input type="text" size="3" maxlength="2" placeholder="sec">
</form>
</div>
<h3></h3>
</div>
<div id="stop" align="middle">
<h2 class="end-time">end</h2>
<div class="time">
<form class="hour">
<input type="text" size="3" maxlength="3" placeholder="hr">
</form>
:
<form class="min">
<input type="text" size="3" maxlength="2" placeholder="min">
</form>
:
<form class="sec">
<input type="text" size="3" maxlength="2" placeholder="sec">
</form>
</div>
<h3></h3>
</div>
Please check Alex, I think this might help.
You just need to add both the divs in a single div and apply display:flex; Hope this will help.
h2 {
border-bottom: 2px solid #ccc;
padding-bottom: 5px;
text-align: left;
color: gray;
font-size: 16px;
font-weight: normal;
width: 131px;
}
.min, .sec, .hour {
width: 33px;
box-sizing: border-box;
border: 0 solid #ccc;
font-size: 16px;
margin: 0;
padding: 0;
background: white;
display: inline-block;
}
h3{
border-top: 2px solid #ccc;
width: 131px;
}
*:focus {
outline: 0;
box-shadow: none;
}
#start,
#stop{
float: left;
width: 50%;
}
.wrap {
display: flex;
width: 100%;
}
<div class="wrap">
<div id="start" align="middle">
<h2 class="start-time">start</h2>
<div class="time">
<form class="hour">
<input type="text" size="3" maxlength="3" placeholder="hr">
</form>
:
<form class="min">
<input type="text" size="3" maxlength="2" placeholder="min">
</form>
:
<form class="sec">
<input type="text" size="3" maxlength="2" placeholder="sec">
</form>
</div>
<h3></h3>
</div>
<div id="stop" align="middle">
<h2 class="end-time">end</h2>
<div class="time">
<form class="hour">
<input type="text" size="3" maxlength="3" placeholder="hr">
</form>
:
<form class="min">
<input type="text" size="3" maxlength="2" placeholder="min">
</form>
:
<form class="sec">
<input type="text" size="3" maxlength="2" placeholder="sec">
</form>
</div>
<h3></h3>
</div>
</div>
Update: I just noticed that you wrapped each of your input elements in a form. Not sure if this is intentional but that shouldn't be the case. You can wrap all of your input elements - start and end included - in one form tag. That would be a well written HTML.
Flex it. Here is a fiddle: http://jsfiddle.net/ydcgpem2/
<div class="time-container">
<div id="start" align="middle">
<h2 class="start-time">start</h2>
<div class="time">
<form class="hour">
<input type="text" size="3" maxlength="3" placeholder="hr">
</form>
:
<form class="min">
<input type="text" size="3" maxlength="2" placeholder="min">
</form>
:
<form class="sec">
<input type="text" size="3" maxlength="2" placeholder="sec">
</form>
</div>
<h3></h3>
</div>
<div class="hyphen">-</div>
<div id="stop" align="middle">
<h2 class="end-time">end</h2>
<div class="time">
<form class="hour">
<input type="text" size="3" maxlength="3" placeholder="hr">
</form>
:
<form class="min">
<input type="text" size="3" maxlength="2" placeholder="min">
</form>
:
<form class="sec">
<input type="text" size="3" maxlength="2" placeholder="sec">
</form>
</div>
<h3></h3>
</div>
</div>
CSS:
.time-container{
display: flex;
align-content: middle;
}
.hyphen{
align-self: center;
margin: 0 20px;
}
h2 {
border-bottom: 2px solid #ccc;
padding-bottom: 5px;
text-align: left;
color: gray;
font-size: 16px;
font-weight: normal;
width: 131px;
}
.min, .sec, .hour {
width: 33px;
box-sizing: border-box;
border: 0 solid #ccc;
font-size: 16px;
margin: 0;
padding: 0;
background: white;
display: inline-block;
}
h3{
border-top: 2px solid #ccc;
width: 131px;
}
*:focus {
outline: 0;
box-shadow: none;
}
I am currently working on creating a sign up form html/css. I realised that different browsers work differently on the width of inputs. How can i rectify this issue and make sure that my sign up form is compatible with all browsers. My sign up form works perfectly for chrome as it is where i do coding on.
ul {
background-color: #000000;
}
li a:hover {
background-color: #0cf72a;
}
.word-container {
width: 500px;
height: 50px;
margin: auto;
position: relative;
top: 80px;
}
.word-container h1 {
margin: 0;
text-align: center;
color: #ab0a0a;
}
.register-container {
width: 600px;
height: 350px;
margin: auto;
position: relative;
top: 100px;
border: 1px solid #000;
}
.fname input[type="text"] {
position: relative;
left: 115px;
top: 30px;
padding: 8px;
}
.lname input[type="text"] {
position: relative;
left: 314px;
top: -5.5px;
padding: 8px;
}
.userid input[type="text"] {
position: relative;
left: 115px;
padding: 8px;
top: 10px;
}
.pwd input[type="password"] {
position: relative;
padding: 8px;
left: 115px;
top: 25px;
}
.email input[type="email"] {
position: relative;
padding: 8px;
left: 115px;
top: 40px;
}
.btn button[type="submit"] {
position: relative;
left: 115px;
top: 55px;
padding: 8px;
width: 382px;
border: 1px solid #000000;
color: #ffffff;
background-color: #ab0a0a;
}
div.btn button[type="submit"]:hover {
background-color: rgb(255, 0, 0);
}
<div class="word-container">
<h1>Create your account</h1>
</div>
<div class="register-container">
<form action="" method="POST">
<div class="fname">
<label>
<input type="text" placeholder="First Name" name="fname" size="20">
</label>
</div>
<div class="lname">
<label>
<input type="text" placeholder="Last Name" name="lname" size="20">
</label>
</div>
<div class="userid">
<label>
<input type="text" placeholder="Username" name="userid" size="50">
</label>
</div>
<div class="pwd">
<label>
<input type="password" placeholder="Password" name="pwd" size="50">
</label>
</div>
<div class="email">
<label>
<input type="email" placeholder="Email Address" name="email" size="50">
</label>
</div>
<div class="btn">
<button type="submit">Create Account</button>
</div>
</form>
</div>
It's always a good idea to use something like normalize.css or any other CSS reset code (eric meyer css reset is very popular too) to reset CSS across all browsers.
Any browser come with it's defaults values for padding's,margins,widths, heights etc...
I guess it won't be an 100% solution but it will defiantly will take you closer to what you're looking for.
Do not jump to position relative and absolute. If you are new to all this, I can understand it seems the most natural way to go about positioning elements; just using a top and left position and that's that. But this is not how you should do it on the web!
Below you can find how I would do it.
Matan G. is right in pointing out that a CSS reset/normalize is often used, and I do so myself as well. However, before you do that (and considering you're new) it would be wise to take a look at the code that I posted and see if it makes any sense to you. If not, ask.
It is important to note that you should avoid these things when possible:
setting a fixed width to text items such as headings, paragraphs, lists.
using relative/absolute positioning. They are very useful but only when necessary.
using too many divs/classes than actually needed. Don't overcrowd your HTML.
* {box-sizing: border-box;}
ul {
background-color: #000000;
}
li a:hover {
background-color: #0cf72a;
}
.word-container {
width: 500px;
height: 50px;
margin: 80px auto auto;
}
.word-container h1 {
margin: 0;
text-align: center;
color: #ab0a0a;
}
.register-container {
width: 600px;
margin: 20px auto auto;
border: 1px solid #000;
padding: 20px;
}
label {
display: block;
}
.name::after {
content: "";
display: table;
clear: both;
}
.name label:first-child {
margin-right: 20px;
}
.name label {
width: calc(100% / 2 - 10px);
float: left;
}
input, [type="submit"] {
padding: 8px;
margin-bottom: 20px;
width: 100%;
}
[type="submit"] {
border: 1px solid #000000;
color: #ffffff;
background-color: #ab0a0a;
margin: 0;
}
[type="submit"]:hover {
background-color: red;
}
<div class="word-container">
<h1>Create your account</h1>
</div>
<div class="register-container">
<form action="" method="POST">
<div class="name">
<label>
<input type="text" placeholder="First Name" name="fname">
</label>
<label>
<input type="text" placeholder="Last Name" name="lname">
</label>
</div>
<label>
<input type="text" placeholder="Username" name="userid">
</label>
<label>
<input type="password" placeholder="Password" name="pwd">
</label>
<label>
<input type="email" placeholder="Email Address" name="email">
</label>
<button type="submit">Create Account</button>
</form>
</div>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Forms</title>
<style>
.container{
width: 45%;
margin: auto;
}
.form-content{
margin: 40px;
}
.form-content input{
width: 100%;
}
label{
font-weight: bold;
}
input[type=text],[type=email],[type=tel],[type=date],[type=password]{
font-size: 16px;
border-radius: 5px;
background: #D9F1F7;
border: #000000;
padding: 10px;
}
input[type=submit]{
background: #4C63ED;
padding: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
color: #fff;
cursor: pointer;
}
input[type=submit]:hover{
background: #330EEF;
font-weight: bold;
}
</style>
</head>
<body>
<div class = "container">
<form name="signup" method="get" action="">
<div class="form-content">
<label>First Name : </label>
<input type="text" name="firstname" />
</div>
<div class="form-content">
<label>Last Name : </label>
<input type="text" name="lastname" />
</div>
<div class="form-content">
<label>E-Mail : </label>
<input type="email" name="email" />
</div>
<div class="form-content">
<label>Telephone : </label>
<input type="tel" name="telephone" />
</div>
<div class="form-content">
<label>Date of Birth : </label>
<input type="date" name="dob" />
</div>
<div class="form-content">
<input type="submit" name="submit" value="Submit" />
</div>
</form>
</div>
</body>
</html>
I'm having trouble to move text inside input. If i add margins or paddings it moves or scales the input. I want to move "Username" 10px away from left side.
.log_inp input[type="username"] {
top: 80px;
height: 28px;
width: 234px;
border: solid 1px #e4e4e4;
font-family: OpenSans-Italic;
color: #9a9a9a;
font-size: 13px;
}
input {
padding: 0px;
}
<div class="log_inp">
<form action="#">
<input type="username" name="Username" placeholder="Vārds...">
<br>
<input type="password" name="Password" placeholder="Parole...">
<br>
<input type="submit" value="Ienākt">
</form>
</div>
If you want to only move the placeholders over, use vendor prefix CSS properties:
::-webkit-input-placeholder {
padding-left: 10px;
}
::-moz-placeholder {
padding-left: 10px;
}
:-ms-input-placeholder {
padding-left: 10px;
}
<div class="log_inp">
<form action="#">
<input type="username" name="Username" placeholder="Vārds...">
<br>
<input type="password" name="Password" placeholder="Parole...">
<br>
<input type="submit" value="Ienākt">
</form>
</div>
If you want to change the padding and not have it influence the total size of the input, set box-sizing to border-box.
In the following example, the two inputs are the same size, but I have given the username one a left padding.
.log_inp input {
top: 80px;
height: 28px;
width: 234px;
border: solid 1px #e4e4e4;
font-family: OpenSans-Italic;
color: #9a9a9a;
font-size: 13px;
padding: 0px;
box-sizing: border-box;
}
input[type="username"] {
padding-left:10px;
}
<div class="log_inp">
<form action="#">
<input type="username" name="Username" placeholder="Vārds...">
<br>
<input type="password" name="Password" placeholder="Parole...">
<br>
<input type="submit" value="Ienākt">
</form>
</div>
.log_inp input[type="username"] {
height: 28px;
width: 234px;
border: solid 1px #e4e4e4;
font-family: OpenSans-Italic;
color: #9a9a9a;
font-size: 13px;
padding-left:10px;
}
input {
padding: 0px;
}
<div class="log_inp">
<form action="#">
<input type="username" name="Username" placeholder="Vārds...">
<br>
<input type="password" name="Password" placeholder="Parole...">
<br>
<input type="submit" value="Ienākt">
</form>
</div>
With accepted answer cursor position of input is not modified.
You can move placeholder text of your input along with its cursor position via
input {
text-indent: 10px;
}
https://www.w3schools.com/csSref/pr_text_text-indent.asp
Check it out it might be helps u
input{
text-align:center;
}
I have the home.html page where I have a menu. On clicking the link I want the addnew.html page to load into the part of the code. I get the page but it is shown in an small section.....
Home.html
<!DOCTYPE html>
<head>
<title>Contact Manager</title>
<link rel="stylesheet" type="text/css" href="Style1.css" />
<script>
function Load_addnew()
{
document.getElementById("load_here").innerHTML='<object type="text/html" data="Addnew.html"></object>'
}
</script>
</head>
<body>
<div id="main">
<div id="logo">
<h1><center>Contact Manager</center></h1>
</div>
<div id="menu">
<ul>
<li>ADD NEW CONTACT</li>
<li>EDIT A CONTACT</li>
<li>DELETE CONTACT</li>
<li>SEARCH CONTACTS</li>
<li>LIST OF CONTACTS</li>
</div>
<div id="load_here"></div>
</div>
</body>
</html>
Style1.css
#main
{
background-repeat: repeat;
}
#logo a, #menu a
{
text-decoration: none;
}
#menu ul
{
line-height: 1.5em;
font-size: x-large;
float: left;
list-style: none;
}
#load_here
{
}
#logo
{
background-color:
}
#menu
{
margin: 0px auto;
left: 0px;
right: 0px;
}
AddNew.html
<!DOCTYPE HTML>
<html>
<head>
<title>Add Contact</title>
<link rel="stylesheet" type="text/css" href="addnew.css"></link>
</head>
<body>
<div id="main">
<ul id="errors">
<li id="info">Please recheck your form and Submit again: </li>
</ul>
<p id="success">Details Saved Successfully!!</p>
<div id="form1">
<form action="" method="" id="add_new">
<label for="Fname">First Name <span class="required">*</span>:</label>
<input type="text" id="First_Name" name="FirstName" value="" pattern="[A-Z a-z]" required="required" autofocus="autofocus"/>
<label for="Mname">Middle Name :</label>
<input type="text" id="Middle_Name" name="MiddleName" pattern="[A-Z a-z]" value=""/>
<label for="Lname">Last Name <span class="required">*</span>:</label>
<input type="text" id="Last_Name" name="LastName" value="" pattern="[A-Z a-z]" required="required"/>
<label for="dob">Date of Birth <span class="required">*</span>:</label>
<input type="date" id="DOB" name="dob" value="" required="required"/>
<label for="Phone1">Phone 1 <span class="required">*</span>:</label>
<input type="text" id="contactHome" name="Phone1" value="" required="required"/>
<label for="Phone2">Phone 2:</label>
<input type="text" id="contactOffice" name="Phone2" value=""/>
<label for="email">Email <span class="required">*</span>:</label>
<input type="email" id="email" name="Email" value="" placeholder="username#example.com" required="required"/>
<label for="Address">Address Line 1 <span class="required">*</span>:</label>
<input type="text" id="address" name="Address" required="required"/>
<label for="Address">Address Line 2:</label>
<input type="text" id="address1" name="Address1"/>
<label for="city">City <span class="required">*</span>:</label>
<input id="city" name="City" required="required" value=""/>
<label for="state">State <span class="required">*</span>:</label>
<input id="state" name="State" required="required" value=""/>
<label for="country">Country<span class="required">*</span>:</label>
<input id="country" name="Country" required="required" value=""/>
<label for="zip">PIN<span class="required">*</span>:</label>
<input id="zip" name="Zip" required="required" value=""/>
<input type="Submit" value="Submit" id="submit-button"/>
<input type="Reset" value="Reset" id="reset_button"/>
<p id="required-desc"><span class="required">*</span> indicates a required field</p>
</form>
</div>
</div>
</body>
</html>
addnew.css
#main
{
width: 465px;
padding: 20px;
margin: 0px auto;
border: 6px solid #8fb5c1;
border-radius: 15px;
position: absolute;
background-repeat: repeat;
left: 0px;
right: 0px;
}
#main input, #main select, #main textarea, #main label
{
font-size: 15px;
margin-bottom: 2px;
}
#main input, #main select, #main textarea
{
width: 450px;
border: 1px solid #cee1e8;
margin-bottom: 20px;
padding: 4px;
}
#main input:focus, #main select:focus, #main textarea:focus
{
border: 1px solid #afcdd8;
background-color: #ebf2f4;
}
#main textarea
{
height: 80px;
resize: none;
}
#main label
{
display: block;
}
#main .required
{
font-weight: bold;
color: #f00;
}
#main #submit-button, #main #reset_button
{
width: 100px;
background-color:#333;
color:#FFF;
border:none;
display:block;
float:right;
margin-bottom:0px;
margin-right:6px;
background-color:#8FB5C1;
}
#main #submit-button:hover, #main #reset_button :hover
{
background-color: #A6CFDD;
}
#main #submit-button:active, #main #reset_button:active
{
position:relative;
top:1px;
}
#main #loading
{
width:32px;
height:32px;
display:block;
position:absolute;
right:130px;
bottom:16px;
display:none;
}
#errors
{
border: solid 1px #e58e8e;
padding: 10px;
margin: block;
width: 437px;
border-radius: 8px;
background: #ffe6e6 no-repeat 405px center;
display: none;
}
#errors li
{
padding: 2px;
list-style: none;
}
#errors li:before
{
content: '-';
}
#errors #info
{
font-weight: bold;
}
#errors #info:before
{
content: '';
}
#success
{
border: solid 1px #83d186;
padding: 25px 10px;
margin: 25px 0px;
display: block;
width: 437px;
border-radius: 8px;
background: #d3edd3 no-repeat 405px center;
font-weight: bold;
display: none;
}
#errors.visible, #success.visible
{
display: block;
}
#form1 #req-field-desc
{
font-style: italic;
}
Easy enough if you set a width and height.
#load_here object
{
width: 100%;
height: 500px;
}
The problem you'll run into is that there is proportional sizing for this. You'd have to specify both a width and a height, or it will default width: 300px; and height: 150px;. So, if you set width: 100%; but don't set height, it'll render the height at 150px, and vice versa.
I hope this helps. ^^