<!DOCTYPE html>
<html>
<title>Simple Sign up from</title>
<head>
<style>
html, body {
display: flex;
justify-content: center;
font-family: Roboto, Arial, sans-serif;
font-size: 15px;
}
form {
border: 5px solid #f1f1f1;
}
input[type=text] {
width: 100%;
padding: 16px 8px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
select {
width: 100%;
padding: 16px 8px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4286f4;
color: white;
padding: 14px 0;
margin: 10px 0;
border: none;
cursor: grab;
width: 48%;
}
h1 {
text-align:center;
fone-size:18;
}
button:hover {
opacity: 0.8;
}
.formcontainer {
text-align: center;
margin: 24px 50px 12px;
}
.container {
padding: 20px 0;
text-align:left;
}
span.psw {
float: right;
padding-top: 0;
padding-right: 15px;
}
/* Change styles for span on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
</style>
</head>
<body>
<form method="post">
<h1>DSL_PROJECT</h1>
<div class="formcontainer">
<div class="container">
<label for="Rname"><strong>Requestor-name</strong></label>
<input type="text" placeholder="Enter Requestor-name" name="Rname" required>
<label for="Nname"><strong>Namespace-name</strong></label>
<input type="text" placeholder="Enter Namespace-name" name="Nname" required>
<label for="Pname"><strong>Project_ID</strong></label>
<select id="select">
<option value="default">default</option>
</select>
</div>
<button type="submit"><strong>SUBMIT</strong></button>
</div>
</form>
<script>
var select=document.getElementById("select"),
arr=["p1","p2","p3"];
for(var i=0;i<arr.length;i++)
{
var option=document.createElement("OPTION"),
txt=document.createTextNode(arr[i]);
option.appendChild(txt);
option.setAttribute("value",arr[i]);
select.insertBefore(option,select.lastChild);
}
</script>
</body>
</html>
<?php
if(isset($_POST['textdata']))
{
$data=$_POST['textdata'];
$fp = fopen('data.txt', 'a');
fwrite($fp, $data);
fclose($fp);
}
?>
From the above HTML code there are few user inputs so I have added Post method & PHP code to trigger or push input user data of html to text(.txt)file but data is not written to the text file[ I have created manually data.txt file in my local]. And in the same script added java script to add or create list.Someone help me to fix the issue. Thanks in advance.
Related
I am new working with HTML/CSS/JS and SvelteKit, so I'm struggling getting the look how I want it.
HTML
<h1>{market}</h1>
{#each articleList as item}
<form action="" method="post">
<p class="{item.checked ? "item-checked" : ""}">
{item.quantity} {item.article} {item.place}
</p>
{#if item.checked}
<button>DELETE</button>
{/if}
</form>
{/each}
Global CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
background: #3A3A3A;
font-family: 'Montserrat', sans-serif;
margin: 0 2em;
}
Component CSS
form {
border: 1px solid #57FF90;
border-radius: 4px;
margin-bottom: 1em;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 50px;
}
form p {
color: #FFFFFF;
font-size: 1.4rem;
padding: 0 0.5em
}
.item-checked {
text-decoration: line-through;
}
button {
height: 50px;
border: none;
background-color: #57FF90;
margin: 0;
border-radius: 0 4px 4px 0;
cursor: pointer;
}
As you can see on the screenshot, there is a gap on the right side.
I created a test HTML file:
<!DOCTYPE html>
<html lang="en">
<body>
<div class="wrapper">
<form action="POST">
<p>Random Text</p>
<button>DELETE</button>
</form>
<form action="POST">
<p>Random Text</p>
<!-- <button>DELETE</button> -->
</form>
</div>
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
padding: 1em;
}
form {
background-color: red;
margin-bottom: 1em;
display: flex;
justify-content: space-between;
border-radius: 4px;
}
button {
border: none;
background-color: green;
cursor: pointer;
border-radius: 0 4px 4px 0;
}
</style>
</body>
</html>
Here everything is looking like expected. Why is there a difference?
Your html test file isn't using the same CSS. When I edit the styles in the test file to be the same as those you're using in the svelte code, I get a page that looks identical.
Also, I don't see the gap except at 175% zoom. That's kind of odd, so I suspect that it's a rounding issue. At any rate, it appears in the html test file as well as the served svelte file, so this isn't a Svelte or SvelteKit issue, as near as I can tell.
I have created a basic form, where the user has to input various contact details. My Send button however, does not work. Im trying to use HTML and CSS only for this form, but I'm not opposed to using JS if that's what is needed for this to be functional.
I have looked up various ways for a solution, but most things involve using php, which is not something I am able to use for this. As stated before, I'm really just trying to stick with HTML.
My button does have type="submit" and href="myemail#email.com" (I have my actual email in there). However, my button does not click, or at least it does not give the appearance of clicking nor does it send anything to my email. I also thought it was just a web browser issue, but I have tried both chrome and safari and no luck.
<section class="modal-section">
<button class="modal-button" id="open">Click Me</button>
<div class="modal-container" id="modal_container">
<div class="modal">
<div class="form-container" id="form-container">
<h1 class="form-header">Connect With Me.</h1>
<p>I would love to respond to your queries and help you succeed. Feel free to contact me!</p>
<div class="contact-box">
<div class="contact-left">
<h3 class="form-header3">Send your request</h3>
<form>
<div class="input-row">
<div class="input-group">
<label>Name</label>
<input type="text" placeholder="Your Name" required>
</div>
<div class="input-group">
<label>Phone</label>
<input type="text" placeholder="(888) 888-8888">
</div>
</div>
<div class="input-row">
<div class="input-group">
<label>Email</label>
<input type="email" placeholder="YourEmail#Email.com" required>
</div>
<div class="input-group">
<label>Subject</label>
<input type="text" placeholder="You're Hired!" required>
</div>
</div>
<label>Message</label>
<textarea rows="5" placeholder="You are so cool, please make my website cool too!" required></textarea>
<button class="form-button" type="submit" value="Send" href="mailto:johnsonisaiah13#yahoo.com">SEND</button>
</form>
</div>
<div class="contact-right">
<h3 class="form-header3">Reach Me</h3>
<table>
<tr>
<td>Email</td>
<td>Johnsonisaiah13#yahoo.com</td>
</tr>
<tr>
<td>Location</td>
<td>Fort Stockton, TX</td>
</tr>
</table>
</div>
</div>
</div>
<button class="modal-button" id="close">Close Me</button>
</div>
</div>
</section>
/* //////////////////////////////////////////////////////////////
//////////////// MODAL SECTION ///////////////////////
////////////////////////////////////////////////////////////// */
.modal-section {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}
.modal-container {
background-color: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 200vh; /* make 100 for smaller screen */
opacity: 0;
pointer-events: none;
}
.modal-button {
/* background-color: #39FF14;
color: #1F2022;
border-radius: 5px;
padding: 10px 25px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
font-size: 14px; */
background-color: white;
padding: 10px 18px;
font-weight: bold;
color: #1F2022;
display: inline-block;
margin: 30px 0;
border-radius: 5px;
}
.modal-button:hover {
background-color: #39FF14;
}
.modal {
background-color: white;
padding: 30px 50px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
width: 1000px;
max-width: 100%;
text-align: center;
}
.modal-header {
margin: 0;
}
.modal-text {
font-size: 14px;
opacity: 0.7;
}
.modal-container.show {
opacity: 1;
pointer-events: auto;
}
/* <!-- /////////////////////////////////////////////////////////////
///////////////////// CONTACT ME / HIRE ME /////////////////////////
///////////////////////////////////////////////////////////// --> */
.form-container {
width: 80%;
margin: 50px auto;
}
.contact-box {
background: white;
display: flex;
}
.contact-left {
flex-basis: 60%;
padding: 40px 60px;
}
.contact-right {
flex-basis: 40%;
padding: 40px;
background: #39FF14;
}
.form-header {
margin-bottom: 10px;
color: white;
}
.form-container p {
margin-bottom: 40px;
color: white;
}
.input-row {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.input-row .input-group {
flex-basis: 45%;
}
input {
width: 100%;
border: none;
border-bottom: 1px solid #39FF14;
outline: none;
padding-bottom: 5px;
}
textarea {
width: 100%;
border: 1px solid #39FF14;
outline: none;
padding: 10px;
box-sizing: border-box;
}
label {
margin-bottom: 6px;
display: block;
color: black;
}
.form-button {
background-color: #39FF14;
width: 100px;
border: none;
outline: none;
color: black;
height: 35px;
border-radius: 30px;
margin-top: 20px;
box-shadow: 0px 5px 15px 0px rgba(0, 14.5, 38.9, 48.6);
pointer-events: auto;
}
.form-header3 {
/* color: orange; */
font-weight: 600;
margin-bottom: 30px;
}
tr td:first-child {
padding-right: 20px;
}
tr td {
padding-top: 20px;
}
You can try refering to this old question some time ago. Not sure if it still works, but hope it helps.
html button to send email
I am trying to create a login page based on this one in HTML and CSS. Of course, my logo will be different, and I am trying to add some transparency to the background image.
I'm new to web dev, but I don't think this is too complicated. It's just one background pic, with a single div spreading across the screen to hold the username and password bars.
I have put what I've got so far into this JSFiddle: https://jsfiddle.net/6eLuw2th/
Here's the code:
body {
opacity: 0.2;
background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
background-size:cover;
z-index: -1;
}
form {
border: 3px solid #f1f1f1;
z-index: 0;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
z-index: 0;
}
button {
background-color: #8C1515;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
font-size: 15px;
width: 100%;
z-index: 0;
}
button:hover {
opacity: 0.8;
z-index: 0;
}
.container {
padding: 16px;
z-index: 0;
}
span.psw {
float: right;
padding-top: 16px;
z-index: 0;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: left;
width: 100%;
z-index: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="login.css" />
</head>
<body>
<form action="/action_page.php" method="post">
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</body>
</html>
As you can see, the username/password content appears to be behind the image (even though the z-index is -1 for the background?). I do want to make the background appear slightly transparent, but have been having a bit of trouble that as well. Furthermore, my username and password bars stretch across the entire screen; I would prefer for them to be more like the example page I'm trying to recreate, with the login info bars restricted to the middle of the screen.
Any help or suggestions would be greatly appreciated!
Actually the issue you are facing is not about z-index. the issue is that you have opacity:0.2 set on the body, that's why it looks weird:
body {
opacity: 0.2; /* just remove this line */
background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
background-size:cover;
z-index: -1;
}
also I amended the form to have less width and centered:
form {
border: 3px solid #f1f1f1;
z-index: 0;
width: 60%;
margin: 0 auto;
}
label {
color: #FFF;
}
Here is a working snippet:
body {
background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
background-size:cover;
z-index: -1;
}
form {
border: 3px solid #f1f1f1;
z-index: 0;
width: 60%;
margin: 0 auto;
}
label {
color: #FFF;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
z-index: 0;
}
button {
background-color: #8C1515;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
font-size: 15px;
width: 100%;
z-index: 0;
}
button:hover {
opacity: 0.8;
z-index: 0;
}
.container {
padding: 16px;
z-index: 0;
}
span.psw {
float: right;
padding-top: 16px;
z-index: 0;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: left;
width: 100%;
z-index: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="login.css" />
</head>
<body>
<form action="/action_page.php" method="post">
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</body>
</html>
1) You are not loading a faded background. You're loading a solid background and trying to fade the body, which faded EVERYTHING within the body, including your form.
2) Remove "width=100%" from your INPUT parts in the CSS and it will not stretch across the screen.
Body opacity affects everything in the body, so don't do it there.
Instead put the background image in a div
<div id="background"></div>
Then the css for it
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
opacity: 0.8;
filter:alpha(opacity=80);
}
For the input fields make sure not to have the width as 100%
If you want to have columns then check out:
https://www.w3schools.com/howto/howto_css_three_columns.asp
/*
Make the background in a div
*/
.bg {
width: 100%;
height: 100%;
position: fixed;
background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
background-position: center;
background-repeat: no-repeat;
opacity: 0.2;
z-index: -1;
}
form {
border: 3px solid #f1f1f1;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #8C1515;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
font-size: 15px;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: left;
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="login.css" />
</head>
<body>
<!-- the div that contains the background -->
<div class="bg"></div>
<form action="/action_page.php" method="post">
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</body>
</html>
Please see the code snippets for the effect you want to achieve.
body {
background-image: url(https://wallpaperplay.com/walls/full/e/d/e/104382.jpg);
background-size: cover;
}
form {
border: 3px solid #f1f1f1;
}
input[type=text],
input[type=password] {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #8C1515;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
font-size: 15px;
width: 50%;
}
button:hover {
opacity: 0.8;
}
.container {
padding: 16px 16px 16px 180px;
background-color: rgba(238, 238, 238, 0.3);
;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: left;
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="login.css" />
</head>
<body>
<form action="/action_page.php" method="post">
<div class="container">
<label for="uname"><b>Username</b></label><br>
<input type="text" placeholder="Enter Username" name="uname" required><br>
<label for="psw"><b>Password</b></label><br>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button><br>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</body>
</html>
I have a problem with my input.
As you can see, my input is taking up too much space. It doesn't have margin or padding.
Here's my code (I am using Boilerplate v5.3.0).
How can I fix it so it just takes the space that it needs?
$(document).ready(function() {
$('.selectList').hide();
$('.selectorWrapper a').click(function() {
hideShow(this);
});
$('ul.selectList li').click(function() {
changeText(this);
validate();
});
$('#email').keydown(function() {
var correo = $('#email').val();
if (validateMail(correo)) {
$('#email').css('borderColor', '#87e466');
validate();
} else {
$('#email').css('borderColor', '#ca3535');
validate();
}
});
function validateMail(email) {
var re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
console.log(re.test(email));
return re.test(email);
}
function validate() {
var select1 = $('#selection1').text();
var select2 = $('#selection2').text();
var select3 = $('#selection3').val();
var email = $('#email').val();
if (select1 != 'Marca' && select2 != 'Modelo' && select3 != 'Anio' && validateMail(email)) {
$('#submitBtn').css({
'backgroundColor': '#bbd550',
'boxShadow': '0px 3px 0px 0px #9fbc2d'
});
$('#submitBtn').removeClass('disableClick');
} else {
$('#submitBtn').css({
'backgroundColor': '#808080',
'boxShadow': '0px 3px 0px 0px #636161'
});
$('#submitBtn').addClass('disableClick');
}
}
function hideShow(element) {
var thisId = $(element).attr('id');
var isHidden = $('#' + thisId).next().css('display');
console.log(isHidden);
if (isHidden == 'none') {
$('#' + thisId).next().slideDown();
} else {
$('#' + thisId).next().slideUp();
}
}
function changeText(element) {
var text = $(element).text();
$(element).parent().prev().text(text);
$(element).parent().prev().append('<i class="fa fa-chevron-down"></i>');
$(element).parent().slideUp();
$(element).parent().prev().css('borderColor', '#87e466')
}
});
html {
margin: 0;
padding: 0;
box-sizing: border-box;
}
input {
outline: none;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
.disableClick {
pointer-events: none;
}
label {
display: none;
}
h3,
h2 {
margin: 0 auto;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
header.site-header {
background-color: #000000;
width: 100%;
}
header.site-header h3 {
text-align: center;
color: #ffffff;
padding: 15px 0;
font-weight: normal;
font-size: 30px;
}
header.site-header h3 span {
font-weight: bold;
}
div.banner {
border-bottom: 5px solid #36aadd;
}
div.banner h2 {
font-size: 2em;
text-align: center;
font-weight: bold;
color: #36aadd;
padding: 15px 10px 10px 10px;
}
div.banner p {
color: #888888;
text-align: center;
margin: 0;
font-size: 1.2em;
padding-bottom: 50px;
font-family: 'Open Sans', sans-serif;
}
div.form {
padding: 20px 10px;
margin: 0;
background-color: #eeeeee;
}
a.selectButton {
text-decoration: none;
padding: 10px;
color: #888888;
background-color: #ffffff;
border: 1px solid #d0d0d0;
display: block;
width: 100%;
margin: 0;
}
a.selectButton i {
color: #d0d0d0;
float: right;
padding-right: 10px;
}
ul.selectList {
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #d0d0d0;
width: 100%;
position: absolute;
}
ul.selectList li {
width: 100%;
padding: 10px 0 10px 10px;
display: block;
background-color: #ffffff;
}
ul.selectList li a {
display: block;
text-decoration: none;
color: #888888;
}
ul.selectList li:hover {
background-color: #d0d0d0;
}
div.selectorWrapper input {
margin: 0;
padding: 10px;
width: 100%;
border: 1px solid #d0d0d0;
border-top: none;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
div.selectorWrapper {
/*width:100%;*/
}
.selectorWrapper:nth-child(2),
.selectorWrapper:nth-child(3) {
width: 50%;
float: left;
}
div.selectorWrapper .button {
background-color: #808080;
color: #FFFFFF;
margin-top: 30px;
border-radius: 4px;
margin-bottom: 20px;
font-size: 30px;
box-shadow: 0px 3px 0px 0px #636161;
border: none;
font-family: 'Open Sans', sans-serif;
}
div.recuperar {
text-align: center;
padding: 20px;
}
div.recuperar a.recupera-link {
text-decoration: none;
color: #5faadb;
font-size: 18px;
font-family: 'Open Sans', sans-serif;
}
.contenedorA {
position: relative;
}
#media only screen and (min-width: 768px) {
label {
display: block;
width: 30%;
float: left;
padding: 10px 0 0 15px;
text-align: left;
font-size: 0.9em;
}
div.banner {
border: none;
}
div.form {
background: #ffffff;
}
.contenedorA {
padding: 100px 50px 0 50px;
}
.contenedor {
width: 96%;
margin: 0 auto!important;
box-shadow: 0px 0px 10px 3px #f9f9f9;
margin-top: 50px;
}
div.selectorWrapper {
width: 80%;
margin: 20px auto;
}
div.selectorWrapper input,
div.selectorWrapper a.selectButton {
width: 70%;
float: right;
margin: 0 auto;
}
.selectorWrapper:nth-child(2),
.selectorWrapper:nth-child(3) {
width: 80%;
float: none;
position: relative;
}
ul.selectList {
position: relative;
margin-left: 420px;
margin-top: 44px;
}
div.selectorWrapper input {
border: 1px solid #d0d0d0;
}
div.recuperar {
padding-left: 100px;
}
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel='stylesheet' href='css/main.css' type="text/css">
<!--<link rel='stylesheet' href='css/normalize.css' type="text/css">-->
</head>
<body>
<header class='site-header'>
<h3><span>compara</span>online</h3>
</header>
<div class=contenedorA>
<div class="contenedor">
<div class="banner">
<h2>Cotiza tu Seguro Automotriz</h2>
<p>Resultados instantaneos!</p>
</div>
<div class="form clearfix">
<form method="post" action="">
<div class="selectorWrapper clearfix">
<label>Marca : </label>
<a class="selectButton" id="selection1" href="#">Marca<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li>Hyundai</li>
<li>Toyota</li>
<li>Nissan</li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<label>Modelo : </label>
<a class="selectButton" id="selection2" href="#">Modelo<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li>Sedan</li>
<li>SUV</li>
<li>Pick-up</li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<label>Anio: </label>
<a class="selectButton" id="selection3" href="#">Anio<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li>2017</li>
<li>2016</li>
<li>2015</li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<!--<label>Email : </label>-->
<input type='email' name='email' class="clearfix" id='email' placeholder='Email' required>
</div>
<div class="selectorWrapper clearfix">
<input type='submit' class="button disableClick" id='submitBtn' value="Cotizar">
</div>
</form>
<div class="recuperar">
<a class="recupera-link" href="#">Recuperar cotizacion</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src='js/main.js' type="text/javascript"></script>
When you float an element, you remove it from the normal flow of the document. As a result, other block elements don't respect their space.
Since both elements on the line (Modelo and Anio) are float: left, the next block element (Email) doesn't see them, and takes their space. So the Email div now lies hidden under the split elements.
However, the input element inside the Email div is not a block element. It's an inline element, by default. And inline elements respect the space of floated elements. (This is how text is able to wrap around floated images.)
So in your code, while the Email div shifts below the split element (on the z-axis), the input inside the Email div stays below the split element (on the y-axis).
When you highlight the Email element in dev tools, it illustrates this split across two rows.
One solution is to give the Email div display: inline-block and width: 100%.
div.selectorWrapper:nth-child(4) {
display: inline-block;
width: 100%;
}
Another solution is to add clear: both to the Email div. (Read more about clearing floats.)
div.selectorWrapper:nth-child(4) {
clear: both;
}
$(document).ready(function() {
$('.selectList').hide();
$('.selectorWrapper a').click(function() {
hideShow(this);
});
$('ul.selectList li').click(function() {
changeText(this);
validate();
});
$('#email').keydown(function() {
var correo = $('#email').val();
if (validateMail(correo)) {
$('#email').css('borderColor', '#87e466');
validate();
} else {
$('#email').css('borderColor', '#ca3535');
validate();
}
});
function validateMail(email) {
var re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
console.log(re.test(email));
return re.test(email);
}
function validate() {
var select1 = $('#selection1').text();
var select2 = $('#selection2').text();
var select3 = $('#selection3').val();
var email = $('#email').val();
if (select1 != 'Marca' && select2 != 'Modelo' && select3 != 'Anio' && validateMail(email)) {
$('#submitBtn').css({
'backgroundColor': '#bbd550',
'boxShadow': '0px 3px 0px 0px #9fbc2d'
});
$('#submitBtn').removeClass('disableClick');
} else {
$('#submitBtn').css({
'backgroundColor': '#808080',
'boxShadow': '0px 3px 0px 0px #636161'
});
$('#submitBtn').addClass('disableClick');
}
}
function hideShow(element) {
var thisId = $(element).attr('id');
var isHidden = $('#' + thisId).next().css('display');
console.log(isHidden);
if (isHidden == 'none') {
$('#' + thisId).next().slideDown();
} else {
$('#' + thisId).next().slideUp();
}
}
function changeText(element) {
var text = $(element).text();
$(element).parent().prev().text(text);
$(element).parent().prev().append('<i class="fa fa-chevron-down"></i>');
$(element).parent().slideUp();
$(element).parent().prev().css('borderColor', '#87e466')
}
});
div.selectorWrapper:nth-child(4) {
clear: both;
}
html {
margin: 0;
padding: 0;
box-sizing: border-box;
}
input {
outline: none;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
.disableClick {
pointer-events: none;
}
label {
display: none;
}
h3,
h2 {
margin: 0 auto;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
header.site-header {
background-color: #000000;
width: 100%;
}
header.site-header h3 {
text-align: center;
color: #ffffff;
padding: 15px 0;
font-weight: normal;
font-size: 30px;
}
header.site-header h3 span {
font-weight: bold;
}
div.banner {
border-bottom: 5px solid #36aadd;
}
div.banner h2 {
font-size: 2em;
text-align: center;
font-weight: bold;
color: #36aadd;
padding: 15px 10px 10px 10px;
}
div.banner p {
color: #888888;
text-align: center;
margin: 0;
font-size: 1.2em;
padding-bottom: 50px;
font-family: 'Open Sans', sans-serif;
}
div.form {
padding: 20px 10px;
margin: 0;
background-color: #eeeeee;
}
a.selectButton {
text-decoration: none;
padding: 10px;
color: #888888;
background-color: #ffffff;
border: 1px solid #d0d0d0;
display: block;
width: 100%;
margin: 0;
}
a.selectButton i {
color: #d0d0d0;
float: right;
padding-right: 10px;
}
ul.selectList {
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #d0d0d0;
width: 100%;
position: absolute;
}
ul.selectList li {
width: 100%;
padding: 10px 0 10px 10px;
display: block;
background-color: #ffffff;
}
ul.selectList li a {
display: block;
text-decoration: none;
color: #888888;
}
ul.selectList li:hover {
background-color: #d0d0d0;
}
div.selectorWrapper input {
margin: 0;
padding: 10px;
width: 100%;
border: 1px solid #d0d0d0;
border-top: none;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
div.selectorWrapper {
/*width:100%;*/
}
.selectorWrapper:nth-child(2),
.selectorWrapper:nth-child(3) {
width: 50%;
float: left;
}
div.selectorWrapper .button {
background-color: #808080;
color: #FFFFFF;
margin-top: 30px;
border-radius: 4px;
margin-bottom: 20px;
font-size: 30px;
box-shadow: 0px 3px 0px 0px #636161;
border: none;
font-family: 'Open Sans', sans-serif;
}
div.recuperar {
text-align: center;
padding: 20px;
}
div.recuperar a.recupera-link {
text-decoration: none;
color: #5faadb;
font-size: 18px;
font-family: 'Open Sans', sans-serif;
}
.contenedorA {
position: relative;
}
#media only screen and (min-width: 768px) {
label {
display: block;
width: 30%;
float: left;
padding: 10px 0 0 15px;
text-align: left;
font-size: 0.9em;
}
div.banner {
border: none;
}
div.form {
background: #ffffff;
}
.contenedorA {
padding: 100px 50px 0 50px;
}
.contenedor {
width: 96%;
margin: 0 auto!important;
box-shadow: 0px 0px 10px 3px #f9f9f9;
margin-top: 50px;
}
div.selectorWrapper {
width: 80%;
margin: 20px auto;
}
div.selectorWrapper input,
div.selectorWrapper a.selectButton {
width: 70%;
float: right;
margin: 0 auto;
}
.selectorWrapper:nth-child(2),
.selectorWrapper:nth-child(3) {
width: 80%;
float: none;
position: relative;
}
ul.selectList {
position: relative;
margin-left: 420px;
margin-top: 44px;
}
div.selectorWrapper input {
border: 1px solid #d0d0d0;
}
div.recuperar {
padding-left: 100px;
}
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel='stylesheet' href='css/main.css' type="text/css">
<!--<link rel='stylesheet' href='css/normalize.css' type="text/css">-->
</head>
<body>
<header class='site-header'>
<h3><span>compara</span>online</h3>
</header>
<div class=contenedorA>
<div class="contenedor">
<div class="banner">
<h2>Cotiza tu Seguro Automotriz</h2>
<p>Resultados instantaneos!</p>
</div>
<div class="form clearfix">
<form method="post" action="">
<div class="selectorWrapper clearfix">
<label>Marca : </label>
<a class="selectButton" id="selection1" href="#">Marca<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li>Hyundai</li>
<li>Toyota</li>
<li>Nissan</li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<label>Modelo : </label>
<a class="selectButton" id="selection2" href="#">Modelo<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li>Sedan</li>
<li>SUV</li>
<li>Pick-up</li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<label>Anio: </label>
<a class="selectButton" id="selection3" href="#">Anio<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li>2017</li>
<li>2016</li>
<li>2015</li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<!--<label>Email : </label>-->
<input type='email' name='email' class="clearfix" id='email' placeholder='Email' required>
</div>
<div class="selectorWrapper clearfix">
<input type='submit' class="button disableClick" id='submitBtn' value="Cotizar">
</div>
</form>
<div class="recuperar">
<a class="recupera-link" href="#">Recuperar cotizacion</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src='js/main.js' type="text/javascript"></script>
In your question you are showing the properties of div, check properties of a tag inside div. The a tag is having padding:10px;.
This is happening because a.selectButton has padding of 10px. You can remove it completely or you can only remove the left padding to fix the problem.
a.selectButton {
padding-left: 0;
}
Insert the above code in your style tag to fix the problem.
When I try to add float left or display inline, things break. Currently, I have a max-width of 1000px for the form. What I was hoping is somehow, the first, and last name will automatically float side by side if it is wide enough. So perhaps a min-width for inputs First and Last name?
Important note: I wrote this to test out writing CSS DRY code. You notice if you change the font size, the whole project changes size, So this is important to me. Also, I do not want to use media queries.
I am aware that I may need to change my approach, and I am open to that as well. Not so much looking for an exact code answer.
form {
text-align: center;
}
form ul, form li, form input, form label {
box-sizing: border-box;
margin: 0; padding: 0;
}
form ul {
font-size: 100%;
border: 3px solid #000;
border-radius: .3em;
max-width: 1000px;
margin: 50px auto;
list-style: none;
overflow: hidden;
}
form li {
position: relative;
border-bottom: inherit;
border-bottom: 3px solid;
}
form label {
position: absolute;
border-bottom: 1px dotted;
border-bottom-color: inherit;
width: 100%;
padding: .3em .3em;
padding-bottom: .1em;;
top: 0; left: 0;
font-size: .6em;
text-transform: uppercase;
}
form input, form input:focus {
text-transform: capitalize;
text-align: inherit;
background: transparent;
border: none;
width: 100%;
font-size: 2em;
padding: .7em .1em;
padding-bottom: .2em;;
}
form input:focus {
background-color: rgba(255, 255, 0, .2);
}
form input[type="submit"] {
text-transform: uppercase;
padding-bottom: 1.8em;
font-size: .6em;
height: 1.5em;
background-color: #ddd;
}
<form action="">
<ul>
<li>
<input id="first-name" type="text" autofocus>
<label for="first-name">First Name</label>
</li>
<li>
<input id="last-name" type="text">
<label for="last-name">Last Name</label>
</li>
<li>
<input id="username" type="text">
<label for="username">Username</label>
</li>
<li>
<input type="submit" name="submit">
</li>
</ul>
</form>
Flexbox is the most modern solution to this problem. However, remember to add the necessary prefixes for some browsers. If IE9 support is necessary, see the float solution below:
HTML
<form action="">
<ul>
<li class="split">
<input id="first-name" type="text" autofocus>
<label for="first-name">First Name</label>
</li>
<li class="split">
<input id="last-name" type="text">
<label for="last-name">Last Name</label>
</li>
<li class="fill">
<input id="username" type="text">
<label for="username">Username</label>
</li>
<input type="submit" name="submit">
</ul>
</form>
CSS
form {
text-align: center;
}
form ul, form li, form input, form label {
box-sizing: border-box;
margin: 0; padding: 0;
}
form ul {
font-size: 100%;
border: 3px solid #000;
border-radius: .3em;
max-width: 1000px;
margin: 50px auto;
list-style: none;
overflow: hidden;
}
form li {
position: relative;
border-bottom: inherit;
border-bottom: 3px solid;
}
form label {
position: absolute;
border-bottom: 1px dotted;
border-bottom-color: inherit;
width: 100%;
padding: .3em .3em;
padding-bottom: .1em;;
top: 0; left: 0;
font-size: .6em;
text-transform: uppercase;
}
form input, form input:focus {
text-transform: capitalize;
text-align: inherit;
background: transparent;
border: none;
width: 100%;
font-size: 2em;
padding: .7em .1em;
padding-bottom: .2em;;
}
form input:focus {
background-color: rgba(255, 255, 0, .2);
}
form input[type="submit"] {
text-transform: uppercase;
padding-bottom: 1.8em;
font-size: .6em;
height: 1.5em;
background-color: #ddd;
}
#media only screen and (min-width: 768px) {
li {
clear: both;
}
li.split {
width: 50%;
float: left;
clear: none;
}
}
https://jsfiddle.net/qefo9eLr/
.fl-name {
display: flex;
flex-direction: row;
}
you can try to use bootstrap grid system
this way u can have the inputs into columns
bootstrap grid system
look at this fiddle:
gri system sample
<div class='row'>
<div class="col-xs-2">Hi</div>
<div class="col-xs-2">Hi</div>
in your case col-xs-6 will give you 2 columns fullwidth
Not exactly sure if this is what you're going for, but it seems to fit your criteria.
form {
text-align: center;
}
form ul,
form li,
form input,
form label {
box-sizing: border-box;
margin: 0;
padding: 0;
}
form ul {
font-size: 100%;
border: 3px solid #000;
border-radius: .3em;
max-width: 1000px;
margin: 50px auto;
list-style: none;
overflow: hidden;
}
form li {
position: relative;
border-bottom: inherit;
border-bottom: 3px solid;
}
form label {
position: absolute;
border-bottom: 1px dotted;
border-bottom-color: inherit;
width: 100%;
padding: .3em .3em;
padding-bottom: .1em;
;
top: 0;
left: 0;
font-size: .6em;
text-transform: uppercase;
}
form input,
form input:focus {
text-transform: capitalize;
}
form #fl-name {
display: inline-block;
}
form .floatMe {
float: left;
}
form .clearMe {
clear: right;
}
<form action="">
<ul>
<div class="fl-name">
<li class="floatMe">
<input id="first-name" type="text" autofocus>
<label for="first-name">First Name</label>
</li>
<li class="floatMe clearMe">
<input id="last-name" type="text">
<label for="last-name">Last Name</label>
</li>
</div>
<li>
<input id="username" type="text">
<label for="username">Username</label>
</li>
<input type="submit" name="submit">
</ul>
</form>
Here is another alternative using our old faithful floats: https://jsfiddle.net/mvpu6s5o/3/
The main difference is basically here:
form li {
width: 33.33%;
float: left;
}
form li:nth-child(3) {
float: right;
}
form li:last-child {
width: 100%;
clear: both;
}
I used a width with percentage to keep it fluid, so it'll adjust to different screen sizes. The li:nth-child(3) float the last input to the right, so we can get rid of a small gap at the end due to the 33.33% width. form li:last-child is used to clear both floats to the last input (since this too is an li).
I just change the semantic and apply flexbox. This is the result:
*, *:before, *:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
align-items: center;
/background-color: #EB6361;
display: flex;
height: 100vh;
justify-content: center;
}
form {
box-shadow: 0 0 0 8px rgba(204,204,204,.85);
border-radius: 5px;
width: 500px;
}
form header {
background-color: #1ABC9C;
}
form header p {
color: #FFF;
font-family: 'ubuntu';
font-size: 15px;
padding: 15px 10px;
text-align: center;
}
form .body {
background-color: #EEE;
padding: 15px 20px;
}
form .body .block {
border: 2px solid #333;
border-radius: 4px;
overflow: hidden;
}
form .body .block:not(first-of-type) {
margin-top: 10px;
}
form .body .block:first-of-type > .group {
width: 98%;
}
form .body .block:first-of-type {
display: flex;
}
form .body .block .group {
display: flex;
flex-flow: column-reverse nowrap;
overflow: hidden;
}
form .body .block:first-of-type .group:first-of-type {
border-right: 2px solid #333;
}
form input {
background-color: transparent;
border: none;
color: #555;
font-size: 22pt;
padding: 6px 10px;
text-align: center;
}
form input:focus, form input:focus + label {
background-color: #F7F8E0;
}
form label {
border-bottom: 1px dotted #bbb;
color: #555;
font-family: 'ubuntu';
font-size: 11px;
padding: 2px;
text-align: center;
text-transform: uppercase;
}
form footer {
overflow: hidden;
}
form footer button {
background-color: #F39C12;
color: #FFF;
cursor: pointer;
width: 100%;
border: none;
padding: 4px;
}
<form action="">
<header>
<p>Submit Query Form</p>
</header>
<section class="body">
<div class="block">
<div class="group">
<input type="text" />
<label for="">First Name</label>
</div>
<div class="group">
<input type="text" />
<label for="">Last Name</label>
</div>
</div>
<div class="block">
<div class="group">
<input type="text" />
<label for="">Username</label>
</div>
</div>
</section>
<footer>
<button>Submit query</button>
</footer>
</form>
A very simple solution is with Flexbox.
Set the parent element to display type 'flex'.
Also set up flex wrap: wrap // This way the children will wrap if needed.
The children become flex objects. Since I want them to be even, I set them both to flex grow: 1
Set the children to flex-basis as 300px. // This is almost like a minimum width. This triggers the wrap.
body {
padding: 50px;
}
.main {
background-color: #e9e9e9;
display: flex;
flex-wrap: wrap;
}
.main input {
background-color: #e9e9e9;
}
.one {
flex-grow: 1;
flex-basis: 300px
}
.two {
flex-grow: 1;
flex-basis: 300px;
}
<head>
<link rel="stylesheet" href="inline.css">
</head>
<body>
<form class="main">
<input type="text" class="one">
<input type="text" class="two">
</form>
</body>