I've been stuck on problem of my HTML form working everywhere except Safari on iOS. I've done searching, and tried what others seem to have sometimes fixed it in CSS. However, doesn't work for me.
Here is HTML snippet:
<input type="text" id="first_name" name="first_name" placeholder="First Name*">
And the CSS for the contact-form input:
.contact-form input{
font-weight: 500 !important;
border-radius: 5px;
font-size: 13px;
border: 1px solid #a1a3a6;
background: #f6f7f8;
color: #777 !important;
outline: none;
width: 100%;
padding: 14px;
margin: 10px 0px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.contact-form textarea{
font-weight: 500 !important;
border-radius: 5px;
font-size: 13px;
border: 1px solid #a1a3a6;
background: #f6f7f8;
color: #777 !important;
outline: none;
width: 100%;
padding: 14px;
margin: 10px 0px;
margin-bottom: 5px;
min-height: 200px;
overflow: hidden;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.contact-form input:focus, .contact-form textarea:focus{
background: #fff;
border-color: #ececec;
}
.contact-form button{
display: inline-block;
background: #111;
color: #fff;
font-size: 14px;
width: 100%;
font-weight: 500;
border-radius: 10px;
padding: 15px 30px 15px 30px;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
transition: all .4s ease;
margin-top: 15px;
}
.contact-form button:hover{
background: #d21e2b;
}
.contact-form label input[type="checkbox"] {
display: block;
}
.contact-form input[type="checkbox"] {
width: 13px;
height: 13px;
padding: 15px;
margin-right:20px;
vertical-align: middle;
position: relative;
top: -1px;
*overflow: hidden;
}
<!DOCTYPE html>
<!-- Form Start -->
<form class="contact-form" id="contact-form">
<div class="col-md-12">
<p>All fields marked with * are required</p>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="first_name" name="first_name" placeholder="First Name*">
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="last_name" name="last_name" placeholder="Last Name*">
</div>
<div class="col-md-12">
<input type="email" id="email" name="email" placeholder="E-mail*">
</div>
<div class="col-md-12">
<textarea name="message" id="message" placeholder="Message"></textarea>
<div class="col-md-12">
<div class="center-holder">
<button id="submit_msg" type="submit">Send Message</button>
</div>
</div>
</form>
<!-- Form End -->
</html>
Related
I am developing one page which is responsible for displaying cart items inside that i developed one more form called Customer details it contains three radio buttons , I want those three radio buttons and labels on a same line like this i need , How to place my three radio buttons and along with their label names on a same line .like this i am getting please help me to fix this issue
Cart.vue
<template>
<div class="second -section">
<div class="details-box">
<input type="text" v-if="hide==true" class="initial-btn" placeholder="Customer Details" />
</div>
<div v-if="hide==false" class="fill-details">
<form class="address" >
<h4 class="heading">Customer Details</h4>
<div class="name">
<input type="name" required pattern="[A-Za-z]{3,10}">
<label>Name</label>
</div>
<div class="name">
<input type="text" required >
<label>Phone Number</label>
</div>
<div class="pin">
<input type="text" required >
<label>PinCode</label>
</div>
<div class="pin">
<input type="text" required>
<label>Locality</label>
</div>
<div class="address-block">
<input class="address" type="text" required>
<label>Address</label>
</div>
<div class="city-landMark">
<input type="text" required >
<label>City/Town</label>
</div>
<div class="city-landMark">
<input type="text" required>
<label>LandMark</label>
</div>
<div class="Radio-Buttons">
<p>Type</p>
<div class="radio-btns">
<input type="radio" id="Home" value="Home" name="Type" v-model="role">
<label for="Home" class="home-label">Home</label>
<input type="radio" id="Work" value="Work" name="Type" v-model="role">
<label for="Work" class="work-label">Work</label>
<input type="radio" id="Other" value="Other" name="Type" v-model="role">
<label for="Other" class="other-label">Other</label>
</div>
<div class="btn-continue">
<button type="submit" class="continue" >continue</button>
</div>
</div>
</form>
</div>
</div>
</template>
<style>
#import "colors";
.container{
// background:#FFFFFF;
margin-top:25px;
margin-left:177px;
width:774px;
height:241px;
// border:1px solid #707070;
// border-radius:1px;
}
.content{
margin-left:177px;
width: 155px;
height: 22px;
text-align: left;
font: normal normal medium 18px/22px Lato;
letter-spacing: 0px;
color: $light_black;
opacity: 1;
}
.mid-section{
display:flex;
}
.mid-section img{
width: 105px;
height: 85px;
margin-top:40px;
padding-left:36px;
opacity: 1;
}
.title-section {
margin-top:40px;
padding-left:38px;
font: normal normal normal 14px/17px Lato;
letter-spacing: 0px;
color: $light_black;
opacity: 1;
width: 180px;
height: 17px;
font-weight:300;
}
.author-section {
font: normal normal normal 12px/12px Lato;
letter-spacing: 0px;
color: #9D9D9D;
opacity: 1;
width: 63px;
height: 12px;
margin-left:141px;
margin-top:-58px;
}
.price-section{
margin-left:141px;
font: normal normal bold 15px/18px Lato;
letter-spacing: 0px;
color: $light_black;
opacity: 1;
margin-top:10px;
}
.price-section h6{
font-weight:600;
}
.plus-btn{
border-radius:45%;
width: 24px;
height: 24px;
margin-left:141px;
}
.btn{
position:absolute;
width: 151px;
height: 35px;
background: #3371B5 0% 0% no-repeat padding-box;
border-radius: 2px;
opacity: 1;
margin-top:-50px;
margin-left:800px;
font: normal normal medium 14px/17px Lato;
letter-spacing: 0px;
color: $pale_white;
text-transform: uppercase;
opacity: 1;
}
.close-btn{
background:none;
border:none;
margin-top:30px;
margin-left:650px;
}
.fa-minus-circle{
font-size: larger;
background:none;
border: 1px solid $grey_white;
opacity: 1;
margin-left:141px;
}
.fa-plus-circle{
font-size: larger;
background: none;
border: 1px solid $grey_white;
opacity: 1;
}
.icons .rectangle{
width: 41px;
height: 24px;
}
.initial-btn{
width: 774px;
height: 60px;
border: 1px solid #DCDCDC;
border-radius: 1px;
font: normal normal normal 15px/18px Lato;
letter-spacing: 0px;
color: #333232;
opacity: 1;
margin-left:177px;
margin-top:5px;
}
.fill-details{
width: 774px;
height: 450px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #DCDCDC;
border-radius: 1px;
opacity: 1;
margin-left:177px;
border: 1px solid #DCDCDC;
}
.form{
position: absolute;
transform: translate(-50%, -50%);
border-radius: 10px;
width: 800px;
padding: 25px;
margin-left:177px;
}
.heading{
width: 185px;
height: 18px;
text-align: left;
font: normal normal normal 19px/18px Lato;
letter-spacing: 0px;
color: #333232;
opacity: 1;
padding-left:36px;
}
.address h4 {
font-weight: 300;
}
.name {
display: inline-block;
padding-left:36px;
}
input[type="name"] {
display: block;
margin: 30px 0 0 10px;
width: 251px;
}
.name input[type="text"]{
display: block;
margin: 30px 0 0 10px;
width: 251px;
}
.pin input[type="text"]{
display: block;
margin: 30px 0 0 10px;
width: 251px;
}
.pin{
padding-left:36px;
margin-top:-35px;
display: inline-block;
}
.city-landMark{
display: inline-block;
padding-left:36px;
margin-top:-35px;
}
.city-landMark input[type="text"]{
display: block;
margin: 30px 0 0 10px;
width: 251px;
}
.address-block input[type="text"]{
display: block;
margin: 30px 0 0 10px;
width: 550px;
height:50px;
}
.address-block{
padding-left:36px;
margin-top:-35px;
display: inline-block;
}
.Radio-Buttons p{
padding-left: 50px;
}
#home-label{
padding-top:50px;
}
.btn-continue{
padding-left:550px;
}
.continue{
width: 160px;
height: 35px;
background: #3371B5 0% 0% no-repeat padding-box;
border-radius: 3px;
opacity: 1;
font: normal normal medium 14px/17px Lato;
letter-spacing: 0px;
color: #FFFFFF;
text-transform: uppercase;
opacity: 1;
}
.home-label{
padding-left: 25px;
}
form input {
outline: none;
border: 1px solid #9c9c9c;
border-radius: 5px;
padding: 0 10px;
height: 35px;
font-size: 15px;
margin-left:177px;
}
input:focus {
border: 1.5px solid #1f52f9;
}
form label {
position: relative;
font-family: roboto;
color: #555;
font-size: 15px;
pointer-events: none;
left: 20px;
top: -28px;
transition: .2s all;
}
input:focus~label,
input:valid~label {
top: -49px;
left: 15px;
background: #fff;
padding: 0 5px;
font-size: 10px;
color: #1f52f9;
}
</style>
You have directly use the element selector by tag name instead by class or ID. So, other label element are also affected by that styling.
Please review your CSS code and give property to specific element by using class or ID or other selector instead of directly selecting by tag name.
I wrapped each radio buttons in a div and made those div a flexbox and gave them a gap to space out.
.radio-btns{
display: flex;
gap: 3rem;
}
<div class="radio-btns">
<div>
<input type="radio" id="Home" value="Home" name="Type" v-model="role">
<label for="Home">Home</label>
</div>
<div>
<input type="radio" id="Work" value="Work" name="Type" v-model="role">
<label for="Work" class="work-label">Work</label>
</div>
<div>
<input type="radio" id="Other" value="Other" name="Type" v-model="role">
<label for="Other">Other</label>
</div>
</div>
Below is a code for a contact-us form I'm creating and I gave one of the second div the class name contact-form with the background:rgba(0, 0, 0, 0.8), but I want the background color to center and fit the other div's content instead of being 100% on screens.
I have tried using margin-left:50px and margin-right:50px but it only shifts a little but it doesn't produce the desired result.
codepen.io link
body {
background: linear-gradient(rgb(0, 0, 150, 0.5),rgb(0, 0, 0, 0.5)),url(https://backgroundcheckall.com/wp-content/uploads/2017/12/contact-background-image-8.jpg);
background-size: cover;
background-position: center;
font-family: sans-serif;
}
.contact-title h2 {
font-size: 16px;
margin: 50px;
}
.contact-title {
margin-top: 100px;
color: #fff;
text-transform: uppercase;
transition: all 4s ease-in-out;
}
.contact-form {
background: rgba(0, 0, 0, 0.8);
margin-left: 50px;
margin-right: 50px;
border-radius: 5px;
text-align: center;
opacity: 0.5;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.13);
}
form {
margin-top: 50px;
transition: all 4s ease-in-out;
}
.form-control {
width: 50%;
background: transparent;
border: none;
outline: none;
border-bottom: 1px solid grey;
color: #fff!important;
font-size: 18px;
margin-bottom: 16px;
}
input {
height: 45px;
}
form .submit {
background: #ff5722;
border-color: transparent;
color: #fff;
font-size: 20px;
font-weight: bold;
height: 50px;
margin-top: 20px;
}
form .submit:hover {
background-color: #f44336;
cursor: pointer;
}
.contact-menu {
background-color: black;
margin: 8px 8px 8px 8px;
opacity: 0.8;
overflow: hidden;
height: 50px;
}
.contact-menu a {
color: #f2f2f2;
margin: 0px 0 0 0;
padding: 14px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
}
.contact-menu a:hover {
background-color: #ddd;
color: #000;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="UX-Compatible" content="ie=edge">
<title>BENDEVI-Contact </title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="contact-menu">
Home
Foreign
AFrica
Unity
</div>
<div class="contact-title">
<h2>Contact Us</h2>
</div>
<div class="contact-form">
<form id="contact-form" action="" method="post">
<input type="text" name="name" class="form-control" placeholder="Your Name" value="" required><br>
<input type="email" name="email" class="form-control" placeholder="Your Email" value="" required><br>
<input type="text" name="Subject" class="form-control" placeholder="Subject" value="" required><br>
<textarea name="message" class="form-control" placeholder="Message" rows="4" required></textarea><br>
<input type="submit" class="form-control submit" value="SEND MESSAGE">
</form>
</div>
</body>
</html>
Based on your description you would like to see the form elements to be 50% of the screen, but the outside div not going wider than the form itself.
You need to do add the margins in unit % of the amount that cuts of the width of the form. In my example 25%. And have the form elements 100% width inside the form, so they take the full width of the cut off outside element. By using % it will flow with every screenwidth the desired result. (Play around with the margin's % to get the desired result).
body {
background: linear-gradient(rgb(0, 0, 150, 0.5), rgb(0, 0, 0, 0.5)), url(https://backgroundcheckall.com/wp-content/uploads/2017/12/contact-background-image-8.jpg);
background-size: cover;
background-position: center;
font-family: sans-serif;
}
.contact-title h2 {
font-size: 16px;
margin: 50px;
}
.contact-title {
margin-top: 100px;
color: #fff;
text-transform: uppercase;
transition: all 4s ease-in-out;
}
.contact-form {
background: rgba(0, 0, 0, 0.8);
margin-left: 25%;
margin-right: 25%;
border-radius: 5px;
text-align: center;
opacity: 0.5;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.13);
}
form {
margin-top: 50px;
padding: 5%;
transition: all 4s ease-in-out;
}
.form-control {
width: 100%;
background: transparent;
border: none;
outline: none;
border-bottom: 1px solid grey;
color: #fff !important;
font-size: 18px;
margin-bottom: 16px;
}
input {
height: 45px;
}
form .submit {
background: #ff5722;
border-color: transparent;
color: #fff;
font-size: 20px;
font-weight: bold;
height: 50px;
margin-top: 20px;
}
form .submit:hover {
background-color: #f44336;
cursor: pointer;
}
.contact-menu {
background-color: black;
margin: 8px 8px 8px 8px;
opacity: 0.8;
overflow: hidden;
height: 50px;
}
.contact-menu a {
color: #f2f2f2;
margin: 0px 0 0 0;
padding: 14px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
}
.contact-menu a:hover {
background-color: #ddd;
color: #000;
}
<div class="contact-menu">
Home
Foreign
AFrica
Unity
</div>
<div class="contact-title">
<h2>Contact Us</h2>
</div>
<div class="contact-form">
<form id="contact-form" action="" method="post">
<input type="text" name="name" class="form-control" placeholder="Your Name" value="" required><br>
<input type="email" name="email" class="form-control" placeholder="Your Email" value="" required><br>
<input type="text" name="Subject" class="form-control" placeholder="Subject" value="" required><br>
<textarea name="message" class="form-control" placeholder="Message" rows="4" required></textarea><br>
<input type="submit" class="form-control submit" value="SEND MESSAGE">
</form>
</div>
So I'm trying to make a dropdown list overlap the elements below when expanded. Unfortunately, even when elements in the same stacking context have a position, and dropdown container div set to a z-index of 2, the issue still persists; instead of overlapping the elements below, it shifts them down. I have also attempted shuffling around the stacking context by adding the opacity property to various elements, but that hasn't worked either. The code can be seen below:
#firstone {
z-index: 2;
}
#contain {
height: 400px;
width: 400px;
background-color: rgba(100, 25, 25, 0.2);
}
body {
text-align: center;
}
input:focus {
outline: none;
}
.fancy_input_box {
text-align: left;
display: inline-block;
margin: 40px 3% 1px;
position: relative;
}
.fancy_input {
font: 15px/24px "Lato", Arial, sans-serif;
color: #aaa;
box-sizing: border-box;
letter-spacing: 1px;
border: 0;
padding: 7px 7px;
border: 1px solid #ccc;
position: relative;
background: transparent;
}
.fancy_input:focus~.dropdown-content {
display: block;
cursor: default;
}
.fancy_input:focus~.dropdown-content>span {
display: block;
cursor: default;
}
.dropdown-content {
display: none;
background-color: rgba(0, 0, 0, 0.2);
width: 222px;
overflow: auto;
position: relative;
}
.dropdown-content:active {
display: block;
}
.dropdown-content>span {
padding: 12px 16px;
display: none;
}
.dropdown-content>span:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.fancy_input~.fancy_label {
position: absolute;
left: 14px;
width: 100%;
top: 10px;
color: #aaa;
letter-spacing: 0.5px;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
z-index: -1;
}
.fancy_input:focus~.fancy_label {
top: -18px;
left: 1px;
font-size: 12px;
color: grey !important;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
}
.fancy_input:focus {
border: 1px solid grey !important;
}
.fancy_input:not(focus):valid~.fancy_label {
top: -18px;
font-size: 12px;
left: 1px;
color: #aaa;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div id="contain">
<div id="firstone" class="fancy_input_box">
<input class="fancy_input" type="text" placeholder="" maxlength="25" size="25" required>
<label class="fancy_label">Search</label>
<div class="dropdown-content">
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
<span>e</span>
</div>
</div>
<div class="fancy_input_box">
<input class="fancy_input" type="text" placeholder="" maxlength="4" size="10">
<label class="fancy_label">Thing</label>
</div>
<br>
<div>
<div class="fancy_input_box">
<input class="fancy_input" type="text" placeholder="" maxlength="4" size="10">
<label class="fancy_label">stuff</label>
</div>
<div class="fancy_input_box">
<input class="fancy_input" type="text" placeholder="" maxlength="4" size="10">
<label class="fancy_label">more stuff</label>
</div>
<div class="fancy_input_box">
<input class="fancy_input" type="text" placeholder="" maxlength="4" size="10">
<label class="fancy_label">more stuff</label>
</div>
</div>
</div>
</body>
</html>
You dropdown content should be absolute positioned.
Update your dropdown styles as shown below :
.dropdown-content {
display: none;
background-color: rgba(0, 0, 0, 0.2);
width: 222px;
overflow: auto;
position: absolute;
left: 0;
top: 100%;
}
Try following code just set position absolute. also i change width 100% in dropdown-content div for good design.
#firstone {
z-index: 2;
}
#contain {
height: 400px;
width: 400px;
background-color: rgba(100, 25, 25, 0.2);
}
body {
text-align: center;
}
input:focus {
outline: none;
}
.fancy_input_box {
text-align: left;
display: inline-block;
margin: 40px 3% 1px;
position: relative;
}
.fancy_input {
font: 15px/24px "Lato", Arial, sans-serif;
color: #aaa;
box-sizing: border-box;
letter-spacing: 1px;
border: 0;
padding: 7px 7px;
border: 1px solid #ccc;
position: relative;
background: transparent;
}
.fancy_input:focus~.dropdown-content {
display: block;
cursor: default;
}
.fancy_input:focus~.dropdown-content>span {
display: block;
cursor: default;
}
.dropdown-content {
display: none;
background-color: rgba(0, 0, 0, 0.2);
width: 100%;
overflow: auto;
position: absolute;
}
.dropdown-content:active {
display: block;
}
.dropdown-content>span {
padding: 12px 16px;
display: none;
}
.dropdown-content>span:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.fancy_input~.fancy_label {
position: absolute;
left: 14px;
width: 100%;
top: 10px;
color: #aaa;
letter-spacing: 0.5px;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
z-index: -1;
}
.fancy_input:focus~.fancy_label {
top: -18px;
left: 1px;
font-size: 12px;
color: grey !important;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
}
.fancy_input:focus {
border: 1px solid grey !important;
}
.fancy_input:not(focus):valid~.fancy_label {
top: -18px;
font-size: 12px;
left: 1px;
color: #aaa;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
}
<div id="contain">
<div id="firstone" class="fancy_input_box">
<input class="fancy_input" type="text" placeholder="" maxlength="25" size="25" required>
<label class="fancy_label">Search</label>
<div class="dropdown-content">
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
<span>e</span>
</div>
</div>
<div class="fancy_input_box">
<input class="fancy_input" type="text" placeholder="" maxlength="4" size="10">
<label class="fancy_label">Thing</label>
</div>
<br>
<div>
<div class="fancy_input_box">
<input class="fancy_input" type="text" placeholder="" maxlength="4" size="10">
<label class="fancy_label">stuff</label>
</div>
<div class="fancy_input_box">
<input class="fancy_input" type="text" placeholder="" maxlength="4" size="10">
<label class="fancy_label">more stuff</label>
</div>
<div class="fancy_input_box">
<input class="fancy_input" type="text" placeholder="" maxlength="4" size="10">
<label class="fancy_label">more stuff</label>
</div>
</div>
</div>
just add position:absoute and top:100%; in your dropdown-content class
jsfiddle from your code
.dropdown-content {
display: none;
background-color: rgba(0, 0, 0, 0.2);
width: 222px;
overflow: auto;
position: absolute;
left: 0;
top: 100%;
}
I have this email register form. I'd like to ask how to move the <select> tag next to the "Desired Email Address" field.
I think i have to do a modification to the css code.
Here's the html and the CSS (snippet) code for the specific field:
(THIS IS ADDED BECAUSE STACKOVERFLOW NEEDS MORE DETAILS qwefrqwefqwaefwqefq)
body {
background: #384047;
font-family: sans-serif;
font-size: 10px;
}
form {
background: #fff;
padding: 4em 4em 2em;
max-width: 400px;
margin: 50px auto 0;
box-shadow: 0 0 1em #222;
border-radius: 2px;
}
form h2 {
margin: 0 0 50px 0;
padding: 10px;
text-align: center;
font-size: 30px;
color: #666666;
border-bottom: solid 1px #e5e5e5;
}
form p {
margin: 0 0 3em 0;
position: relative;
}
form input[id="Email"] {
display: block;
box-sizing: border-box;
width: 60%;
outline: none;
margin: 0;
}
form input {
display: block;
box-sizing: border-box;
width: 100%;
outline: none;
margin: 0;
}
form input[type="text"],
form input[type="password"] {
background: #fff;
border: 1px solid #dbdbdb;
font-size: 1.6em;
padding: .8em .5em;
border-radius: 2px;
}
form input[type="text"]:focus,
form input[type="password"]:focus {
background: #fff;
}
form span {
display: block;
background: #F9A5A5;
padding: 2px 5px;
color: #100;
}
form input[type="submit"] {
background: rgba(148, 186, 101, 0.7);
box-shadow: 0 3px 0 0 rgba(123, 163, 73, 0.7);
border-radius: 2px;
border: none;
color: #fff;
cursor: pointer;
display: block;
font-size: 2em;
line-height: 1.6em;
margin: 2em 0 0;
outline: none;
padding: .8em 0;
text-shadow: 0 1px #68B25B;
}
form input[type="submit"]:hover {
background: #94af65;
text-shadow: 0 1px 3px rgba(70, 93, 41, 0.7);
}
form label {
position: absolute;
left: 8px;
top: 12px;
color: #999;
font-size: 16px;
display: inline-block;
padding: 4px 10px;
font-weight: 400;
background-color: rgba(255, 255, 255, 0);
-moz-transition: color 0.3s, top 0.3s, background-color 0.8s;
-o-transition: color 0.3s, top 0.3s, background-color 0.8s;
-webkit-transition: color 0.3s, top 0.3s, background-color 0.8s;
transition: color 0.3s, top 0.3s, background-color 0.8s;
}
form label.floatLabel {
top: -11px;
background-color: rgba(255, 255, 255, 0.8);
font-size: 14px;
}
form select {
background: #fff;
border: 1px solid #dbdbdb;
font-size: 1.6em;
padding: .8em .5em;
border-radius: 2px;
display: block;
}
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Mailbox Registration</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="register.php" method="post">
<h2>Create a Mailbox</h2>
<p>
<label for="Name" class="floatLabel">First Name</label>
<input id="fname" name="First_Name__1" type="text" required>
</p>
<p>
<label for="Name" class="floatLabel">Last Name</label>
<input id="lname" name="Last_Name__2" type="text" required>
</p>
<p>
<label for="Mailbox__3" class="floatLabel">Desired Email Address</label>
<input id="Email" name="Mailbox__3" type="text" required>
<select name="domain">
<option value="#limesky.ga" selected>#limesky.ga
<option value="#ircocs.ga">#ircocs.ga
</select>
</p>
<p>
<label for="password" class="floatLabel">Password</label>
<input id="password" name="Password__4" type="password" required>
</p>
<p>
<label for="confirm_password" class="floatLabel">Confirm Password</label>
<input id="confirm_password" name="confirm_password"
type="password" required>
</p>
<p>
<input type="Submit" value="Create My Account" id="Submit" name="Submit">
</p>
</form>
<script> src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3 /jquery.min.js' </script>
</body>
</html>
DO this:
CSS:
body {
background: #384047;
font-family: sans-serif;
font-size: 10px;
}
.domain {
margin-left: 253px;
margin-top: -50px;
}
HTML:
<p>
<label for="Mailbox__3" class="floatLabel">Desired Email Address</label>
<input id="Email" name="Mailbox__3" type="text" required><select class="domain" name="domain">
<option value="#limesky.ga" selected>#limesky.ga
<option value="#ircocs.ga">#ircocs.ga
</select>
</p>
Add a <br/> tag after the desired email address input box.
<input id="Email" name="Mailbox__3" type="text" required></br><select name="domain">
<option value="#limesky.ga" selected>#limesky.ga
<option value="#ircocs.ga">#ircocs.ga
</select>
I've just started to try and build a golf stats website (just for the fun of it). I'm very new to HTML and CSS, and I'm having loads of trouble with one page that just won't behave as I would expect.
I've cut the code down a bit a save space, but here is what I'm getting.
http://jsfiddle.net/fnnb1o6d/1/
I want everything to be centered like the top text boxes, but the that's not happening. I'm sure I have some terrible CSS and HTML going on here which is why I'm getting the issues, but I can't work out what it is.
The html and css are also below. Can someone please tell me how I would get this to behave as I would like?
Thanks very much
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Add Course</title>
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="add_course">
<form action="add_course.php" method="post" enctype="multipart/form-data" name="add_course_form" id="add_course_form" onsubmit="return validate_form();">
<div class="add_course_lables">
<input class="add_course_name" name="coursename" type="text" id="coursename" size="30" placeholder="Course Name" maxlength="64" />
<br />
<input name="par" type="text" id="par" size="30" placeholder="Par" maxlength="2" />
<input name="rating" type="text" id="rating" size="30" placeholder="Rating" maxlength="2" />
<input name="slope" type="text" id="slope" size="30" placeholder="Slope" maxlength="3" />
<br />
</div>
<div style="min-width: 1000px; overflow: auto; display: table; width: 1000px; text-align:center" id="add_course_table">
<div>
<div style="width:60px" id="add_course_top_row">Hole</div>
<div id="add_course_top_row">1</div>
<div id="add_course_top_row">2</div>
<div id="add_course_top_row">3</div>
<div id="add_course_top_row">4</div>
<br style="clear: left;" />
</div>
<div>
<div id="add_course_other_rows_left">Par</div>
<div id="add_course_other_rows"><input type="text" maxlength="1" name="par1"/></div>
<div id="add_course_other_rows"><input type="text" maxlength="1" name="par2"/></div>
<div id="add_course_other_rows"><input type="text" maxlength="1" name="par3"/></div>
<div id="add_course_other_rows"><input type="text" maxlength="1" name="par4"/></div>
<br style="clear: left;" />
</div>
<div>
<div id="add_course_other_rows_left">Length</div>
<div id="add_course_other_rows"><input type="text" maxlength="3" name="length1"/></div>
<div id="add_course_other_rows"><input type="text" maxlength="3" name="length2"/></div>
<div id="add_course_other_rows"><input type="text" maxlength="3" name="length3"/></div>
<div id="add_course_other_rows"><input type="text" maxlength="3" name="length4"/></div>
<br style="clear: left;" />
</div>
<div>
<div id="add_course_other_rows_left">Index</div>
<div id="add_course_other_rows"><input type="text" maxlength="2" name="index1"/></div>
<div id="add_course_other_rows"><input type="text" maxlength="2" name="index2"/></div>
<div id="add_course_other_rows"><input type="text" maxlength="2" name="index3"/></div>
<div id="add_course_other_rows"><input type="text" maxlength="2" name="index4"/></div>
</div>
</div>
<input type="submit" name="Submit" class="add_course_button" value="Add Course" />
</form>
</div>
</body>
</html>
CSS
.add_course_lables {
width: 500px;
height: 120px;
border-radius: 5px 5px 0px 0px;
margin-left: auto;
margin-right: auto;
}
.add_course_lables input {
color: #16a085;
padding: 10px;
margin-top: 5px;
width:135px;
font-size: 15px;
border: 1px solid #16a085;
border-bottom: 2px solid #16a085;
border-radius: 5px;
transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
.add_course_lables .add_course_name {
width:91.5%;
}
.add_course_lables input:focus {
border-color:#2ecc71;
outline: none;
box-shadow: 0 0 2px 1px #2ecc71;
}
.add_course_lables input:hover {
border-color:#2ecc71;
outline: none;
box-shadow: 0 0 2px 1px #2ecc71;
}
.add_course_button{
background: #16a085;
color: white;
border: 1px solid #16a085;
border-radius: 5px;
transition: background .4s linear;
padding: 10px;
font-weight: 600;
font-size: 20px;
cursor: pointer;
margin-top: 10px;
position: relative;
left: 50%;
right: 0%;
}
#add_course_top_row{
border-radius: 4px;
border-color: #FFFFFF;
border-style: solid;
background: #16A085;
color: #FFFFFF;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
text-align: center;
padding: 2px;
margin-right: 0px;
width: 30px;
border-width: thin;
display: inline-flex;
}
#add_course_other_rows_left{
color: #16a085;
border-radius: 4px;
border-color: #16a085;
border-style: solid;
border-width: thin;
background: #FFFFFF;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
text-align: center;
padding: 2px;
margin-right: 3px;
margin-top:2px;
width: 60px;
float:left;
}
#add_course_other_rows input {
color: #16a085;
border-radius: 5px;
border color:#BFBFBF;
border-style: solid;
border-width: thin;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
text-align: center;
padding: 3px;
margin-top: 2px;
margin-right:3px;
width: 30px;
float:left;
}
#add_course_other_rows input:hover {
border-color:#2ecc71;
outline: none;
box-shadow: 0 0 2px 1px #2ecc71;
}
Harry,
Absolutely. The short answer is that you just need to duplicate .add_course_lables for the other two divs you're working with.
To go into detail on how this works:
On the .add_course_lables you have a class setup showing:
.add_course_lables {
width: 500px;
height: 120px;
border-radius: 5px 5px 0px 0px;
margin-left: auto;
margin-right: auto;
}
Specifically width, and margin-left & margin-right are creating the centering for the first div.
Now, to make this easier for you, I'd like to refer you to an existing question with plenty of helpful information: How to horizontally center a <div> in another <div>?
check this it seems to align part of the page the rest is not aligning because i think that you added a
</div>
for no reason somewhere try to find it out
what i did was that i added the entire page into a new div like this
html
<div id="page">
this must be closed at the end of the code
css
#page{
width:1000px;
margin:auto;
}
http://jsfiddle.net/fnnb1o6d/2/
you need to add container to all your content,
#add_course{
margin:0 auto;
border:1px solid #ccc;
width:80%
}
DEMO
<div id="add_course_table" style="min-width: 1000px; overflow: auto; display: table; width: 1000px; text-align:center">
to
<div id="add_course_table" style="overflow: auto; display: table; margin-left: auto; margin-right: auto; width: 500px; text-align: center;">
And, You are given #add_course_other_rows in multi places, Actually #ID should be unique. change it as class. And, update this class.
.add_course_other_rows{
display:inline-block;
}
Please update this all in fiddle and let us know for the further
JSFIDDLE
HTML WILL BE:
<div id="add_course">
<form action="add_course.php" method="post" enctype="multipart/form-data" name="add_course_form" id="add_course_form" onsubmit="return validate_form();">
<div class="add_course_lables">
<input class="add_course_name" name="coursename" type="text" id="coursename" size="30" placeholder="Course Name" maxlength="64" />
<br />
<input name="par" type="text" id="par" size="30" placeholder="Par" maxlength="2" />
<input name="rating" type="text" id="rating" size="30" placeholder="Rating" maxlength="2" />
<input name="slope" type="text" id="slope" size="30" placeholder="Slope" maxlength="3" />
<br />
</div>
<div style="margin:0px auto; overflow: auto; display: table; text-align:center" id="add_course_table">
<div class="display-inline">
<div style="width:60px" id="add_course_top_row">Hole</div>
<div id="add_course_top_row">1</div>
<div id="add_course_top_row">2</div>
<div id="add_course_top_row">3</div>
<div id="add_course_top_row">4</div>
<br style="clear: left;" />
</div>
<div class="display-inline">
<div id="add_course_other_rows_left">Par</div>
<div id="add_course_other_rows">
<input type="text" maxlength="1" name="par1" />
</div>
<div id="add_course_other_rows">
<input type="text" maxlength="1" name="par2" />
</div>
<div id="add_course_other_rows">
<input type="text" maxlength="1" name="par3" />
</div>
<div id="add_course_other_rows">
<input type="text" maxlength="1" name="par4" />
</div>
<br style="clear: left;" />
</div>
<div class="display-inline">
<div id="add_course_other_rows_left">Length</div>
<div id="add_course_other_rows">
<input type="text" maxlength="3" name="length1" />
</div>
<div id="add_course_other_rows">
<input type="text" maxlength="3" name="length2" />
</div>
<div id="add_course_other_rows">
<input type="text" maxlength="3" name="length3" />
</div>
<div id="add_course_other_rows">
<input type="text" maxlength="3" name="length4" />
</div>
<br style="clear: left;" />
</div>
<div class="display-inline">
<div id="add_course_other_rows_left">Index</div>
<div id="add_course_other_rows">
<input type="text" maxlength="2" name="index1" />
</div>
<div id="add_course_other_rows">
<input type="text" maxlength="2" name="index2" />
</div>
<div id="add_course_other_rows">
<input type="text" maxlength="2" name="index3" />
</div>
<div id="add_course_other_rows">
<input type="text" maxlength="2" name="index4" />
</div>
</div>
</div>
<input type="submit" name="Submit" class="add_course_button" value="Add Course" />
</form>
</div>
CSS WILL BE:
.add_course_lables {
width: 500px;
height: 120px;
border-radius: 5px 5px 0px 0px;
margin-left: auto;
margin-right: auto;
}
.add_course_lables input {
color: #16a085;
padding: 10px;
margin-top: 5px;
width: 135px;
font-size: 15px;
border: 1px solid #16a085;
border-bottom: 2px solid #16a085;
border-radius: 5px;
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
.add_course_lables .add_course_name {
width: 91.5%;
}
.add_course_lables input:focus {
border-color: #2ecc71;
outline: none;
box-shadow: 0 0 2px 1px #2ecc71;
}
.add_course_lables input:hover {
border-color: #2ecc71;
outline: none;
box-shadow: 0 0 2px 1px #2ecc71;
}
.add_course_button {
background: #16a085;
color: white;
border: 1px solid #16a085;
border-radius: 5px;
transition: background .4s linear;
padding: 10px;
font-weight: 600;
font-size: 20px;
cursor: pointer;
margin-top: 10px;
position: relative;
left: 45%;
right: 0%;
margin-top: 20px;
}
#add_course_top_row {
border-radius: 4px;
border-color: #FFFFFF;
border-style: solid;
background: #16A085;
color: #FFFFFF;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
text-align: center;
padding: 2px;
margin-right: 0px;
width: 30px;
border-width: thin;
display: inline-flex;
}
#add_course_other_rows_left {
color: #16a085;
border-radius: 4px;
border-color: #16a085;
border-style: solid;
border-width: thin;
background: #FFFFFF;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
text-align: center;
padding: 2px;
margin-right: 3px;
margin-top: 2px;
width: 60px;
display: inline-flex;
}
#add_course_other_rows input {
color: #16a085;
border-radius: 5px;
border color:#BFBFBF;
border-style: solid;
border-width: thin;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
text-align: center;
padding: 3px;
margin-top: 2px;
margin-right: 3px;
width: 30px;
float: left;
}
#add_course_other_rows input:hover {
border-color: #2ecc71;
outline: none;
box-shadow: 0 0 2px 1px #2ecc71;
}
#add_course_other_rows {
display: inline-flex;
}
Css:
#charset "utf-8";
.add_course_lables {
width: 500px;
height: 120px;
border-radius: 5px 5px 0px 0px;
margin-left: auto;
margin-right: auto;
}
.add_course_lables input {
color: #16a085;
padding: 10px;
margin-top: 5px;
width:135px;
font-size: 15px;
border: 1px solid #16a085;
border-bottom: 2px solid #16a085;
border-radius: 5px;
transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
.add_course_lables .add_course_name {
width:91.5%;
}
.add_course_lables input:focus {
border-color:#2ecc71;
outline: none;
box-shadow: 0 0 2px 1px #2ecc71;
}
.add_course_lables input:hover {
border-color:#2ecc71;
outline: none;
box-shadow: 0 0 2px 1px #2ecc71;
}
.add_course_button{
background: #16a085;
color: white;
border: 1px solid #16a085;
border-radius: 5px;
transition: background .4s linear;
padding: 10px;
font-weight: 600;
font-size: 20px;
cursor: pointer;
margin-top: 10px;
position: relative;
left: 42%;
right: 0%;
}
#add_course_top_row{
border-radius: 4px;
border-color: #FFFFFF;
border-style: solid;
background: #16A085;
color: #FFFFFF;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
text-align: center;
padding: 2px;
margin-right: 0px;
width: 30px;
border-width: thin;
display: inline-flex;
}
#add_course_other_rows_left{
color: #16a085;
border-radius: 4px;
border-color: #16a085;
border-style: solid;
border-width: thin;
background: #FFFFFF;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
text-align: center;
padding: 2px;
margin-right: 3px;
margin-top:2px;
width: 60px;
float:left;
margin-left:132px;
}
#add_course_other_rows input {
color: #16a085;
border-radius: 5px;
border color:#BFBFBF;
border-style: solid;
border-width: thin;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
text-align: center;
padding: 3px;
margin-top: 2px;
margin-right:3px;
width: 30px;
float:left;
}
#add_course_other_rows input:hover {
border-color:#2ecc71;
outline: none;
box-shadow: 0 0 2px 1px #2ecc71;
}
See this link below,
http://jsfiddle.net/fnnb1o6d/13/
Hope it helps.