Im new to this website and in web designing as well
Im currently working on a registration form that requires us to link an external stylesheet to an html. I used internal stylesheet at first and it's working but after I transferred it to the external and it's not working anymore.
I checked and both of my html and css are on the same folder.Inside, my css code has its own folder named css and my external stylesheet is named external_registration.css
Pls help me
css code here:
body{
background-image: url('Images/Background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
font-family: 'Roboto', sans-serif;
}
.registration-box{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.reg-box-wrapper{
width: 50%;
height: 150%;
background: white;
padding: 40px;
border-radius: 20px 20px 20px 20px ;
box-shadow: 0px 12px 13px #00000021;
}
.title-form, .login-image{
display: flex;
align-items: center;
justify-content: center;
}
.title-form a{
text-transform: uppercase;
text-decoration: none;
color: #999;
font-weight: bold;
margin: 0 10px;
}
.title-form a.active, .login-menu a:hover{
color: #111;
border-bottom: 2px solid #62cff6;
}
.login-image img{
height: 130px;
}
input[type="name"] {
border: none;
background: #f0f0f0;
weight: 40%;
height: 8%;
padding: 10px;
border-radius: 5px;
width: 100%;
margin: 5px;
margin-bottom: 10px;
}
input[type="phone"], input[type="email"] {
border: none;
background: #f0f0f0;
weight: 40%;
height: 8%;
padding: 10px;
border-radius: 5px;
width: 60%;
margin: 5px;
margin-bottom: 10px;
}
input[type="submit"]{
margin-top: 20px;
background: #112C21;
border: none;
width: 100%;
padding: 15px 70px;
color: white;
font-weight: bold;
box-shadow: 0px 7px 9px #62cff66e;
}
input[type="submit"]:hover{
cursor: pointer;
}
.select-css {
display: block;
font-size: 16px;
font-family: sans-serif;
font-weight: 700;
color: #444;
line-height: 1.3;
padding: .6em 1.4em .5em .8em;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 5px;
margin-bottom:10px;
border: 1px solid #aaa;
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
border-radius: .5em;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: #fff;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
background-repeat: no-repeat, repeat;
background-position: right .7em top 50%, 0 0;
background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
display: none;
}
.select-css:hover {
border-color: #888;
}
.select-css:focus {
border-color: #aaa;
box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
box-shadow: 0 0 0 3px -moz-mac-focusring;
color: #222;
outline: none;
}
input[type='radio']:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: #d1d3d1;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white
}
input[type='radio']:checked:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: #112C21;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
}
.select-css option {
font-weight:normal;
}
html code here:
<html>
<head>
<title>Registration</title>
<meta charset="UTF-8">
<meta name="Newly hired" content="Registration Form">
<title> Registration Form </title>
<link rel="stylesheet" href="external_registration.css"/>
</head>
<body>
<div class="registration-box">
<div class="reg-box-wrapper">
<div class="title-form">
<h2>Registration Form</h2>
</div>
<form>
<label for="name">Full name *</label>
<input type="text" placeholder="Last name, First Namek" required>
<label for="name">Location *</label>
<input type="text" placeholder="House/Building/Street Number, Street Name
Barangay/District Name, City/Municipality" required>
<div style= "float:left;">
<label for="email">Email Address * </label>
<input type="email" style="width: 100px" placeholder="#example.com" required>
</div>
<div style= "float:left;">
<label for="phone_number">Phone number *</label>
<input type="phone" placeholder= "0XX-XXX-YYYY" required><br><br>
</div>
<br><br><br><br><br>
<label for="department">Department *</label>
<select class="select-css" name="Department" id="Department" required>
<option value=""> </option>
<option value="Animation Department">Animation</option>
<option value="Concept Planning Department">Concept Planning</option>
<option value="Character and Background Art Department">Character and Background Art </option>
<option value="Storyboard and Layout Department">Storyboard and Layout</option>
<option value="Marketing Department">Marketing and Management</option>
</select>
<label for="gender">Gender:</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label><br>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</body>
You have to tell the code where the CSS is with a folder name.
If it is inside a subfolder then declare it like this:
<link rel="stylesheet" href="/css/external_registration.css"/>
If it is one folder up, then use ".." before the folder name.
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>
I'm a new to css and i really can't fix all as i want...
How can i align vertical the h1 to the start of user form?
but most important problem for me is that i can't center good the check and the link, i want it one below the other and centered in the div.
I'm not sure if i have positioned good the div but i want it centred but not too low on the page.
thanks to everyone!
body {
text-align: left;
background-image: url("img/lemon.jpg");
color: #1b1b1b;
}
input[type=text],
input[type=password]{
width: 65%;
display: table;
margin: 0 auto;
padding: 12px 20px;
border: none;
border-bottom: 1px solid darkgray;
background-color: #e9e9e9;
box-sizing: border-box;
margin-bottom: 7px;
resize: vertical;
}
h1 {
font-size: x-large;
}
h2 {
font-size: x-large;
}
button {
background-color: #4CAF50;
color: white;
padding: 7px 20px;
width: 65%;
height: 20%;
display: table;
margin: 0 auto;
border: none;
cursor: pointer;
background: linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
background-color: #3d94f6;
border: 1px solid #337fed;
cursor: pointer;
color: #ffffff;
font-size: 17px;
text-decoration: none;
text-shadow: -1px 1px 1px #1570cd;
}
button:hover {
background: linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
background-color: #1e62d0;
}
button:active {
position: relative;
top: 1px;
}
.container {
width: 35%;
height: auto;
margin-right: auto;
margin-left: auto;
margin-top: 7%;
background-color: white;
box-shadow: 2px 2px 11px rgb(11, 11, 11);
-webkit-box-shadow: 2px 2px 11px rgb(11, 11, 11);
-moz-box-shadow: 2px 2px 11px rgb(11, 11, 11);
overflow: hidden;
}
#check {
display:block;
margin-top: 7px;
}
span.frgt {
margin-top: 7px;
display: block;
}
a {
text-decoration: none;
color: #1e62d0;
}
img {
width: 100%;
height: auto;
opacity: 0.4;
}
<!DOCTYPE html>
<head>
</head>
<body>
<div class="container">
<h1>Login</h1>
<input type="text" placeholder="Username" name="uname" required>
<input type="password" placeholder="password" name="psw" required>
<button type="submit">Login</button>
<hr>
<label id="check">
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
<span class="frgt">forgot password?</span>
</div>
</body>
</html>
If you set the h1 to the same width of the button and use "margin: 0 auto" to center it, this will make the h1 span the width of the button, and by default the text will be left aligned to the start of the button.
h1 {
font-size: x-large;
width: 65%;
margin: 0 auto;
}
I'm not too sure exactly what you want to do with the check section. If you use "text-align: center", this will center it, or use the same code as above to align it with the buttons.
you can use text-align: center; and vertical-align:top;
If your problem still exists, please explain more clearly what you want.
Use text-align: center; to center text within container.
To make it easier to align your elements, just wrap them into one div and adjust the div with CSS instead of dealing with each single element.
Here is an example of what you can do.
body {
text-align: left;
background-image: url("img/lemon.jpg");
color: #1b1b1b;
}
.form {
width: 75%;
margin: auto;
}
.form-bottom {
text-align: center;
}
input[type=text],
input[type=password] {
display: table;
margin: 0 auto;
width: 100%;
padding: 12px 20px;
border: none;
border-bottom: 1px solid darkgray;
background-color: #e9e9e9;
box-sizing: border-box;
margin-bottom: 7px;
resize: vertical;
}
h1 {
font-size: x-large;
}
h2 {
font-size: x-large;
}
button {
background-color: #4CAF50;
color: white;
padding: 7px 20px;
height: 20%;
width: 100%;
display: table;
margin: 0 auto;
border: none;
cursor: pointer;
background: linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
background-color: #3d94f6;
border: 1px solid #337fed;
cursor: pointer;
color: #ffffff;
font-size: 17px;
text-decoration: none;
text-shadow: -1px 1px 1px #1570cd;
}
button:hover {
background: linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
background-color: #1e62d0;
}
button:active {
position: relative;
top: 1px;
}
.container {
width: 35%;
height: auto;
margin-right: auto;
margin-left: auto;
margin-top: 7%;
background-color: white;
box-shadow: 2px 2px 11px rgb(11, 11, 11);
-webkit-box-shadow: 2px 2px 11px rgb(11, 11, 11);
-moz-box-shadow: 2px 2px 11px rgb(11, 11, 11);
overflow: hidden;
}
#check {
display: block;
margin-top: 7px;
}
span.frgt {
margin-top: 7px;
display: block;
}
a {
text-decoration: none;
color: #1e62d0;
}
img {
width: 100%;
height: auto;
opacity: 0.4;
}
<body>
<div class="container">
<div class="form">
<h1>Login</h1>
<input type="text" placeholder="Username" name="uname" required>
<input type="password" placeholder="password" name="psw" required>
<button type="submit">Login</button>
</div>
<hr>
<div class="form-bottom">
<label id="check">
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
<span class="frgt">forgot password?</span>
</div>
</div>
</body>
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>
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'm trying to prevent separation of label and check box (or radio button) when there is a line wrap. Unfortunately I'm working with some very long labels over which I have no control.
It would be awesome if there could be columns where all the buttons align, but at a minimum, no splitting up of items.
thanks in advance.
#import url(http://fonts.googleapis.com/css?family=Montserrat);
/*basic reset*/
* {margin: 0; padding: 0;}
.html_S {
height: 100%;
}
.toast {
opacity: 1 !important;
}
.body_S {
min-height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: montserrat, arial, verdana;
background-color: transparent !important;
}
.reqSpan_S {
top: -15px;
position:relative;
}
.reqFieldText_S {
color: red;
padding: 0;
margin: 0;
}
.reqFieldStar_S {
font-weight: bold;
}
.k-button {
color: red;
}
.buttonCentre_S {
text-align: center;
}
.outerDiv_S {
width: 85%;
margin: 50px auto;
text-align: center;
}
#surveyForm {
top: -35px;
position:relative;
width: 85%;
margin: 50px auto;
text-align: left;
}
#surveyForm fieldset {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 80%;
margin: 0 10%;
}
/*inputs*/
#surveyForm input, #surveyForm textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
/*buttons*/
#surveyForm .action-button {
text-align: center;
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#surveyForm .action-button:hover, #surveyForm .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
#surveyForm .action-button-submit {
width: 100px;
background: #3498db;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
/*For Toast not part of surveyForm...*/
.action-button-ok {
width: 100px;
background: rgba(255, 255, 255, 0.3);
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#surveyForm .action-button-submit:hover, #surveyForm .action-button-submit:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #3498db;
}
/*headings*/
.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: white;
text-transform: uppercase;
font-size: 9px;
/* width should be 100 divided by the number of steps */
/* this is set in the code dynamically in javascript */
width: 6.25%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after{
background: #27AE60;
color: white;
}
.k-dropdown {
width: 100%;
}
.k-state-selected.k-state-focused {
background-color: #27AE60;
border: 0;
}
#surveyForm hr {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
margin-bottom: 10px;
}
/* https://stackoverflow.com/a/17541916/1550052 */
.rad,
.ckb{
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
padding: 10px;
}
.rad > input,
.ckb > input{ /* HIDE ORG RADIO & CHECKBOX */
visibility: hidden;
position: absolute;
}
/* RADIO & CHECKBOX STYLES */
.rad > i,
.ckb > i{ /* DEFAULT <i> STYLE */
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
border-radius: 50%;
transition: 0.2s;
box-shadow: inset 0 0 0 8px #fff;
border: 1px solid #d3d3d3;
background: #666;
margin-right: 4px;
}
/* CHECKBOX OVERWRITE STYLES */
.ckb > i {
width: 25px;
border-radius: 3px;
}
.rad:hover > i{ /* HOVER <i> STYLE */
box-shadow: inset 0 0 0 3px #fff;
background: #666;
}
.rad > input:checked + i{ /* (RADIO CHECKED) <i> STYLE */
box-shadow: inset 0 0 0 3px #fff;
background: #27AE60;
}
/* CHECKBOX */
.ckb > input + i:after{
content: "";
display: block;
height: 12px;
width: 12px;
margin: 2px;
border-radius: inherit;
transition: inherit;
background: #d3d3d3;
}
.ckb > input:checked + i:after{ /* (RADIO CHECKED) <i> STYLE */
margin-left: 11px;
background: #27AE60;
}
<body class='body_S'>
<form id='surveyForm'>
<!-- fieldsets -->
<fieldset >
<h2 class="fs-title">
Demographic Search Criteria
</h2>
<h2 class="fs-subtitle">
The demographic data you select here will be used by planners
</h2>
<h2 class="fs-subtitle">
1
</h2>
<label>Main Type of Business
</label>
<br />
<label class="ckb" for="cb-638-0">
<input type="checkbox" name="cb-638" id="cb-638-0" value="3223" />
<i></i>Accommodations
</label>
<label class="ckb" for="cb-638-1">
<input type="checkbox" name="cb-638" id="cb-638-1" value="3224" />
<i></i>Activities, Attractions & Tours
</label>
<label class="ckb" for="cb-638-2">
<input type="checkbox" name="cb-638" id="cb-638-2" value="3225" />
<i></i>Association
</label>
<label class="ckb" for="cb-638-3">
<input type="checkbox" name="cb-638" id="cb-638-3" value="3226" />
<i></i>Convention and Visitors Bureau
</label>
<label class="ckb" for="cb-638-4">
<input type="checkbox" name="cb-638" id="cb-638-4" value="3227" />
<i></i>Convention Centre
</label>
<label class="ckb" for="cb-638-5">
<input type="checkbox" name="cb-638" id="cb-638-5" value="3228" />
<i></i>Cruise Line
</label>
<label class="ckb" for="cb-638-6">
<input type="checkbox" name="cb-638" id="cb-638-6" value="3229" />
<i></i>Destination Management Company
</label>
<label class="ckb" for="cb-638-7">
<input type="checkbox" name="cb-638" id="cb-638-7" value="3230" />
<i></i>Destination Marketing Organization
</label>
<label class="ckb" for="cb-638-8">
<input type="checkbox" name="cb-638" id="cb-638-8" value="3231" />
<i></i>Event Service Provider
</label>
<label class="ckb" for="cb-638-9">
<input type="checkbox" name="cb-638" id="cb-638-9" value="3232" />
<i></i>Technology Provider
</label>
<label class="ckb" for="cb-638-10">
<input type="checkbox" name="cb-638" id="cb-638-10" value="3233" />
<i></i>Transportation
</label>
<label class="ckb" for="cb-638-11">
<input type="checkbox" name="cb-638" id="cb-638-11" value="3234" />
<i></i>Tourism Board
</label>
<label class="ckb" for="cb-638-12">
<input type="checkbox" name="cb-638" id="cb-638-12" value="3235" />
<i></i>Venues for Meeting/Events (non-hotel)
</label>
</fieldset>
</form>
</body>
</html>
css for the select groups starts at line 207 of the css section. Its from this stack overflow solution: https://stackoverflow.com/a/17541916/155005
Add float: left; to you label tags
#import url(http://fonts.googleapis.com/css?family=Montserrat);
/*basic reset*/
* {margin: 0; padding: 0;}
.html_S {
height: 100%;
}
.toast {
opacity: 1 !important;
}
.body_S {
min-height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: montserrat, arial, verdana;
background-color: transparent !important;
}
.reqSpan_S {
top: -15px;
position:relative;
}
.reqFieldText_S {
color: red;
padding: 0;
margin: 0;
}
.reqFieldStar_S {
font-weight: bold;
}
.k-button {
color: red;
}
.buttonCentre_S {
text-align: center;
}
.outerDiv_S {
width: 85%;
margin: 50px auto;
text-align: center;
}
#surveyForm {
top: -35px;
position:relative;
width: 85%;
margin: 50px auto;
text-align: left;
}
#surveyForm fieldset {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 80%;
margin: 0 10%;
}
/*inputs*/
#surveyForm input, #surveyForm textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
/*buttons*/
#surveyForm .action-button {
text-align: center;
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#surveyForm .action-button:hover, #surveyForm .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
#surveyForm .action-button-submit {
width: 100px;
background: #3498db;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
/*For Toast not part of surveyForm...*/
.action-button-ok {
width: 100px;
background: rgba(255, 255, 255, 0.3);
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#surveyForm .action-button-submit:hover, #surveyForm .action-button-submit:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #3498db;
}
/*headings*/
.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: white;
text-transform: uppercase;
font-size: 9px;
/* width should be 100 divided by the number of steps */
/* this is set in the code dynamically in javascript */
width: 6.25%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after{
background: #27AE60;
color: white;
}
.k-dropdown {
width: 100%;
}
.k-state-selected.k-state-focused {
background-color: #27AE60;
border: 0;
}
#surveyForm hr {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
margin-bottom: 10px;
}
/* http://stackoverflow.com/a/17541916/1550052 */
.rad,
.ckb{
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
padding: 10px;
clear: left;
float: left;
}
.rad > input,
.ckb > input{ /* HIDE ORG RADIO & CHECKBOX */
visibility: hidden;
position: absolute;
}
/* RADIO & CHECKBOX STYLES */
.rad > i,
.ckb > i{ /* DEFAULT <i> STYLE */
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
border-radius: 50%;
transition: 0.2s;
box-shadow: inset 0 0 0 8px #fff;
border: 1px solid #d3d3d3;
background: #666;
margin-right: 4px;
}
/* CHECKBOX OVERWRITE STYLES */
.ckb > i {
width: 25px;
border-radius: 3px;
}
.rad:hover > i{ /* HOVER <i> STYLE */
box-shadow: inset 0 0 0 3px #fff;
background: #666;
}
.rad > input:checked + i{ /* (RADIO CHECKED) <i> STYLE */
box-shadow: inset 0 0 0 3px #fff;
background: #27AE60;
}
/* CHECKBOX */
.ckb > input + i:after{
content: "";
display: block;
height: 12px;
width: 12px;
margin: 2px;
border-radius: inherit;
transition: inherit;
background: #d3d3d3;
}
.ckb > input:checked + i:after{ /* (RADIO CHECKED) <i> STYLE */
margin-left: 11px;
background: #27AE60;
}
<body class='body_S'>
<form id='surveyForm'>
<!-- fieldsets -->
<fieldset >
<h2 class="fs-title">
Demographic Search Criteria for iBE Appointment Scheduler For Your Company Profile
</h2>
<h2 class="fs-subtitle">
The demographic data you select here will be used by planners to help search and identify exhibitors they want to request meetings with. The data you fill in will default on all your booth staff members' profiles, however they can
edit the selections to customize it to what they offer if it differs from what you offer.
</h2>
<h2 class="fs-subtitle">
1
</h2>
<label>Main Type of Business
</label>
<br />
<label class="ckb" for="cb-638-0">
<input type="checkbox" name="cb-638" id="cb-638-0" value="3223" />
<i></i>Accommodations
</label>
<label class="ckb" for="cb-638-1">
<input type="checkbox" name="cb-638" id="cb-638-1" value="3224" />
<i></i>Activities, Attractions & Tours
</label>
<label class="ckb" for="cb-638-2">
<input type="checkbox" name="cb-638" id="cb-638-2" value="3225" />
<i></i>Association
</label>
<label class="ckb" for="cb-638-3">
<input type="checkbox" name="cb-638" id="cb-638-3" value="3226" />
<i></i>Convention and Visitors Bureau
</label>
<label class="ckb" for="cb-638-4">
<input type="checkbox" name="cb-638" id="cb-638-4" value="3227" />
<i></i>Convention Centre
</label>
<label class="ckb" for="cb-638-5">
<input type="checkbox" name="cb-638" id="cb-638-5" value="3228" />
<i></i>Cruise Line
</label>
<label class="ckb" for="cb-638-6">
<input type="checkbox" name="cb-638" id="cb-638-6" value="3229" />
<i></i>Destination Management Company
</label>
<label class="ckb" for="cb-638-7">
<input type="checkbox" name="cb-638" id="cb-638-7" value="3230" />
<i></i>Destination Marketing Organization
</label>
<label class="ckb" for="cb-638-8">
<input type="checkbox" name="cb-638" id="cb-638-8" value="3231" />
<i></i>Event Service Provider
</label>
<label class="ckb" for="cb-638-9">
<input type="checkbox" name="cb-638" id="cb-638-9" value="3232" />
<i></i>Technology Provider
</label>
<label class="ckb" for="cb-638-10">
<input type="checkbox" name="cb-638" id="cb-638-10" value="3233" />
<i></i>Transportation
</label>
<label class="ckb" for="cb-638-11">
<input type="checkbox" name="cb-638" id="cb-638-11" value="3234" />
<i></i>Tourism Board
</label>
<label class="ckb" for="cb-638-12">
<input type="checkbox" name="cb-638" id="cb-638-12" value="3235" />
<i></i>Venues for Meeting/Events (non-hotel)
</label>
</fieldset>
</form>
</body>
</html>
If you want to specifically prevent line breaks within the label element, there is CSS for that:
label.chk, label.rad {
white-space:nowrap;
}
If you want to allow line breaks but not if they would occur between the control and the beginning of the label, you may be able to adjust your code like this:
.nowrap {
white-space:nowrap;
}
<label class="ckb" for="cb-638-1">
<span class="nowrap"><input type="checkbox" name="cb-638" id="cb-638-1" value="3224" />
<i></i>Activities,</span> Attractions & Tours
</label>
(You'll also need to modify the .chk > ... and .rad > ... rules to account for the additional span.)
If you're satisfied with the labels just being columnar, just make label a block level element:
label {
display:block;
}