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>
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'm trying to fixed the underline in all input text type, but without success.
Example:
My code:
input {
width: 100%;
background-color: #fcfcfc;
border: 0;
padding: 10px;
}
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
<label for="endereco">Endereço:</label>
<input class="" id="endereco" type="text" tabindex="2" minlength="5" required>
</div>
Use linear-gradient as background to create a line and you can easily control its size and position like this:
input {
width: 300px;
background:
linear-gradient(#000, #000) center bottom 5px /calc(100% - 10px) 2px no-repeat;
background-color: #fcfcfc;
border: 1px solid;
padding: 10px;
}
<input class="" id="endereco" type="text" tabindex="2" minlength="5" required>
Using the longhand syntax:
input {
width: 300px;
background-image: linear-gradient(#000, #000);
background-position: bottom 5px center;
background-size: calc(100% - 10px) 2px;
background-repeat: no-repeat;
background-color: #fcfcfc;
border: 1px solid;
padding: 10px;
}
<input class="" id="endereco" type="text" tabindex="2" minlength="5" required>
Add a border to the bottom of the input?
input {
width: 100%;
background-color: #fcfcfc;
border: 0;
border-bottom: 2px solid lightgrey;
padding: 10px;
}
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
<label for="endereco">Endereço:</label>
<input class="" id="endereco" type="text" tabindex="2" minlength="5" required>
</div>
Try it:
.custom-input{
border-width: 0px 0px 1px;
border-color: #DADADA;
font-size: 14px;
text-align: left;
letter-spacing: 0px;
color: #323A47;
padding-bottom: 5px;
}
<input type="text" name="" value="12" class="custom-input">
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>
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.
I require 2 text input boxes side by side in one page using css3. I have everything ready except that the second box is coming below the first input box. How can i correct this in css.
html:
<div class="main">
<div class="one">
<div class="register">
<h3>Create your account</h3>
<form id="reg-form">
<div>
<div>
<label for="username">Username</label>
<input type="text" id="username" spellcheck="false" placeholder="User Name" />
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" />
</div>
<div>
<label></label>
<input type="submit" value="Shop Login" id="create-account" class="button"/>
</div>
</form>
</div>
</div>
<div class="two">
<div class="register">
<h3>Create your account</h3>
<form id="reg-form1">
<div>
<label for="name1">Name</label>
<input type="text" id="name1" spellcheck="false" placeholder="Enter Your Name"/>
</div>
<div>
<label for="email1">Email</label>
<input type="text" id="email1" spellcheck="false" placeholder="mymail#mail.com"/>
</div>
<div>
<label for="username1">Username</label>
<input type="text" id="username1" spellcheck="false" placeholder="User Name" />
</div>
<div>
<label for="password1">Password</label>
<input type="password" id="password1" />
</div>
<div>
<label for="password-again1">Password Again</label>
<input type="password" id="password-again1" />
</div>
<div>
<label></label>
<input type="submit" value="Create Account" id="create-account1" class="button"/>
</div>
</form>
</div>
</div>
</div>
CSS
.main > div {
display: inline-block;
width: 49%;
margin-top: 10px;
}
.two .register {
border: none;
}
.two .register h3 {
border-bottom-color: #909090;
}
.two .register .sep {
border-color: #909090;
}
.register {
width: 400px;
margin: 10px auto;
padding: 10px;
border: 7px solid #ADD8E6;
border-radius: 10px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
background-color: #f0f0f0;
box-shadow: 0 0 20px 0 #000000;
}
.register h3 {
margin: 0 15px 20px;
border-bottom: 2px solid #72b372;
padding: 5px 10px 5px 0;
font-size: 1.1em;
}
.register div {
margin: 0 0 15px 0;
border: none;
}
.register label {
display: inline-block;
width: 25%;
text-align: right;
margin: 10px;
}
.register input[type=text], .register input[type=password] {
width: 65%;
font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif;
padding: 5px;
font-size: 0.9em;
border-radius: 5px;
background: rgba(0, 0, 0, 0.07);
}
.register input[type=text]:focus, .register input[type=password]:focus {
background: #FFFFFF;
}
.register .button {
font-size: 1em;
border-radius: 8px;
padding: 10px;
border: 1px solid #ADD8E6;
box-shadow: 0 1px 0 0 #05B8CC inset;
background: #05B8CC;
background: -webkit-linear-gradient(#ADD8E6, #05B8CC);
background: -moz-linear-gradient(#ADD8E6, #05B8CC);
background: -o-linear-gradient(#ADD8E6, #05B8CC);
background: linear-gradient(#ADD8E6, #05B8CC);
}
.register .button:hover {
background: #51db1c;
background: -webkit-linear-gradient(#51db1c, #6ba061);
background: -moz-linear-gradient(#51db1c, #6ba061);
background: -o-linear-gradient(#51db1c, #6ba061);
background: linear-gradient(#51db1c, #6ba061);
}
.register .sep {
border: 1px solid #72b372;
position: relative;
margin: 35px 20px;
}
.register .or {
position: absolute;
width: 50px;
left: 50%;
background: #f0f0f0;
text-align: center;
margin: -10px 0 0 -25px;
line-height: 20px;
}
.register .connect {
width: 400px;
margin: 0 auto;
text-align: center;
}
I have provided a jsFiddle Demo
I require it aligned side by side rather than top bottom as in demo. Thanks in advance
You have missed a closing div before <div class="two">.
Adding the closing div will make both forms next to each other.
Then you need to add a little CSS rule to make both forms perfectly aligned vertically:
div.one {
position: relative;
top: -165px
}
See the demo here: http://jsfiddle.net/t5SNE/7/