I am designing a html form using JSP. Below is my css file-
body {
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial,
Helvetica, sans-serif;
font-size: 12px;
}
p,h1,form,button {
border: 0;
margin: 0;
padding: 0;
}
.spacer {
clear: both;
height: 1px;
}
/* ----------- My Form ----------- */
.myform {
margin: 0 auto;
width: 400px;
padding: 14px;
}
/* ----------- stylized ----------- */
#stylized {
border: solid 2px #b7ddf2;
background: #ebf4fb;
}
#stylized h1 {
font-size: 14px;
font-weight: bold;
margin-bottom: 8px;
}
#stylized p {
font-size: 11px;
color: #666666;
margin-bottom: 20px;
border-bottom: solid 1px #b7ddf2;
padding-bottom: 10px;
}
#stylized label {
display: block;
font-weight: bold;
text-align: right;
width: 140px;
float: left;
}
#stylized .small {
color: #666666;
display: block;
font-size: 11px;
font-weight: normal;
text-align: right;
width: 140px;
}
#stylized input {
float: left;
font-size: 12px;
padding: 4px 2px;
border: solid 1px #aacfe4;
width: 200px;
margin: 2px 0 20px 10px;
height: 30px;
}
#stylized checkbox {
float: left;
font-size: 12px;
padding: 4px 2px;
border: solid 1px #aacfe4;
width: 10px;
margin: 2px 0 20px 10px;
}
#stylized select {
float: left;
font-size: 12px;
padding: 4px 2px;
border: solid 1px #aacfe4;
width: 250px;
margin: 2px 0 20px 10px;
height: 100px;
}
#stylized button {
clear: both;
margin-left: 150px;
width: 125px;
height: 31px;
background: #666666 url(img/button.png) no-repeat;
text-align: center;
line-height: 31px;
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
}
Below is the form that I am building using JSP.
<div id="stylized" class="myform">
<form:form id="form" name="form" method="POST" action="/showResponse">
<h1>Service call Form</h1>
<p></p>
<form:label path="userId">User Id
<span class="small">Enter User Id</span>
</form:label>
<form:input name="name" id="name" path="userId" />
<form:label path="debugFlag">Debug Flag :
<span class="small">Select Debug Flag</span>
</form:label>
<form:checkbox path="debugFlag" name="name" id="name" />
<form:label path="attributeNames">Attribute Names :
<span class="small">Select Attribute Names</span>
</form:label>
<form:select path="attributeNames" items="${attributeNamesList}"
multiple="true" name="name" id="name" />
<form:label path="machineName">Machine Name
<span class="small">Enter Machine Name</span>
</form:label>
<form:input name="name" id="name" path="machineName" />
<form:label path="portNumber">Port Number
<span class="small">Enter Port Number</span>
</form:label>
<form:input path="portNumber" name="name" id="name" />
<button type="submit">Submit</button>
<div class="spacer"></div>
</form:form>
</div>
The only problem that I am facing is, it's not aligned properly with it's label and corresponding input. Below is the screenshot-
Only user id and debug flag are assigned properly. Other than that, it's messed up somehow. Can anyone tell me what wrong I have done in CSS?
Actual HTML Code after doing view page source-
<html>
<head><link href="/ressvr/z/u4/apo4x4yiqe23jo4erdz5ig4tm.css?dataUri=true" type="text/css" rel="stylesheet"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="layout" content="main" />
<title>Sample App</title>
</head><body><div id="stylized" class="myform">
<form id="form" name="form" action="/showResponse" method="POST"><h1>Service call Form</h1>
<p></p>
<label for="userId">User Id
<span class="small">Enter User Id</span>
</label><input id="name" name="userId" name="name" type="text" value=""/><div class="spacer"></div>
<label for="debugFlag">Debug Flag
<span class="small">Select Debug Flag</span>
</label><input id="name" name="debugFlag" name="name" type="checkbox" value="true"/><input type="hidden" name="_debugFlag" value="on"/><div class="spacer"></div>
<label for="attributeNames">Attribute Names
<span class="small">Select Attribute Names</span>
</label><select id="name" name="attributeNames" name="name" multiple="multiple"><option value="ACCOUNT">ACCOUNT</option><option value="ADVERTISING">ADVERTISING</option><option value="INFORMATION">INFORMATION</option></select><input type="hidden" name="_attributeNames" value="1"/><div class="spacer"></div>
<label for="machineName">Machine Name
<span class="small">Enter Machine Name</span>
</label><input id="name" name="machineName" name="name" type="text" value=""/><div class="spacer"></div>
<label for="portNumber">Port Number
<span class="small">Enter Port Number</span>
</label><input id="name" name="portNumber" name="name" type="text" value=""/><div class="spacer"></div>
<button type="submit">Submit</button>
<div class="spacer"></div>
</form></div>
</body></html>
You are setting the width of ALL inputs to be the same. You certainly don't need a width of 200px on a checkbox.
Put different class names on different input types and style these individually.
You may also want to wrap your form in an unordered list, to allow it to control the spacing and clear your floats.
<fieldset>
<legend>Delivery Details</legend>
<ol>
<li>
<label for="name">Name<em>*</em></label>
<input id="name" />
</li>
<li>
<label for="address1">Address<em>*</em></label>
<input id="address1" />
</li>
<li>
<label for="address2">Address 2</label>
<input id="address2" />
</li>
<li>
<label for="town-city">Town/City</label>
<input id="town-city" />
</li>
<li>
<label for="county">County<em>*</em></label>
<input id="county" />
</li>
...
This is a very good guide: http://www.alistapart.com/articles/prettyaccessibleforms/
It looks like you need to add clear:both; to your form elements or utilize a <div class="spacer"></div> tag between each form element.
As an alternative you could use Table tag to place the html controls in proper format.
Related
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 am creating a registration form and am wondering how can I move the whole form to the center of the page? right now its all on the left side of the container, I want it to look a bit something like this: https://id2.s.nfl.com/fans/register?returnTo=http%3A%2F%2Fweeklypickem.fantasy.nfl.com%2F
#Regcontainer {
width: 1200px;
margin: 70px auto;
border: 1px solid;
background-color: aliceblue;
top: 0;
}
.Regcontainer h1 {
font-size: 40px;
font-family: 'Helvetica Neue', sans-serif;
color: black;
line-height: 1;
padding-left: 35px;
padding-top: 35px;
color: black;
}
input {
display: inline-block;
margin: 10px;
}
input[type=text] {
padding: 10px;
border: 2px solid #212;
border-radius: 2px;
box-shadow: #212121;
}
input[type=password] {
padding: 10px;
border: 2px solid #212;
border-radius: 2px;
padding: 5px 10px 5px 10px;
}
input[type=submit] {
background-color: #ff0000;
border: 1px solid #212121;
border-radius: 5px;
color: aliceblue;
font-weight: bold;
}
#back_form {
justify-content: center;
}
<div id="Registercontainer">
<div class="RegForm">
<h1> </h1>
<div id="back_glob">
<div id="back_form">
<form method="POST">
<label>FIRST NAME</label>
<input type="text" name="FName" />
<label>LAST NAME</label>
<input type="text" name="SNAME" />
<br/>
<label>EMAIL ADDRESS</label> <input id="email" name="email" type="text" />
<BR/>
<label>CREATE YOUR USERNAME</label> <input name="uname" type="text" /> <br/>
<label>CREATE PASSWORD</label> <input name="pass" type="password" />
<br/>
<input type="submit" name="valid" value="REGISTER" />
</form>
</div>
</div>
</div>
Here is the solution I came up with... but what does it do?
#Registercontainer needs to be on the center of the page. Meaning, your fixed with of 1200px is not going to work too well. I took the approach of reducing the size of your from container to give a better look and feel like this:
#Registercontainer {
max-width: 600px;
min-width: 320px;
width: 100%;
/* ... your other properties here ... */
}
Another note, your <label> needs the for attribute as specified in this article.
Let me know if you have any questions, FYI there are many ways to make this work for you.
#Registercontainer {
max-width: 600px;
min-width: 320px;
width: 100%;
margin: 70px auto;
border: 1px solid;
background-color: aliceblue;
top: 0;
padding: 15px;
}
.Regcontainer h1 {
font-size: 40px;
font-family: 'Helvetica Neue', sans-serif;
color: black;
line-height: 1;
padding-left: 35px;
padding-top: 35px;
color: black;
}
input {
display: inline-block;
margin: 10px;
}
input[type=text] {
padding: 10px;
border: 2px solid #212;
border-radius: 2px;
box-shadow: #212121;
}
input[type=password] {
padding: 10px;
border: 2px solid #212;
border-radius: 2px;
padding: 5px 10px 5px 10px;
}
input[type=submit] {
background-color: #ff0000;
border: 1px solid #212121;
border-radius: 5px;
color: aliceblue;
font-weight: bold;
}
#back_form {
justify-content: center;
}
<div id="Registercontainer">
<div class="RegForm">
<h1> Register With NackStack</h1>
<div id="back_glob">
<div id="back_form">
<form method="POST">
<label for="fname">FIRST NAME</label>
<input type="text" name="FName" id="fname" />
<br/>
<label for="sname">LAST NAME</label>
<input type="text" name="SNAME" id="sname" />
<br/>
<label for="email">EMAIL ADDRESS</label>
<input id="email" name="email" type="text" />
<br/>
<label for="uname">CREATE YOUR USERNAME</label>
<input name="uname" type="text" id="uname" />
<br/>
<label for="password">CREATE PASSWORD</label>
<input name="pass" type="password" id="password"/>
<br/>
<input type="submit" name="valid" value="REGISTER" />
</form>
</div>
</div>
</div>
Add margin:auto and a fixed width to the parent <div>. Example:
<div id="Registercontainer" style="margin-left:auto;margin-right:auto;width:250px">
Fiddle:
https://jsfiddle.net/mwatz122/g9ay26x3/
#Registercontainer {
text-align: center;
}
Please try this. It might help.
Put your form within a <div> like this:
<div align="center">
<!-- insert code here -->
</div>
Then in the CSS, add
form {
text-align: left;
}
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. ^^
I'm in the process of styling a profile page for my website.
I want to style the buttons for New Post, Contact Me and Log Out on the Profile Page the same as the Log In button on the Login Box which looks like this:
The code and CSS for this one is like this
Code:
input[type=submit] {
width: 100%;
background: #28343b;
color: #ffffff;
border: 1px solid #000;
padding: 10px;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
margin-bottom: 1px;
}
<form action="" method="post">
<div id="loginbox">
<label>Username:</label>
<input type="text" name="username" id="name" placeholder="Username" />
<br />
<br />
<label>Password:</label>
<input type="password" name="password" id="password" placeholder="**********" />
<br/>
<br />
<input type="submit" value=" Login " name="submit" />
<br />
<span></span>
</form>
</div>
I have indicated below which are the items I would like to style in this same button format.
What would I need to put in the CSS (and any changes to HTML) to style those items the same?
<div id="login">
<h2>Welcome:</h2>
<hr/>
<form action="" method="post">
<div id="loginbox">
<div id="submit"> Contact Me </div> <----- THIS ONE
<div id="newpost"> Make a New Post </div> <----- THIS ONE
<div id="logout">Log Out</div> <----- THIS ONE
<span></span>
</form>
</div>
It currently looks like this.
Use this css code to style your Log out link like Login button.
#logout{
width: 100%;
background: #28343b;
border: 1px solid #000;
padding: 10px;
font-size:20px;
cursor:pointer;
border-radius: 5px;
margin-bottom: 1px;
text-align:center;
font-weight:bold;
}
#logout a { /*all font customizations goes here*/
color: #fff;
text-decoration: none;
}
Check results here
I've changed a few little things around:
I've placed your id's onto your a elements, instead of the parent divs
I've added a little bit of extra css to ensure it overrides the default a tag stylings (i.e. underlining)
I've used the same css for your elements (using a comma to separate them)
I've also have styled your form similarly to your image, although you may want to alter this to be more precise.
Added a very simple hover effect
This leave your with this:
input[type=submit],
#submit,
#newpost,
#logout {
width: 96%;
background: #28343b;
color: #ffffff;
border: 1px solid #000;
padding: 10px;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
margin-bottom: 1px;
text-decoration: none;
display: block;
font-family: arial;
transition: all 0.5s;
}
#login {
background-color: #109cca;
padding: 5px;
border: 2px solid gray;
border-radius: 10px;
text-align: center;
}
input[type=submit]:hover,
#submit:hover,
#newpost:hover,
#logout:hover {
color: #109cca;
}
<div id="login">
<h2>Welcome:</h2>
<hr/>
<form action="" method="post">
<div id="loginbox">
<div> <a id="submit" href="cms/contact.php"> Contact Me </a>
</div>
<div> <a id="newpost" href="cms/index.php"> Make a New Post </a>
</div>
<div><a id="logout" href="logout.php">Log Out</a>
</div>
</div>
</form>
Try this:
#submit,#newpost,#logout {
width: calc(100% - 40px);
background: #28343b;
color: #ffffff;
border: 1px solid #000;
padding: 10px;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
margin-bottom: 1px;
text-align:center;
}
a{
color:white;
text-decoration:none;
}
<div id="login">
<h2>Welcome:</h2>
<hr/>
<form action="" method="post">
<div id="loginbox">
<div id="submit"> Contact Me
</div>
<div id="newpost"> Make a New Post
</div>
<div id="logout">Log Out
</div>
<span></span>
</div>
Like ṧнʊß mentioned, the #submit, #newpost, and #logout inputs are not inputs - they're divs, so they're not going to use the "input type=submit" CSS rule.
If you want to change these into inputs that would inherit the CSS rules, then you could convert them like so:
<input id="submit" src="cms/contact.php" value="Contact Me" type="submit"/>
It would probably make more sense, however, to change the CSS rule itself to some kind of class:
.fancyButton {
width: 100%;
background: #28343b;
border: 1px solid #000;
padding: 10px;
font-size:20px;
cursor:pointer;
border-radius: 5px;
margin-bottom: 1px;
text-align:center;
font-weight:bold;
}
And to give each of these <input> divs this class:
<input id="logout" class="fancyButton">
input {
width: calc(100% - 40px);
background: #28343b;
color: #ffffff;
border: 1px solid #000;
padding: 10px;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
margin-bottom: 1px;
padding: 10px;
}
input[type=submit] {
width: calc(100% - 20px);
}
<form action="" method="post">
<div id="loginbox">
<label>Username:</label>
<input type="text" name="username" id="name" placeholder="Username" />
<br />
<br />
<label>Password:</label>
<input type="password" name="password" id="password" placeholder="**********" />
<br/>
<br />
<label></label>
<input type="submit" value=" Login " name="submit" />
<br />
<span></span>
</div>
</form>
I'm currently busy with this informatics project(Build a sample datingsite) of mine. The problem is that I'm having some troubles with getting everything in the right place. Everything went fine until my email-box showed up at the wrong place(However, Dreamweaver displays it as I want it). I don't know how, I don't know why but I think it has to do something with my margins or paddings. Any help is appreciated!
Thanks in advance,
HTML+CSS(many words are dutch and I am a beginner to this all, so please don't expect a high quality code. I do have my HTML and CSS in separate files in my real project.):
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
padding:0;
margin:0;
border:0;
}
body {
background-color:#666;
font-family:corbel;
}
.container {
width: 1240px;
}
#HomeLeftSideRegister {
float:left;
}
.Form {
width: 1240px;
height: 600px;
display:block;
background-color:white;
border-radius: 10px;
margin-top: 111px;
margin-left:auto;
margin-right:auto;
}
#Registreernu {
margin-left:45px;
color: #3c948b;
font-size: 70px;
}
#Home-email {
color: #000;
font-size: 30px;
margin-top: 30px;
margin-left: 245px;
}
.Email {
color:#666;
font-weight:bold;
}
#useremail {
height: 22px;
width: 281px;
font-size: 20px;
border-width: 1px;
border-style:solid;
margin: 10px 0px 10px 149px;
}
.Gender {
color: #000;
font-size: 18px;
height: 155px;
width: 130px;
border: none;
float: left;
margin-left: 25px;
margin-top: 10px;
}
#gender-1 {
margin-left:150px;
}
.Radiolabel {
margin-top: 20px;
}
.Roundbutton {
background-color: #3c948b;
height: 74px;
width: 196px;
border-radius: 10px;
color: white;
font-size: 25px;
font-weight: 500;
float:none;
margin-left:193px;
}
#input {
margin-top: 220px;
}
#BlouseManImage {
float:right;
margin: 44px 70px auto auto;
}
</style>
</head>
<body>
<div id="Content" class="Container">
<section id="Home-Register">
<form class="Form" action="#" >
<div id="HomeLeftSideRegister">
<div id="Registreernu">REGISTREER NU</div>
<h2 id="Home-email">EMAIL:</h2>
<input name="email" type="email" class="Email" id="useremail"/>
<fieldset class="Gender" id="gender-1">
<H3>IK BEN EEN:</H3>
<div class="Radiolabel">
<label>
<input type="radio" name="amman" class="styled-radio" value="Man"/>
Man
</label> <br />
<label>
<input type="radio" name="amvrouw" class="styled-radio" value="Vrouw"/>
Vrouw
</label>
</div>
</fieldset>
<fieldset class="Gender">
<H3 class="">IK ZOEK EEN:</H3>
<div class="Radiolabel">
<label>
<input type="radio" name="likeman" class="styled-radio" value="Man"/>
Man
</label>
<br />
<label>
<input type="radio" name="likevrouw" class="styled-radio" value="Vrouw"/>
Vrouw
</label>
<br />
<label>
<input type="radio" name="likebeide" class="styled-radio" value="Beide"/>
Beide
</label>
</div>
</fieldset>
<div id="input">
<input type="submit" value="GA VERDER" class="Roundbutton">
</div>
</div>
<div id="BlouseManImage"><img src="Images/Man_Registreer.jpg" alt="Ik probeer het gewoon" height="535" width="577" />
</div>
</form>
</section>
<section id="reclame">
</section>
</div>
</body>
</html>
it seems you're another victim of the 'float' rule :-)
Your .Gender divs have float: left and it makes these divs go to the left and your email field had to appear to the right.
I solved it making the email field also float, so it gets there first... Also, I had to separate your 2 divs for gender because they are different and one needed to clear the float above so it goes to the row below.
Also, the html had to have name the 2 separated div classes, for GenderBen and GenderZoek.
(I don't know Dutch but I presume it stands for what you are and what you're looking for :-D)
The modified code is:
.Email {
color:#666;
font-weight:bold;
float: left;
}
.GenderBen {
color: #000;
font-size: 18px;
height: 155px;
width: 130px;
border: none;
float: left;
clear: both;
margin-left: 25px;
margin-top: 10px;
}
.GenderZoek {
color: #000;
font-size: 18px;
height: 155px;
width: 130px;
border: none;
float: left;
margin-left: 25px;
margin-top: 10px;
}
And the html with the changed divs:
<fieldset class="GenderBen" id="gender-1">
<H3>IK BEN EEN:</H3>
<div class="Radiolabel">
<label>
<input type="radio" name="amman" class="styled-radio" value="Man"/>
Man
</label> <br />
<label>
<input type="radio" name="amvrouw" class="styled-radio" value="Vrouw"/>
Vrouw
</label>
</div>
</fieldset>
<fieldset class="GenderZoek">
<H3 class="">IK ZOEK EEN:</H3>
<div class="Radiolabel">
<label>
<input type="radio" name="likeman" class="styled-radio" value="Man"/>
Man
</label>
<br />
<label>
<input type="radio" name="likevrouw" class="styled-radio" value="Vrouw"/>
Vrouw
</label>
<br />
<label>
<input type="radio" name="likebeide" class="styled-radio" value="Beide"/>
Beide
</label>
</div>
</fieldset>
Check the result here http://jsfiddle.net/yn8bjfbf/