I am currently coding my first website, so far everything is going well 'til I hit an obstacle. I am currently creating my contact form which I want to integrate into the home page.
I want the 2x Name and 2x Email inputs side by side (with a little breathing space between the two of course) and the text area to be the same width across the two boxes. I am also trying to make the send button be underneath the message box on the right side.
Also, I cant add a placeholder on the textarea. When I do that the text looks really funny and not like the other inputs. If someone could help me with that too it'll be really appreciated.
I have tried a lot of things but nothing seems to work for me. I was hoping somebody here would maybe know a method I haven't tried.
I have added my code below for everyone to have a look at, to understand further what I am talking about.
.section4 {
background: whitesmoke;
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
}
.contact-wrap {
max-width: 75vw;
}
.form-text {
font-family: Oswald;
font-weight: 700;
text-transform: uppercase;
text-align: center;
}
.contact,
input,
textarea,
button {
display: grid;
grid-template-columns: 1fr 1fr;
margin: .5vh .5vw;
}
.contact-full {
grid-column: 1/3;
}
.contact,
input,
textarea,
button {
width: 100%;
padding: 1.5vh;
}
button {
font-family: Oswald;
font-weight: 700;
text-transform: uppercase;
position: static;
font-size: 2.5vh;
background: transparent;
border: 10px solid transparent;
border-image: #c71d6f;
border-image: linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
border-image: -moz-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
border-image: -webkit-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
border-image-slice: 1;
}
button:hover {
color: #f4f4f4;
background: #c71d6f;
background: linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
background: -moz-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
background: -webkit-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Oswald:500,600,700" rel="stylesheet">
</head>
<body>
<div class="section4">
<form>
<h2 class="form-text">let's work together!</h2>
<div class="contact-wrap">
<div class="contact">
<input type="name" id="name" placeholder="Name" required>
<input type="name" id="company" placeholder="Company">
<input type="email" id="email" placeholder="Email" required>
<input type="tel" id="telephone" placeholder="Contact">
<textarea class="contact-full" name="message" rows="10"></textarea>
<button class="button">Send</button>
</div>
</div>
</form>
</div>
</body>
</html>
Use grid-gap to give the gap between elements and grid-column to align the element left or right. Check below snippet.
.section4 {
background: whitesmoke;
display: flex;
justify-content: center;
align-items: center;
}
.contact-wrap {
max-width: 75vw;
}
.form-text {
font-family: Oswald;
font-weight: 700;
text-transform: uppercase;
text-align: center;
}
.contact {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.contact-full {
grid-column: 1/3;
}
.contact,
input,
textarea,
button {
padding: 1.5vh;
margin: 0;
}
button {
font-family: Oswald;
font-weight: 700;
text-transform: uppercase;
position: static;
font-size: 2.5vh;
background: transparent;
border: 10px solid transparent;
border-image: #c71d6f;
border-image: linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
border-image: -moz-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
border-image: -webkit-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
border-image-slice: 1;
grid-column: 2;
}
button:hover {
color: #f4f4f4;
background: #c71d6f;
background: linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
background: -moz-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
background: -webkit-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Oswald:500,600,700" rel="stylesheet">
</head>
<body>
<div class="section4">
<form>
<h2 class="form-text">let's work together!</h2>
<div class="contact-wrap">
<div class="contact">
<input type="name" id="name" placeholder="Name" required>
<input type="name" id="company" placeholder="Company">
<input type="email" id="email" placeholder="Email" required>
<input type="tel" id="telephone" placeholder="Contact">
<textarea class="contact-full" name="message" rows="10" placeholder="Message"></textarea>
<button class="button">Send</button>
</div>
</div>
</form>
</div>
</body>
</html>
Related
So I have quite an interesting issue here. I'd assume it's something I'm just not aware of or there's a mistake/logical issue somewhere. Anyhow long story short I have a html code with a list that is produced by thymeleaf. The idea is to hide a checkbox button behind each list element, which makes it selectable and therefor gives me a quick and easy way to handle the data java's side.
Anyhow my issue however is with the styling of the selector element.
I'm trying to change pointer/color when clicked on. I have added a class into the one span element that is used in my css file as follows. I have tried so many different ways and none of it ever applies it to any of the span elements within my css. However if I simply add style within the span element inside html it works fine. So my question here is, what could be the cause as to why it does not work with the css? Or is it simply something I don't understand yet or may have overlooked?
You can find the code below. Any help is much appreciated!
The one in question is
.minionInputData {
width: 100%;
text-align: center;
margin-top: 3cm;
}
.minionInputs p {
display: inline-block;
float: top;
margin-left: 2cm;
}
.minionContent {
width: 100%;
text-align: center;
margin-bottom: 1cm;
}
.minionInputs {
margin-bottom: 2cm;
}
.rolesTableContainer {
width: 100%;
text-align: center;
}
.roles-table input[type=checkbox] {
vertical-align: middle;
position: relative;
bottom: 1px;
}
.rolesText {
cursor: pointer;
color: red;
display: block;
padding: 10px;
margin: 3px;
}
.roles-table input[type="checkbox"]:checked+span {
color: #ffffff;
font-weight: bold;
background: blue;
}
.argsTableContainer {
width: 100%;
text-align: center;
}
.arguments-table {
/*margin: 0 0 0 auto;*/
display: inline-block;
width: 40%;
border: 3px solid green;
padding: 10px;
overflow:hidden;
}
.arguments {
width: 100%;
}
.arguments table {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
.arguments td {
padding: 8px;
border-style:outset;
background-color: #4CAF50;
height: 100%;
}
.arguments td input{
border: 0;
box-shadow: none;
width:100%;
height:40px;
font-size:26px;
white-space:nowrap;
background-color: #4CAF50;
text-align: center;
}
.arguments tr:nth-child(even){
background-color: #ffffcc;
}
.arguments tr:hover {
background-color: #ddd;
}
.addrowbutton {
float: right;
top: 200px;
}
/*.addallarguments {
background: #ff0000;
background-image: -webkit-linear-gradient(top, #ff0000, #3f219e);
background-image: -moz-linear-gradient(top, #ff0000, #3f219e);
background-image: -ms-linear-gradient(top, #ff0000, #3f219e);
background-image: -o-linear-gradient(top, #ff0000, #3f219e);
background-image: linear-gradient(to bottom, #ff0000, #3f219e);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
text-shadow: 1px 1px 3px #666666;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.addallarguments:hover {
background: #311ebd;
background-image: -webkit-linear-gradient(top, #311ebd, #3498db);
background-image: -moz-linear-gradient(top, #311ebd, #3498db);
background-image: -ms-linear-gradient(top, #311ebd, #3498db);
background-image: -o-linear-gradient(top, #311ebd, #3498db);
background-image: linear-gradient(to bottom, #311ebd, #3498db);
text-decoration: none;
}
.confirmButtons{
text-align: center;
width:100%;
bottom:0;
}*/
.confirmButtons input{
-moz-box-shadow: 1px 2px 5px 0px #899599;
-webkit-box-shadow: 1px 2px 5px 0px #899599;
box-shadow: 1px 2px 5px 0px #899599;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #a1a1a1));
background:-moz-linear-gradient(top, #ededed 5%, #a1a1a1 100%);
background:-webkit-linear-gradient(top, #ededed 5%, #a1a1a1 100%);
background:-o-linear-gradient(top, #ededed 5%, #a1a1a1 100%);
background:-ms-linear-gradient(top, #ededed 5%, #a1a1a1 100%);
background:linear-gradient(to bottom, #ededed 5%, #a1a1a1 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#a1a1a1',GradientType=0);
background-color:#ededed;
-moz-border-radius:13px;
-webkit-border-radius:13px;
border-radius:13px;
display:inline-block;
cursor:pointer;
color:#121212;
font-family:Verdana;
font-size:16px;
font-weight:bold;
padding:16px 25px;
text-decoration:none;
text-shadow:0px 0px 0px #e1e2ed;
}
.confirmButtons input:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #a1a1a1), color-stop(1, #ededed));
background:-moz-linear-gradient(top, #a1a1a1 5%, #ededed 100%);
background:-webkit-linear-gradient(top, #a1a1a1 5%, #ededed 100%);
background:-o-linear-gradient(top, #a1a1a1 5%, #ededed 100%);
background:-ms-linear-gradient(top, #a1a1a1 5%, #ededed 100%);
background:linear-gradient(to bottom, #a1a1a1 5%, #ededed 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1a1a1', endColorstr='#ededed',GradientType=0);
background-color:#a1a1a1;
}
.confirmButtons input:active {
position:relative;
top:1px;
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<title>Minions configurations</title>
<h1 align="center">Minion configuration</h1>
</head>
<body background="../static/images/MainBackground.jpg" th:background="#{images/MainBackground.jpg}">
<div id="allRolesContent">
<form action="#" th:action="#{/minions}" th:object="${selectedRole}" method="post">
<select id="allRoles" th:field="*{roleName}">
<option th:each="roleObj : ${allMinionRoles}"
th:value="${roleObj.getRoleName()}"
th:text="${roleObj.getRoleName()}">ROLES
</option>
</select>
<p><input type="submit" name="addRole" value="Add Formula" /></p>
</form>
</div>
<div id="minionForm" class="minionForm">
<link rel="stylesheet" type="text/css" href="../static/css/minions.css" th:href="#{css/minions.css}"/>
<script src="../static/js/buttons.js" th:src="#{js/buttons.js}"></script>
<script src="../static/js/PageFunctions" th:src="#{js/PageFunctions}"></script>
<div id="minionContent" class="minionContent">
<form action="#" th:action="#{/minions}" th:object="${minions}" method="post">
<div id="minionInputs" class="minionInputs">
<p>Configuration Name: <input type="text" th:field="*{name}" th:required="required"/></p>
<p>Enironment(eg LABOR): <input type="text" th:field="*{env}" th:required="required"/></p>
</div>
<div class="rolesTableContainer">
<div class="roles-table">
<ul>
<li style="list-style-type: none;" th:each="role : ${currentMinionRoles}">
<label th:field="*{roleName}" th:value="${role.getRoleName()}">
<span class="rolesText" th:text="test">ROLE</span>
<input type="checkbox" th:field="*{roleName}" th:value="${role.getRoleName()}"/>
</label>
</li>
</ul>
<input type="submit" name="remove" value="Remove" formnovalidate="formnovalidate"/>
<button name="moveUP" formnovalidate="formnovalidate">↑</button>
<button name="moveDown" formnovalidate="formnovalidate">↓</button>
</div>
</div>
<div class="argsTableContainer">
<div class="arguments-table">
<table id="argsTable" class="arguments">
<h1 align="center">Arguments list</h1>
<input class="addrowbutton" type="submit" name="add" value="Add Argument" formnovalidate="formnovalidate" onclick="addRow('argsTable','argumentTr')"
th:onclick="'addRow(\'argsTable\',\'argumentTr\');'"/>
<tr>
<th>Argument Name</th>
<th>Value</th>
</tr>
<tr id="argumentTr" th:each="argument : *{arguments}">
<td>
<input type="text" th:value="${argument.argName}" id="argName" name="argName"/>
</td>
<td>
<input type="text" th:value="${argument.value}" id="value" name="value"/>
</td>
</tr>
</table>
</div>
</div>
<div class="confirmButtonsContainer">
<div class="confirmButtons">
<input type="submit" name="saveAll" value="Save Configuration" />
<input type="submit" name="updateConf" value="Update Configuration"/>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
I'm not sure if you are looking for something like this, cus I could not understand quite clear. I made a simple example with jQuery. So, if your list is checked, it will add another class to that span, and this span will take style from stylesheet file, not just if you add inline style.
P.S, you could do this with css too, without jQuery, but I did not change your code structure, so I had to do a simple demo with jQuery.
Hope this helps you!
$("input").on("change", function(){
var _this = $(this);
var checkboxElement = _this.parent().find(".rolesText");
if(_this.is(':checked')) {
checkboxElement.addClass("checked");
}
else {
checkboxElement.removeClass("checked");
}
})
.roles-table input[type=checkbox] {
vertical-align: middle;
position: relative;
bottom: 1px;
}
.rolesText {
cursor: pointer;
color: red;
display: inline-block;
padding: 10px;
margin: 3px;
}
.rolesText.checked {
color: blue;
font-weight: bold;
}
.roles-table input[type="checkbox"]:checked {
color: #ffffff;
font-weight: bold;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="rolesTableContainer">
<div class="roles-table">
<ul>
<li style="list-style-type: none;" th:each="role : ${currentMinionRoles}">
<label th:field="*{roleName}" th:value="${role.getRoleName()}">
<span class="rolesText" th:text="${role.getRoleName()}">Role Name Here</span>
<input type="checkbox" th:field="*{roleName}" th:value="${role.getRoleName()}"/>
</label>
</li>
<li style="list-style-type: none;" th:each="role : ${currentMinionRoles}">
<label th:field="*{roleName}" th:value="${role.getRoleName()}">
<span class="rolesText" th:text="${role.getRoleName()}">Role Name Here</span>
<input type="checkbox" th:field="*{roleName}" th:value="${role.getRoleName()}"/>
</label>
</li>
<li style="list-style-type: none;" th:each="role : ${currentMinionRoles}">
<label th:field="*{roleName}" th:value="${role.getRoleName()}">
<span class="rolesText" th:text="${role.getRoleName()}">Role Name Here</span>
<input type="checkbox" th:field="*{roleName}" th:value="${role.getRoleName()}"/>
</label>
</li>
</ul>
<input type="submit" name="remove" value="Remove" formnovalidate="formnovalidate"/>
<button name="moveUP" formnovalidate="formnovalidate">↑</button>
<button name="moveDown" formnovalidate="formnovalidate">↓</button>
</div>
</div>
Cascading styles sheets are as they sound - cascading so you cannot go backwards or upwards, only forwards and downwards. If you want to style something if the checkbox is checked, place it after the checkbox and use a sibling selector - either + or ~:
.roles-table input[type=checkbox] {
vertical-align: middle;
position: relative;
bottom: 1px;
}
.rolesText {
cursor: pointer;
color: red;
display: block;
padding: 10px;
margin: 3px;
}
.roles-table input[type="checkbox"]:checked+span {
/* this means the span that directly follows a checked input */
color: #ffffff;
font-weight: bold;
background: blue;
}
/* if you need the span to appear first, use the following */
label {
display: flex;
align-items: center;
}
label>span {
order: 1;
}
label>input {
order: 2;
}
<div class="rolesTableContainer">
<div class="roles-table">
<ul>
<li style="list-style-type: none;" th:each="role : ${currentMinionRoles}">
<label th:field="*{roleName}" th:value="${role.getRoleName()}">
<input type="checkbox" th:field="*{roleName}" th:value="${role.getRoleName()}"/>
<span class="rolesText" th:text="${role.getRoleName()}">test</span>
</label>
</li>
</ul>
<input type="submit" name="remove" value="Remove" formnovalidate="formnovalidate" />
<button name="moveUP" formnovalidate="formnovalidate">↑</button>
<button name="moveDown" formnovalidate="formnovalidate">↓</button>
</div>
</div>
I am trying to style a search box inside a header using CSS. Here is a picture of my problem to help try and make things clearer:
When the search box is visible:
So my main problem is when the search box is faded in using JQuery it is taken out of document flow because I am using position: absolute; on .topSearchBarResultWrapper to get the search box where I want it on the header. I have tried using position: relative; which does bring the element .topSearchBarResultWrapper back into flow but does not display the search results below the header.
Thus, when I use position relative I did try and use top: 80px; to bring the search box wrapper down and then use margin-top: -100px; to get rid of the extra white space above, but then when you add search results to the wrapper the top: 80px; is invalid and does not work anymore because the size of .topSearchBarResultWrapper has changed.
I have also made a JsFiddle to help as well: https://jsfiddle.net/jjzp07ey/
Here is my HTML code that I am using:
<header> <!-- HTML 5 header -->
<ul class="navigationBarButtons">
<li>
<a class="topSearchBarButton defaultBlueButton navLoginButton"><img src="images/icons/searchIcon.png"></a>
<div class="topSearchBarResultWrapper">
<input type="text" class="topSearchBarInput" name="topSearchBox" placeholder="Search for someone...">
<div class="topSearchBarResult">d</div>
<div class="topSearchBarResult">d</div>
<div class="topSearchBarResult">d</div>
<div class="topSearchBarResult">d</div>
<div class="topSearchBarResult">d</div>
<div class="topSearchBarResult">d</div>
<div class="topSearchBarResult">d</div>
<div class="topSearchBarResult">d</div>
<div class="topSearchBarResult">d</div>
<div class="topSearchBarResult">d</div>
<div class="topSearchBarResult">d</div>
</div>
</li>
<li> <a class="defaultBlueButton" href="profileranks.php">Profile Ranks</a> </li>
<li> <a class="defaultBlueButton" href="howitworks.php">How it Works</a> </li>
</ul>
</header>
And here is the CSS code that I am using:
.topSearchBarInput
{
height: 32px;
width: 300px;
vertical-align: middle;
border: none;
border-radius: 4px;
display: inline-block;
margin-bottom: 4px;
}
.topSearchBarButton img
{
height: 24px;
width: 24px;
display: inline-block;
margin: 0 auto;
vertical-align: middle;
}
.topSearchBarResultWrapper
{
display: inline-block;
height: auto;
background-color: #dad9d5;
border-radius: 4px;
padding-bottom: 5px;
position: absolute;
}
.topSearchBarResult
{
background-color: red;
width: 300px;
height: auto;
}
header
{
background-color: black;
}
header ul
{
height: auto;
padding: 15px 0px;
margin: 0px;
}
header li
{
display: inline;
}
.defaultBlueButton /* Default Button Style */
{
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9); /* Used to support many different browsers */
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
border: 0px;
}
.defaultBlueButton:hover
{
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); /* Used to support many different browsers */
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
border: 0px;
cursor: pointer;
}
So I'm still trying to get the hang of html and css, so it could be what I want to do needs a completely different approach.
So right now when I view my website on my phone the form will auto resize, but my button currently doesn't.
However as you can see from the code, I have both the button and font size pretty big. What I would like is for a way to automatically resize the button and the font size to fit when viewed on a phone and tablet.
Below is the css code for my button.
Thanks
<form>
<input type="email" name="email" id="email" class="field-style field-split align-left set-width" placeholder="Your Email" />
</br>
</br>
<btn>
<input type="submit" name="Subscribe" value="GET THE FREE COURSE NOW" id="submit" />
</btn>
</form>
.form-style-9 btn input[type="button"],
.form-style-9 btn input[type="submit"] {
background: #3cd934;
background-image: -webkit-linear-gradient(top, #3cd934, #2b8016);
background-image: -moz-linear-gradient(top, #3cd934, #2b8016);
background-image: -ms-linear-gradient(top, #3cd934, #2b8016);
background-image: -o-linear-gradient(top, #3cd934, #2b8016);
background-image: linear-gradient(to bottom, #3cd934, #2b8016);
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
box-shadow: 0px 1px 3px #666666;
font-family: Arial;
color: #ffffff;
font-size: 27px;
padding: 11px 20px 10px 20px;
text-decoration: none;
}
.form-style-9 btn input[type="button"]:hover,
.form-style-9 btn input[type="submit"]:hover {
background: #256e13;
background-image: -webkit-linear-gradient(top, #256e13, #1d520f);
background-image: -moz-linear-gradient(top, #256e13, #1d520f);
background-image: -ms-linear-gradient(top, #256e13, #1d520f);
background-image: -o-linear-gradient(top, #256e13, #1d520f);
background-image: linear-gradient(to bottom, #256e13, #1d520f);
text-decoration: none;
}
You can use media queries
#media (max-width: 300px) {
btn {
width: 50px;
font-size:10px;
}
}
The above is saying if the screen size is <= 300px then apply these rules.
Having applied styling to my form certain elements of the form aren't adhering to the styling particularly:
1st issue: The width of 350px is only being applied on one of the five input elements i.e. the email field.
2nd issue: I'm applying an image on the input elements when engaged to indicate they are required but the image isnt appearing on any of the input elements when engaged.
3rd issue: I would like the div with the class social_sign_in to have a margin top which I have applied but isn't working.
4th issue: I'm attempting to have the form styling i.e. the class I call form_input_div to wrap itself round the form elements which are 350px in width whilst it remains in the centre. This seems not to be working.
As am slightly new to CSS I suspect I might have made some errors in the basics of styling so my apologies if that is the case.
EDIT: Here's the relevant HTML code:
<div class="page_content_main_div">
<div class="page_content_heading_div" >
<p> Log in with: </p>
</div>
<div class="social_sign_in_div">
<a class="btn-auth btn-facebook large" href="#">Log in with <b>Facebook</b></a>
</div>
<div class="social_sign_in_div">
<a class="btn-auth btn-google large" href="#">Log in with <b>Google</b></a>
</div>
<div class="btn_log_in_with_email_div">
<a class="btn-auth btn_log_in_with_email large" href="#">Log in with <b>ABCD details</b></a>
</div>
<hr class="hr"></hr>
<form action="#" method="GET" class="sign_up_form">
<div class="page_content_heading_div">
<p>Sign up:</p>
</div>
<div>
<input title="Enter first name" class="firstname" name="firstname" type="text" required placeholder="Enter first name">
</div>
<div>
<input title="Enter second name" class="secondname" name="secondname" type="text" required placeholder="Enter second name">
</div>
<div>
<input title="Enter your e-mail" class="email" name="email" type="email" required placeholder="Enter email">
</div>
<div>
<input title="Enter a password" class="password" name="password" type="password" required placeholder="Enter password">
</div>
<div>
<input title="Re-enter password" class="reenterpassword" name="reenterpassword" type="password" required placeholder="Re-enter password">
</div>
<div class="form_button_internal_div">
<button title="Type your second name" type="submit" class="btn_sign_up">Sign Up</button>
</div>
<div class="form_terms_of_service_internal_div">
<p class="terms_of_service">By signing up, I agree to the ABCD <b>Terms of Service</b> and <b>Privacy Policy</b>.</p>
</div>
</form>
</div>
EDIT: Here's the relevant CSS code:
/* Page content heading div */
.page_content_heading_div {
font-family:'Trebuchet MS', Tahoma, Sans-serif;
color: #999999;
font-size: 40px;
font-weight: bold;
clear: both;
}
/* Page content main div */
.page_content_main_div {
clear: both;
}
/* Social sign in div */
.social_sign_in_div {
font-family:'Trebuchet MS', Tahoma, Sans-serif;
clear: both;
margin-top: 10px;
}
/* Log in with email div */
.btn_log_in_with_email_div {
font-family:'Trebuchet MS', Tahoma, Sans-serif;
clear: both;
margin-top: 10px;
}
/* hr styling */
.hr {
width: 350px;
height: 2px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}
/* */
.sign_up_form {
width: 350px;
display: inline-block;
}
/* */
input[type="text"], input[type="password"], input[type="email"] {
font-family:'Trebuchet MS', Tahoma, Sans-serif;
width: 100%;
height: 45px;
font-size: 20px;
color: #000000;
border: 1px solid #999999;
border-radius: 6px;
padding: 5px 5px 5px 5px;
margin-top: 10px;
-webkit-appearance: none;
-moz-appearance: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
/* */
input:focus {
outline: solid #999999;
border-radius: 6px;
}
/* */
.form_button_internal_div {
margin-top: 10px;
margin-bottom: 10px;
}
/* Primary button */
.btn_sign_up {
right: 0px;
width: 150px;
height: 36px;
border:none;
font-weight: normal;
font-size: 20px;
margin-top: 10px;
background: #CCC;
background: -webkit-linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
background: -moz-linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
background: -ms-linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
background: -o-linear-gradient(#A2E55A 0%,#A2E55A 50%,#A2E55A 51%,#A2E55A);
background: linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
-pie-background: linear-gradient(#A2E55A,#A2E55A 50%,#A2E55A 51%,#A2E55A);
-webkit-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
-webkit-box-shadow: inset 1px 0 0px rgba(255,255,255,.4);
-moz-box-shadow: inset 1px 0 0px rgba(255,255,255,.4);
box-shadow: inset 1px 0 0px rgba(255,255,255,.4);
color: #F5F5F5;
}
/* */
.btn_sign_up:hover {
background: -webkit-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -moz-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -ms-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -o-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
-pie-background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
}
/* */
.btn_sign_up:active {
background: -webkit-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -moz-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -ms-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: -o-linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
-pie-background: linear-gradient(#71A03F,#71A03F 50%, #71A03F 51%);
}
/* */
.form_terms_of_service_internal_div {
margin-top: 10px;
margin-bottom: 10px;
}
/* */
.terms_of_service {
font-family:'Trebuchet MS', Tahoma, Sans-serif;
font-size: 15px;
color: #999999;
}
The width of 350px is only being applied on one of the five input elements i.e. the email field.
This doesn't seem to be true...I'm seeing all inputs the same length.
I'm applying an image on the input elements when engaged to indicate they are required but the image isnt appearing on any of the input elements when engaged.
Your engaged inputs are identified by the class required, but they all have this class by default, so there really isn't a trigger. What you are looking for is a :focus, then apply the styling.
I would like the div with the class social_sign_in to have a margin top which I have applied but isn't working.
It's working, but 10px is not enough to see a difference. If you made this like 50px, you will see it moved.
I'm attempting to have the form styling i.e. the class I call form_input_div to wrap itself round the form elements which are 350px in width whilst it remains in the centre. This seems not to be working.
What purpose does the form_input_div serve? Why not remove the widths from the input, have them take 100% of their container, which is the form, and set the width on the form with some padding and you'll get what you want.
Also, required id is not a valid attribute to be putting on the input tags.
Hi I have to arrange the form in two equal column and i have written the following html and css3. But seems like something is putting the second label "upto" in right corner. attached screenshot. Please help in resolving the problem.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./css/jquery.mobile-1.4.0.css">
<script src="./script/jquery-1.10.2.js"></script>
<script src="./script/jquery.mobile-1.4.0.js"></script>
<link rel="stylesheet" href="./css/riders.css">
<link rel="stylesheet" href="./css/jquery.mobile-1.4.0.css">
<div class="details-fst">
</head>
<body>
<div id ="prd_content" data-role="content">
<div class="details-fst">
<div>
<div class="pre">
<label class="myRiderlabel riderfonts" id="riderlabel1" data-role="none" for="amt">my Value</label>
<input class="myRiderbox riderfonts" data-role="none" id="amt" name="amt" type="text" value="" required>
</div>
<div class="pre">
<label class="myRiderlabel riderfonts" id="riderlabel2" data-role="none" for="pre">Amount</label>
<input class="myRiderbox riderfonts" data-role="none" id="pre" name="pre" type="text" value="" required>
</div>
</div>
<div>
<div class="pre">
<label class="myRiderlabel riderfonts" id="riderlabel1" data-role="none" for="amt">upto</label>
<input class="myRiderbox riderfonts" data-role="none" id="amt" name="amt" type="text" value="" required>
</div>
<div class="pre">
<label class="myRiderlabel riderfonts" id="riderlabel2" data-role="none" for="pre">Payment Duration</label>
<input class="myRiderbox riderfonts" data-role="none" id="pre" type="number" name="quantity" min="1" max="5" value="" required>
</div>
</div>
<div>
<div class="pre">
<label class="myRiderlabel2 riderfonts" id="riderlabel1" data-role="none" for="amt">frequency</label>
<input class="myRiderbox riderfonts" data-role="none" id="amt" name="amt" type="text" value="" required>
</div>
<div class="pre">
<label class="myRiderlabel2 riderfonts" id="riderlabel2" data-role="none" for="pre">Duration</label>
<button class="submitbtn" id="submit" data-role="none" type="submit" onclick="chooseLan()">Submit</button>
</div>
</div>
</div>
</div>
CSS:
.myRiderbox {
min-height: 0.5% !important;
padding: 1% !important;
width: 20% !important;
margin: 1%;
text-align: left;
background: none repeat scroll 0% 0% white;
border: 1px solid rgb(221, 235, 244);
border-radius: 5px;
color: rgb(102, 102, 102);
outline: medium none;
height: 22px;
}
.myRiderbox2{
min-height: 0.5% !important;
padding: 1% !important;
width: 20% !important;
margin: 8% 1%;
text-align: left;
background: none repeat scroll 0% 0% white;
border: 1px solid rgb(221, 235, 244);
border-radius: 5px;
color: rgb(102, 102, 102);
outline: medium none;
height: 22px;
}
.myRiderlabel {
min-height: 0.5% !important;
padding: 2% 0% !important;
margin: 1% 1% !important;
text-align: left;
color: rgb(102, 102, 102);
outline: medium none;
height: 22px;
}
.myRiderlabel2 {
min-height: 0.5% !important;
padding: 4% 0% !important;
margin: 2% 1% !important;
text-align: left;
color: rgb(102, 102, 102);
outline: medium none;
height: 22px;
float: left;
}
#riderlabel1{width: 22% !important;}
#riderlabel2{width: 12% !important;}
.riderfonts {
color: rgb(0,106,182);
font-size: 1em !important;
font-family: "Times New Roman", Times,serif;
font-style:normal
}
.submitbtn {
background: #9ACD32;
background-image: -webkit-linear-gradient(top, #9ACD32, #9AC9922);
background-image: -moz-linear-gradient(top, #9ACD32, #9AC9922);
background-image: -ms-linear-gradient(top, #9ACD32, #9AC9922);
background-image: -o-linear-gradient(top, #9ACD32, #9AC9922);
background-image: linear-gradient(to bottom, #9ACD32, #9AC9922);
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
font-family: Arial;
color: #ffffff;
font-size: 16px;
padding: 8px 17px 8px 16px;
text-decoration: none;
}
.submitbtn:hover {
background: #9ACD32;
background-image: -webkit-linear-gradient(top, #9ACD32, #9AC9922);
background-image: -moz-linear-gradient(top, #9ACD32, #9AC9922);
background-image: -ms-linear-gradient(top, #9ACD32, #9AC9922);
background-image: -o-linear-gradient(top, #9ACD32, #9AC9922);
background-image: linear-gradient(to bottom, #9ACD32, #9AC9922);
text-decoration: none;
}
Thanks
I created a new CSS file for you with HTML div tag placement.
// CSS
.Container {
width:600px;
height:220px;
padding:5px;
border:dotted #808080 1px;
}
.LeftColumn {
width:285px;
height:200px;
margin-left:5px;
margin-top:10px;
border:dotted #808080 1px;
}
.RightColumn {
width:285px;
height:200px;
margin-top:-200px;
margin-left:300px;
border:dotted #808080 1px;
}
// HTML Coding
<body>
<div class="Container">
<div class="LeftColumn">Container for column 1</div>
<div class="RightColumn">Container for column 2.</div>
</div>
</body>