position the text in the required place - html

HTML
<div class="form">
<!-- USERNAME BOX-->
<label for="username"><b>Username or email address</b></label><br>
<input type="text" name="username" value=""><br>
<!-- PASSWORD BOX -->
<label for="password">
Password
Forgot password?
</label><br>
<input type="password" name="password" value=""><br>
<!-- SIGN IN BUTTON -->
<input type="button" name="button" value="Sign in">
</div>
CSS
.form{
background: white;
border: 1px solid #aaa;
padding: 15px;
border-radius: 5px;
}
label{
font-size: 12px;
font-weight: 600;
text-align: left;
}
input{
margin-top: 5px;
margin-bottom: 10px;
width: 300px;
height: 25px;
border-radius: 5px;
border: 1px solid #aaa;
text-indent: 5px;
box-shadow: inset 0 0 1px #000;
outline-color: dodgerblue;
}
input[type="button"]{
background: green;
color: white;
font-weight: 600;
height: 30px;
border: darkgreen;
}
label a{
float: right;
transform: translateY(3px);
text-decoration: none;
}
I want Forgot password? to end exactly where the input field ended. I have tried to do this but i couldn't. Plese help me to fix this. It shifted towards right from the required position.

You should add the following css for label so that label will be same width as input, and its Forgot password? aligns with input field.
width: 300px;
display: inline-block;
.form{
background: white;
border: 1px solid #aaa;
padding: 15px;
border-radius: 5px;
}
label{
font-size: 12px;
font-weight: 600;
text-align: left;
width: 300px;
display: inline-block;
}
input{
margin-top: 5px;
margin-bottom: 10px;
width: 300px;
height: 25px;
border-radius: 5px;
border: 1px solid #aaa;
text-indent: 5px;
box-shadow: inset 0 0 1px #000;
outline-color: dodgerblue;
}
input[type="button"]{
background: green;
color: white;
font-weight: 600;
height: 30px;
border: darkgreen;
}
label a{
float: right;
/* transform: translateY(3px); */
text-decoration: none;
}
<div class="form">
<!-- USERNAME BOX-->
<label for="username"><b>Username or email address</b></label><br>
<input type="text" name="username" value=""><br>
<!-- PASSWORD BOX -->
<label for="password">
Password
Forgot password?
</label><br>
<input type="password" name="password" value=""><br>
<!-- SIGN IN BUTTON -->
<input type="button" name="button" value="Sign in">
</div>

I think you positioned you forgot password on the wrong place.
<div class="form">
<!-- USERNAME BOX-->
<label for="username"><b>Username or email address</b></label><br>
<input type="text" name="username" value=""><br>
<!-- PASSWORD BOX -->
<label for="password">
Password
</label><br>
<input type="password" name="password" value="">Forgot password?
<br>
<!-- SIGN IN BUTTON -->
<input type="button" name="button" value="Sign in">
</div>

Firstly, you need to remove the <br>s after the labels:
<div class="form">
<!-- USERNAME BOX-->
<label for="username"><b>Username or email address</b></label>
<input type="text" name="username" value=""><br>
<!-- PASSWORD BOX -->
<label for="password">
Password
Forgot password?
</label>
<input type="password" name="password" value=""><br>
<!-- SIGN IN BUTTON -->
<input type="button" name="button" value="Sign in">
</div>
Then, you need to add display: block; and width: 310px; to the label:
label {
font-size: 12px;
font-weight: 600;
text-align: left;
display: block;
width: 310px;
}

Related

Trying to get input and submit boxes on the same line

I know this question has been asked lots, but I am a complete novice at coding and could therefore do with some help.
I'm adding a mailchimp subscribe box in a wordpress footer. I've followed instructions on how to customer the naked version to match formatting etc.
The final part is to get all three boxes in a single line at the bottom of the page. I just can't get my head around it.
Please help!
#mailchimp {
background: #F7C6CB;
color: #3D6392;
padding: 10px 7px;
}
#mailchimp input {
border: medium none;
color: #444;
font-family: architects daughter;
font-size: 0.7rem;
font-style: italic;
margin-bottom: 2px;
padding: 2px 2px;
width: 300px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#mailchimp input.email {
background: #fff
}
#mailchimp input.name {
background: #fff
}
#mailchimp input[type="submit"] {
background: #BBD8DC;
color: #444;
cursor: hand;
font-size: 0.7rem;
width: 100px;
padding: 4px 0;
}
#mailchimp input[type="submit"]:hover {
color: #ffff
}
<div id="mailchimp">
<form action="//rocketfuelforlife.us16.list-manage.com/subscribe/post?u=3234aff37dd880f87f2f30d0e&id=3f511425b1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<input type="text" size="30" value="Enter your first name" name="FNAME" class="name" id="mce-FNAME" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<input type="email" size="30" value="Enter your email address" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div class="clear">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</form>
</div>
I played around a bit with your code. I removed the clear class around your input submit and move the validation div below the input. I also reduced the width of the input to make sure they had enough space to align next to each other on one line. Run the code below the see the result of this:
#mailchimp {
background: #F7C6CB;
color: #3D6392;
padding: 10px 7px;
}
#mailchimp input {
border: medium none;
color: #444;
font-family: architects daughter;
font-size: 0.7rem;
font-style: italic;
margin-bottom: 2px;
padding: 2px 2px;
width: 200px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#mailchimp input.email {
background: #fff
}
#mailchimp input.name {
background: #fff
}
#mailchimp input[type="submit"] {
background: #BBD8DC;
color: #444;
cursor: hand;
font-size: 0.7rem;
width: 100px;
padding: 4px 0;
}
#mailchimp input[type="submit"]:hover {
color: #ffff
}
<div id="mailchimp">
<form action="//rocketfuelforlife.us16.list-manage.com/subscribe/post?u=3234aff37dd880f87f2f30d0e&id=3f511425b1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<input type="text" size="30" value="Enter your first name" name="FNAME" class="name" id="mce-FNAME" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<input type="email" size="30" value="Enter your email address" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
</form>
</div>
I added "display: inline-block" style to both of the text inputs and also the submit input to force them onto the same line. I also moved the submit input out of the div.clear and put it directly under the email input, which allows it to be in the same line.
#mailchimp {
background: #F7C6CB;
color: #3D6392;
padding: 10px 7px;
}
#mailchimp input {
border: medium none;
color: #444;
font-family: architects daughter;
font-size: 0.7rem;
font-style: italic;
margin-bottom: 2px;
padding: 2px 2px;
width: 300px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
display: inline-block;
}
#mailchimp input.email {
background: #fff
}
#mailchimp input.name {
background: #fff
}
#mailchimp input[type="submit"] {
background: #BBD8DC;
color: #444;
cursor: hand;
font-size: 0.7rem;
width: 100px;
padding: 4px 0;
display: inline-block;
}
#mailchimp input[type="submit"]:hover {
color: #ffff
}
<div id="mailchimp">
<form action="//rocketfuelforlife.us16.list-manage.com/subscribe/post?u=3234aff37dd880f87f2f30d0e&id=3f511425b1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<input type="text" size="30" value="Enter your first name" name="FNAME" class="name" id="mce-FNAME" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<input type="email" size="30" value="Enter your email address" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div class="clear">
</div>
</form>
</div>
Okay, so I just created parent divs for the <input> blocks and then I just floated the divs left and right and then changed the #MailChimp css style to have a height of 20px. Here is my JSFiddle

HTML/CSS sign up form

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>

Moving text in input

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;
}

How to move form to center of page

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;
}

Trying to style a button but wont work

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>