I seen this on a website, where the placeholder text "Pounds" remains on top of input box. Example:
How exactly is that accomplished?
<div id="my-ajax-filter-search">
<form action="" method="post">
<label id="label-lg">Weight</label>
<input type="text" name="search" id="search" value="" >
<input type="submit" id="submit" name="submit" value="See shipping rates" />
</form>
<ul ></ul>
<section class="elementor-section elementor-inner-section elementor-element elementor-element-784a76e1 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="784a76e1" data-element_type="section">
<div id="ajax_filter_search_results" class="elementor-container elementor-column-gap-no np-wrap">
</div>
</section>
</div>
CSS:
.input-text {
min-width: 84px;
}div#my-ajax-filter-search input#search , label#label-lg {
max-width: 250px;
margin: 0 auto;
display: block;
border-radius: 5px;
}
label#label-lg {
color: #fff;
margin-bottom: 6px;
font-weight: bold;
}
div#my-ajax-filter-search input#submit:focus {
outline: none;
}
div#my-ajax-filter-search input#submit {
max-width: 192px;
display: block;
width: 100%;
margin: 15px auto;
background: #fff;
font-family: "Montserrat", Sans-serif;
fill: #373278;
color: #373278;
background-color: #ffffff;
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #ffffff;
border-radius: 50px 50px 50px 50px;
box-shadow: 0px 10px 30px -8px rgb(0 0 0 / 16%);
}
div#my-ajax-filter-search input#submit:hover {
color: #ffffff;
background-color: rgba(255,255,255,0);
border-color: #ffffff;
}
.elementor-price-table__feature-inner input {
min-width: 1px;
}
.elementor-2 .elementor-element.elementor-element-1257087d .elementor-price-table__feature-inner {
margin: 0;
}
.elementor-2 .elementor-element.elementor-element-1257087d .elementor-price-table__feature-inner .quantity {
max-width: 67px;
margin: 0 auto;
}
.elementor-2 .elementor-element.elementor-element-1257087d .elementor-price-table__feature-inner a.add_cart.button.product_type_simple {
max-width: 106px;
margin: 12px auto;
display: block;
padding: 17px;
border-radius: 10px;
border: 1px solid;
background: #00a8ff;
color: #fff;
}
You can use this code
body {
font-family: sans-serif;
}
.label-before, .field input:focus + label::before, .field input:valid + label::before {
line-height: 15px;
font-size: 12px;
top: 5px;
background: #fff;
padding: 0 6px;
left: 9px;
}
.field {
position: relative;
margin-bottom: 15px;
margin-top:10px;
display:inline-block;
}
.field label::before {
content: attr(title);
position: absolute;
top: 10px;
left: 15px;
line-height: 30px;
font-size: 14px;
color: #777;
transition: 300ms all;
}
.field input {
width: auto;
height: 50px;
padding: 0px 15px;
padding-top:12px;
box-sizing: border-box;
font-size: 14px;
color: #222;
border: 1px solid #ccc;
border-radius: 3px;
text-align: center;
}
.field input:focus {
outline: 0;
border-color: blue;
}
.field input:valid + label::before {
content: attr(data-title);
}
.field input:focus + label::before {
color: blue;
}
<div id="my-ajax-filter-search">
<form action="" method="post">
<div class="control-group">
<div>
<label id="label-lg">Weight</label>
</div>
<div class="field">
<input type="text" required autocomplete="off" name="search" id="search" value="" >
<label for="search" title="Pounds" data-title="Pounds"></label>
</div>
</div>
<input type="submit" id="submit" name="submit" value="See shipping rates" />
</form>
<ul ></ul>
<section class="elementor-section elementor-inner-section elementor-element elementor-element-784a76e1 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="784a76e1" data-element_type="section">
<div id="ajax_filter_search_results" class="elementor-container elementor-column-gap-no np-wrap">
</div>
</section>
</div>
Related
I'm trying to make a form for adding a blog page.
I have title form, date form, content form, checkbox for blog category form and image form for the topic image.
When I try to fill the form, only the 3 of the 4 checkbox forms that worked and when I click upload image it won't show the file selector.
Here's the screenshot:
Form screenshot
This is what I'm trying to achieve:
Form screenshot
I've tried to browse for solution but my English isn't very good for browsing, I don't know the keyword to search for the solution.
Please help, I've stuck on this for 3 hours.
Here's the full code:
let blogs = []
function addBlog(event) {
event.preventDefault()
let inputName = document.getElementById("inputProjectName").value
let inputContent = document.getElementById("inputDescription").value
let inputImage = document.getElementById("inputImage")
const projectDate = {
startDate: document.getElementById("inputStartDate").value,
endDate: document.getElementById("inputEndDate").value
}
image = URL.createObjectURL(image.files[0])
let cardIcons = {
html: document.querySelector('input[name="checkHtml"]').checked,
css: document.querySelector('input[name="checkCss"]').checked,
nodeJs: document.querySelector('input[name="checkNode"]').checked,
reactJs: document.querySelector('input[name="checkReact"]').checked
}
let blog = {
title: inputName,
date: projectDate,
content: inputContent,
icons: cardIcons,
image: inputImage
}
blogs.push(blog)
console.table(blogs)
}
/* FORM */
.mpi-title {
width: 100%;
margin: 50px 0px;
font-size: 30px;
text-align: center;
font-family: 'Lato', sans-serif !important;
font-weight: 700;
}
.mpi-form-container {
display: flex;
justify-content: center;
}
.mpi-form {
width: 540px;
display: flex;
justify-content: center;
}
.mpi-form label {
font-size: 25px;
font-weight: bold;
}
.mpi-form .mpi-name input,
.mpi-date input {
width: 100%;
height: 50px;
padding: 5px;
box-sizing: border-box;
font-size: 20px;
font-weight: 400;
padding-bottom: 5px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
border-radius: 8px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.mpi-date {
flex-grow: 1;
display: flex;
gap: 10px;
}
.mpi-date .date-start {
flex: 50%;
}
.mpi-date .date-end {
flex: 50%;
}
[type="date"]::-webkit-datetime-edit {
opacity: 0;
}
[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
width: 100%;
}
.mpi-desc textarea {
width: 100%;
font-size: 20px;
font-weight: 400;
padding: 8px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
box-sizing: border-box;
border-radius: 8px;
height: 200px;
}
.mpi-check {
display: flex;
gap: 120px;
margin: 20px 0px;
}
.mpi-check label {
font-size: 20px;
}
.check-left {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-right {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-label {
display: block;
position: relative;
padding-left: 35px;
color: #514a4a;
margin-bottom: 12px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.check-label input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: white;
border-radius: 5px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.check-label:hover input~.checkmark {
background-color: #ccc;
}
.check-label input:checked~.checkmark {
background-color: #2196F3;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.check-label input:checked~.checkmark:after {
display: block;
}
.check-label .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.mpi-image {
overflow: hidden;
height: 50px;
width: 100%;
font-size: 20px;
font-weight: 400;
box-sizing: border-box;
margin-top: 5px;
margin-bottom: 20px;
background: #f4f3f3;
border: 1px solid #c4c4c4;
border-radius: 8px;
cursor: pointer;
padding-right: 8px;
box-shadow: 0 10px 10px rgb(0 0 0 / 26%);
}
.mpi-image label {
width: 100%;
height: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
}
.mpi-choose {
margin-top: -2px;
border-radius: 8px;
align-items: center;
padding: 13px 10px 13px 10px;
background-color: #e4e4e4;
color: #b2abab;
}
.mpi-attach {
padding-right: 10px;
}
.mpi-submit button {
margin-top: 30px;
float: right;
padding: 10px 30px;
border: none;
border-radius: 25px;
background-color: var(--btn);
color: white;
font-size: 15px;
font-weight: bold;
cursor: pointer;
margin-bottom: 110px;
}
.mpi-submit button:hover {
background-color: var(--btn-hover)
}
/* x FORM */
<div class="mpi-form">
<!--MP = My Project Input-->
<form onsubmit="addBlog(event)">
<div class="mpi-name">
<label for="inputProjectName">Project Name</label>
<input type="text" id="inputProjectName">
</div>
<div class="mpi-date">
<div class="date-start">
<label for="inputStartDate">Start Date</label>
<input type="date" id="inputStartDate">
</div>
<div class="date-end">
<label for="inputEndDate">End Date</label>
<input type="date" id="inputEndDate">
</div>
</div>
<div class="mpi-desc">
<label for="inputDescription">Description</label>
<textarea name="inputDescription" id="inputDescription"></textarea>
</div>
<div class="mpi-check-cont">
<label for="checkTitle">Technologies</label>
<div class="mpi-check">
<div class="check-left">
<div>
<label for="checkHtml" class="check-label">HTML
<input type="checkbox" id="checkHtml" name="checkHtml"check>
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkNode" class="check-label">Node Js
<input type="checkbox" id="checkNode" name="checkNode">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="check-right">
<div>
<label for="checkCss" class="check-label">CSS
<input type="checkbox" id="checkCss" name="checkCss">
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="reactJs" class="check-label">React Js
<input type="checkbox" id="checkReact" name="checkReact">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div>
<label>Upload Image</label>
<div class="mpi-image">
<label for="input-blog-image">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="inputImage" hidden />
</div>
</div>
<div class="mpi-submit">
<button type="submit">Submit</button>
</div>
</form>
Thanks
The very first mistake is you have added different id than for
<label for="reactJs" class="check-label">React Js
<input type="checkbox" id="checkReact" name="checkReact">
<span class="checkmark"></span>
</label>
Here for value is reactJs but input id is checkReact
Second mistake is same as above
<label for="input-blog-image">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="inputImage" hidden />
label for value is input-blog-image but input id is inputImage
Make those changes, will work fine.
let blogs = []
function addBlog(event) {
event.preventDefault()
let inputName = document.getElementById("inputProjectName").value
let inputContent = document.getElementById("inputDescription").value
let inputImage = document.getElementById("inputImage")
const projectDate = {
startDate: document.getElementById("inputStartDate").value,
endDate: document.getElementById("inputEndDate").value
}
image = URL.createObjectURL(image.files[0])
let cardIcons = {
html: document.querySelector('input[name="checkHtml"]').checked,
css: document.querySelector('input[name="checkCss"]').checked,
nodeJs: document.querySelector('input[name="checkNode"]').checked,
reactJs: document.querySelector('input[name="checkReact"]').checked
}
let blog = {
title: inputName,
date: projectDate,
content: inputContent,
icons: cardIcons,
image: inputImage
}
blogs.push(blog)
console.table(blogs)
}
mpi-title {
width: 100%;
margin: 50px 0px;
font-size: 30px;
text-align: center;
font-family: 'Lato', sans-serif !important;
font-weight: 700;
}
.mpi-form-container {
display: flex;
justify-content: center;
}
.mpi-form {
width: 540px;
display: flex;
justify-content: center;
}
.mpi-form label {
font-size: 25px;
font-weight: bold;
}
.mpi-form .mpi-name input,
.mpi-date input {
width: 100%;
height: 50px;
padding: 5px;
box-sizing: border-box;
font-size: 20px;
font-weight: 400;
padding-bottom: 5px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
border-radius: 8px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.mpi-date {
flex-grow: 1;
display: flex;
gap: 10px;
}
.mpi-date .date-start {
flex: 50%;
}
.mpi-date .date-end {
flex: 50%;
}
[type="date"]::-webkit-datetime-edit {
opacity: 0;
}
[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
width: 100%;
}
.mpi-desc textarea {
width: 100%;
font-size: 20px;
font-weight: 400;
padding: 8px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
box-sizing: border-box;
border-radius: 8px;
height: 200px;
}
.mpi-check {
display: flex;
gap: 120px;
margin: 20px 0px;
}
.mpi-check label {
font-size: 20px;
}
.check-left {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-right {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-label {
display: block;
position: relative;
padding-left: 35px;
color: #514a4a;
margin-bottom: 12px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.check-label input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: white;
border-radius: 5px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.check-label:hover input~.checkmark {
background-color: #ccc;
}
.check-label input:checked~.checkmark {
background-color: #2196F3;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.check-label input:checked~.checkmark:after {
display: block;
}
.check-label .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.mpi-image {
overflow: hidden;
height: 50px;
width: 100%;
font-size: 20px;
font-weight: 400;
box-sizing: border-box;
margin-top: 5px;
margin-bottom: 20px;
background: #f4f3f3;
border: 1px solid #c4c4c4;
border-radius: 8px;
cursor: pointer;
padding-right: 8px;
box-shadow: 0 10px 10px rgb(0 0 0 / 26%);
}
.mpi-image label {
width: 100%;
height: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
}
.mpi-choose {
margin-top: -2px;
border-radius: 8px;
align-items: center;
padding: 13px 10px 13px 10px;
background-color: #e4e4e4;
color: #b2abab;
}
.mpi-attach {
padding-right: 10px;
}
.mpi-submit button {
margin-top: 30px;
float: right;
padding: 10px 30px;
border: none;
border-radius: 25px;
background-color: var(--btn);
color: white;
font-size: 15px;
font-weight: bold;
cursor: pointer;
margin-bottom: 110px;
}
.mpi-submit button:hover {
background-color: var(--btn-hover)
}
<form onsubmit="addBlog(event)">
<div class="mpi-name">
<label for="inputProjectName">Project Name</label>
<input type="text" id="inputProjectName">
</div>
<div class="mpi-date">
<div class="date-start">
<label for="inputStartDate">Start Date</label>
<input type="date" id="inputStartDate">
</div>
<div class="date-end">
<label for="inputEndDate">End Date</label>
<input type="date" id="inputEndDate">
</div>
</div>
<div class="mpi-desc">
<label for="inputDescription">Description</label>
<textarea name="inputDescription" id="inputDescription"></textarea>
</div>
<div class="mpi-check-cont">
<label for="checkTitle">Technologies</label>
<div class="mpi-check">
<div class="check-left">
<div>
<label for="checkHtml" class="check-label">HTML
<input type="checkbox" id="checkHtml" name="checkHtml"check>
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkNode" class="check-label">Node Js
<input type="checkbox" id="checkNode" name="checkNode">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="check-right">
<div>
<label for="checkCss" class="check-label">CSS
<input type="checkbox" id="checkCss" name="checkCss">
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="reactJs" class="check-label">React Js
<input type="checkbox" id="reactJs" name="checkReact">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div>
<label>Upload Image</label>
<div class="mpi-image">
<label for="input-blog-image">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="input-blog-image" hidden />
</div>
</div>
<div class="mpi-submit">
<button type="submit">Submit</button>
</div>
</form>
The problem is the wrong value for the for attribute on two label elements. These are:
<label for="reactJs" class="check-label">
<label for="input-blog-image">
And the correct values would be:
<label for="checkReact" class="check-label">
<label for="inputImage">
So I have been following this youtube tutorial on how to create a login/sign up form and I've run into a problem. Whilst coding the JS, I tried testing out the continue button without any values submitted into the input groups, and nothing happened. So I went to check the console and I was met with this error message, "Uncaught TypeError: Cannot set property 'textContent' of null". The error occurs around the 'messageElement.textContent = message;' area. Any help would be greatly appreciated.
function setFormMessage(formElement, type, message) {
const messageElement = formElement.querySelector(".form__message");
messageElement.textContent = message;
messageElement.classList.remove("form__message--success", "form__message--error");
messageElement.classList.add(`form__message--${type}`);
}
function setInputError(inputElement, message) {
inputElement.classList.add("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = message;
}
function clearInputError(inputElement) {
inputElement.classList.remove("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = "";
}
document.addEventListener("DOMContentLoaded", () => {
const loginForm = document.querySelector("#login");
const createAccountForm = document.querySelector("#createAccount");
document.querySelector("#linkCreateAccount").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.add("form--hidden");
createAccountForm.classList.remove("form--hidden");
});
document.querySelector("#linkLogin").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.remove("form--hidden");
createAccountForm.classList.add("form--hidden");
});
loginForm.addEventListener("submit", e => {
e.preventDefault();
// Perform your AJAX/Fetch login
setFormMessage(loginForm, "error", "Invalid username/password combination");
});
document.querySelectorAll(".form__input").forEach(inputElement => {
inputElement.addEventListener("blur", e => {
if (e.target.id === "signupUsername" && e.target.value.length > 0 && e.target.value.length < 10) {
setInputError(inputElement, "Username must be at least 10 characters in length");
}
});
inputElement.addEventListener("input", () => {
clearInputError(inputElement);
});
});
});
#import url('https://fonts.googleapis.com/css2?family=Belleza&display=swap') * {
box-sizing: border-box;
}
/*Navugation Bar*/
nav {
z-index: 1;
height: 120px;
background: black;
box-shadow: grey;
overflow: hidden;
background-color: black;
position: sticky;
top: 0;
width: 100%;
}
nav ul {
float: centre;
text-align: center;
}
nav ul li {
display: inline-block;
line-height: 0px;
margin: 0px 15px;
padding: 30px;
}
nav ul li a {
position: sticky;
color: grey;
font-size: 20px;
text-transform: uppercase;
padding: 50px;
text-decoration: none;
width: 100px;
}
nav ul li a:hover {
color: white;
font-size: 30px
}
/*Home Page*/
.header-image {
padding: 0px;
position: sticky;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
width: 100%;
background-color: black;
height: 290px
}
#Home-page {
font-size: 2em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
.first-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 10px solid;
color: grey;
padding: 50px;
margin-top: 20%;
margin-bottom: 30%;
}
.first-container-h1 {
color: white;
text-align: center;
font-size: 4em;
border-bottom: 20px solid white;
}
.first-container-h2 {
color: white;
text-align: center;
font-size: 4em;
}
#second-container-main {
width: 80%;
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
.second-container-title {
background: white;
text-align: center;
font-size: 40px;
height: 6pc;
line-height: 90px;
}
.second-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 2px solid;
color: grey;
padding: 50px;
font-size: 20px;
}
.second-container:hover {
font-size: 1em;
color: white;
}
.logo {
float: center;
width: 20%;
float: center;
text-align: center;
color: white;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
background-color: black;
height: 100px;
border: none
}
/* Footer*/
.footer-wrapper {
width: 100%;
margin: 0 auto;
display: block;
}
footer {
width: 100%;
height: 300px;
float: right;
text-align: center;
position: relative;
bottom: 0;
background-color: black;
}
/*About Page*/
.About-me-page-header {
font-size: 1em;
margin: 0;
background-position: center;
background-size: cover;
background-color: grey;
position: relative;
text-align: left;
padding-top: 50px;
padding-left: 50px;
height: 400px;
border: white 10px solid;
background-color: rgb(0, 0, 0, .7);
color: white;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}
#About-page {
font-size: 1em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#About-page-main {
width: 80%;
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
.About-page-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 2px solid;
color: grey;
padding: 50px;
font-size: 1em;
}
.About-page-container:hover {
font-size: 30px;
color: white;
}
.about-page-title {
background: white;
text-align: center;
font-size: 40px;
height: 6pc;
line-height: 90px;
}
.AB-container-h {
color: white;
text-align: center;
}
/* Resources*/
.R-first-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 10px solid;
color: grey;
padding: 50px;
margin-top: 20%;
margin-bottom: 30%;
}
.R-first-container-h1 {
color: white;
text-align: center;
font-size: 4em;
}
/*Login Page*/
.About-me-page-header {
font-size: 1em;
margin: 0;
background-position: center;
background-size: cover;
background-color: grey;
position: relative;
text-align: left;
padding-top: 50px;
padding-left: 50px;
height: 400px;
border: white 10px solid;
background-color: rgb(0, 0, 0, .7);
color: white
}
#About-page {
font-size: 1em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#About-page-main {
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
/* Login in and Sign Up Form*/
#Login-page {
font-size: 2em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#Login-page-main {
--color-primary-dark: #009579;
--color-primary-dark: #007f67;
--color-secondary: #252c6a;
--color-primary-dark: #cc3333;
--color-success: #4bb544;
--color-error: red;
border-radius: 4px;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
max-width: 400px;
margin: 2rem;
padding: 5rem;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
border-radius: var(--border-radius);
background-color: rgba(0, 0, 0, .7);
color: white;
border: 3px solid white;
width: 1000px
}
.form--hidden {
display: none
}
.form>*:firstchild {
margin-top: 0;
}
.form>*:lastchild {
margin-bottom: 0;
}
.form__title {
margin-bottom: 2rem;
text-align: center;
font-size: 3rem;
}
.form__message {
margin-bottom: 1rem;
}
.form__message--success {
color: var(--color-success);
}
.form__message--error {
text-align: center;
color: var(--color-error);
}
.form__input-group {
margin-bottom: 2rem;
}
input,
select,
textarea {
color: white;
}
.form__input-error-message {
color: var(--color-error);
border-bottom: var(--color-error)
}
.form__input-error-message {
margin-top: 2rem;
font-size: 1.5rem;
color: var(--color-error);
}
.form__button {
width: 100%;
padding: 1rem 2rem;
font-weight: bold;
font-size: 1.1rem;
color: white;
background-color: rgb(0, 0, 0, .7);
outline: none;
cursor: pointer;
border: none;
border-radius: 20px
}
.form__button:hover {
background-color: white;
color: black
}
.form__button:active {
transform: scale(0.98)
}
.form__text {
font-size: 20px;
text-align: center;
cursor: pointer;
}
.form-text,
.form-textarea {
border-style: none;
}
.form__link {
text-decoration: none;
color: white
}
.form__link:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Clarte Mentale - Login</title>
<link rel="stylesheet" href="Style.css" />
</head>
<body id="Login-page">
<div class="header-image">
<a href="Home.html">
<img src="Website Header.png">
</a>
</div>
<nav>
<ul>
<li>Welcome</li>
<li>About</li>
<li>Resources</li>
<li>Login</li>
</ul>
</nav>
<div class="About-me-page-header">
<h1 style="font-size:48px">Login Page</h1>
<p style="font-size:35px">
Contents:
</p>
<ul style="font-size:25px">
<li>Login</li>
<li>Sign Up</li>
</ul>
</div>
<main id="Login-page-main">
<div class="container">
<div class="form-container">
<!-- Login FormUp Form-->
<form class="form" id="login">
<h1 class="form__title">Login</h1>
<div class="form__messsage form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username or Email" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text" style="margin-top: 35px;">
<a class="form__link" id="linkCreateAccount">Don't have an account? Create account</a>
</p>
</form>
<!-- Sign Up Form-->
<form class="form form--hidden" id="createAccount">
<h1 class="form__title">Create Account</h1>
<div class="form__messsage form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Email" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Confirm password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text" style="margin-top: 35px;">
<a class="form__link" id="linkLogin">Already have an account? Sign</a>
</p>
</form>
</main>
<footer>
<button class="logo" class="footer-wrapper" onclick="topFunction()" id="myBtn" title="Go to top">
<img src="Logo.png">
</button>
</footer>
<script src="Javascript.js"></script>
<script src="Login.js"></script>
</body>
</html>
You have <div class="form__messsage ... "> instead of <div class="form__message ... ">. Fixing that should work. GL.
Try and replace DomContentLoaded with load
I would like to have an jQuery equivalent to CSS which when tab is clicked shows it content. For now, I'm able to get this from CSS only. I would like to have same function with jQuery or Javascript.
For example, now when SUN is clicked, it shows "It is Sunday" and when MON is clicked, it shows "It is Monday" and so on.
How can I have same functionality from jQuery or Javascript?
#import url('https://fonts.googleapis.com/cssfamily=Open+Sans:400,600,700');
* {
margin: 0;
padding: 0;
}
body {
padding: 2px;
background: #E5E4E2;
}
.tabinator {
background: #fff;
padding: 1px;
font-family: Open Sans;
margin-top: 10px;
}
.tabinator input {
display: none;
}
.tabinator label {
box-sizing: border-box;
display: inline-block;
padding: 5px 0.6%;
color: #ccc;
margin-bottom: -1px;
margin-left: -1px;
font-family: courier;
font-weight: bold;
}
.tabinator label:before {
content: '';
display: block;
width: 100%;
height: 15px;
background-color: #fff;
position: absolute;
bottom: -4px;
left: 0;
z-index: 10;
}
.tabinator label:hover {
color: red;
cursor: pointer;
}
.tabinator input:checked+label {
position: relative;
color: red;
font-weight: bold;
background: #fff;
border: 1px solid #bbb;
border-bottom: 1px solid #fff;
border-radius: 5px 5px 0 0;
font-size: 22px;
}
.tabinator input:checked+label:after {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 0 15px #939393;
}
#content1,
#content2,
#content3,
#content4,
#content5,
#content6,
#content7 {
display: none;
border-top: 1px solid #bbb;
padding: 3px;
margin-top: 2px;
}
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4,
#tab5:checked~#content5,
#tab6:checked~#content6,
#tab7:checked~#content7 {
display: block;
box-shadow: 0 0 15px #939393;
}
<div class="tabinator">
<input type="radio" id="tab1" name="tabs" checked>
<label for="tab1">SUN</label>
<input type="radio" id="tab2" name="tabs">
<label for="tab2">MON</label>
<input type="radio" id="tab3" name="tabs">
<label for="tab3">TUE</label>
<input type="radio" id="tab4" name="tabs">
<label for="tab4">WED</label>
<input type="radio" id="tab5" name="tabs">
<label for="tab5">THU</label>
<input type="radio" id="tab6" name="tabs">
<label for="tab6">FRI</label>
<input type="radio" id="tab7" name="tabs">
<label for="tab7">SAT</label>
<div id="content1">
<p> This is Sunday</>
</div>
<div id="content2">
<p> This is Monday</p>
</div>
<div id="content3">
<p> This is Tuesday</p>
</div>
<div id="content4">
<p> This is Wednesday</p>
</div>
<div id="content5">
<p> This is Thursday</p>
</div>
<div id="content6">
<p> This is Friday</p>
</div>
<div id="content7">
<p> This is Saturday</p>
</div>
Is that your suitable ? (see snippet)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 2px;
background: #E5E4E2;
}
ul#daysList {
display: inline-block;
width: 100%;
list-style: none;
background: #fff;
padding: 1px 1px 0 1px;
font-family: Open Sans;
margin: 10px 0 0 0;
}
ul#daysList li {
position: relative;
box-sizing: border-box;
display: block;
float: left;
box-shadow: 0 0 15px #939393;
width: 70px;
height: 30px;
text-align: center;
line-height: 030px;
color: #ccc;
margin-bottom: -5px;
margin-left: -1px;
font-family: courier;
font-weight: bold;
}
ul#daysList li:hover {
color: red;
cursor: pointer;
}
ul#daysList li.currentDay {
color: red;
font-weight: bold;
background: #fff;
border: 1px solid #bbb;
border-bottom: 1px solid #fff;
border-radius: 5px 5px 0 0;
font-size: 22px;
}
ul#daysList li.currentDay:after {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 0 15px #939393;
}
.content {
display: none;
border-top: 1px solid #bbb;
padding: 0 7px;
margin-top: 0;
background: #fff;
width: 100%;
height: 40px;
line-height: 38px;
box-shadow: 0 0 15px #939393;
}
.currentContent {
display: inline-block;
}
</style>
</head>
<body>
<ul id="daysList">
<li data-day="content1" class="currentDay">SUN</li>
<li data-day="content2">MON</li>
<li data-day="content3">TUE</li>
<li data-day="content4">WED</li>
<li data-day="content5">THU</li>
<li data-day="content6">FRI</li>
<li data-day="content7">SAT</li>
</ul>
<div id="content1" class="content currentContent">
<p> This is Sunday</p>
</div>
<div id="content2" class="content">
<p> This is Monday</p>
</div>
<div id="content3" class="content">
<p> This is Tuesday</p>
</div>
<div id="content4" class="content">
<p> This is Wednesday</p>
</div>
<div id="content5" class="content">
<p> This is Thursday</p>
</div>
<div id="content6" class="content">
<p> This is Friday</p>
</div>
<div id="content7" class="content">
<p> This is Saturday</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () { // Jquery ready. for complete page loaded
$("#daysList li").click(function () {
var
content_id = "#"+ $(this).data("day");
$("#daysList li").removeClass("currentDay");
$(this).addClass("currentDay");
$(".content").removeClass("currentContent");
$(content_id).addClass("currentContent");
});
}); // Jquery
</script>
</body>
</html>
HTML code:
<div id="shop-slide">
<div id="shop-content">
<form action="/" method="post">
<h1>You have selected services</h1>
<input type="text" class="field" name="login" value="Return code SMS..." onfocus="if (this.value == 'Return code SMS....') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Return code SMS....';}" />
<input type="text" class="field" name="codesms" value="Nick ..." onfocus="if (this.value == 'Nick ...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Nick ...';}" />
<input type="submit" class="submit" name="submit" value="Confirm" />
</form>
</div>
</div>
<div id="shop-toggle">
<p>Buy</p>
<p style="display: none;"><img class="close" src="images/close.png" alt="" />Close</p>
</div>
jQuery code
$(document).ready(function() {
$('#shop-toggle').click(function() {
$('#shop-content').slideToggle(300, function() {
$("#shop-toggle p").toggle();
});
});
});
CSS code
#sklep {
width: 50%;
top: 0;
position: absolute;
z-index: 999;
margin-right:30%;
margin-left: 25%;
padding: 0;
}
#sklep a {
color: #ffffff;
}
#sklep a:hover {
color: #616161;
}
#shop-slide {
width: 100%;
margin: 0 auto;
padding: 0px;
background: #3b3b3b;
border-bottom: 1px solid #ffffff;
}
#shop-content {
width: 290px;
height: auto;
margin: auto;
padding: 13px;
display: none;
}
#shop-content p {
margin: 0;
padding: 0;
}
#shop-toggle {
width: 174px;
height: 41px;
background: url(images/btn.png) no-repeat;
margin: 0 auto;
padding: 0;
z-index: 999;
text-align: center;
color: #ffffff;
text-shadow: 1px 1px 1px #a20b1b;
line-height: 37px;
font-weight: bold;
cursor: pointer;
display: block;
text-decoration: none;
}
.sklep-toggle:hover {
color: #41070d;
text-shadow: 1px 1px 0px #ee4557;
}
.sklep-toggle p {
margin: 0;
padding: 0;
}
.field {
width: 200px;
border: solid 1px #303030;
margin-right: 30px;
margin-left: 30px;
padding: 9px 13px;
background: #ffffff;
color: #343434;
background: -webkit-gradient(linear, left top, left 25, from(#ffffff), color-stop(4%, #eeeeee), to(#ffffff));
background: -moz-linear-gradient(top, #ffffff, #eeeeee 1px, #ffffff 25px);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.submit {
width: 120px;
margin-left: 80px;
padding: 8px 13px;
font-weight: bold;
text-shadow: 1px 1px 1px #484848;
color: #ffffff;
cursor: pointer;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #6f6f6f;
border: solid 1px #303030;
}
.submit:hover {
background: #636363;
}
.close {
vertical-align: middle;
margin: 0px 3px 0px -16px;
padding: 0;
}
I am using this code to eject the menu, html code is linked to mysql, displays several queries.
But I have a problem, when I click button, the menu when the button click all stand out at a time put forward because there are a few queries.
that doesn't work :(
Demo Webiste
see how it looks
please help
See this: http://jsfiddle.net/9X9fL/5/
$(document).ready(function(){
$('.shop-toggle').click(function() {
$this = $(this);
$this.prev().find('.shop-content').slideToggle(300,function(){
$this.find("p").toggle();
});
});
});
Html:
<div class="shop-toggle">
<p style="display: none;">Buy</p>
<p <img class="close" src="images/close.png" alt="" />Close</p>
</div>
I've created a single html page that will be used within a .aspx template. The html code I used is pretty basic and includes an email subscribe form. The form and it's code is taken directly from Mailchimp as they are the email client I'm using. The problem is that the page loads fine in all browsers apart from Internet Explorer, which pushes my whole html code down underneath the page. I have a jquery file included in the form (jquery-1.8.2.min.js) and I'm not sure if that is interfering with my html code or if it's a problem within the code itself that I havent specified correctly for Internet Explorer. I'm not sure also if it has something to do with the Mailchimp form. I've tried everything possible to fix this but nothing seems to work. If anyone could help with this or has any ideas I would really appreciate it. Please see my code and screenshots below. Thanks, Gary
Heres my code:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <meta
http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link
href="page1.css" rel="stylesheet" type="text/css" /> </form>
<script type="text/javascript" src="js/jquery-1.8.2.min.js">
</script>
</head>
<body> <div id="_wrapper">
<div id="_formsection">
<h1>Welcome</h1>
<p>Subscribe for a monthly discount code</p>
<!-- Begin MailChimp Signup Form-->
<div id="mc_embed_signup">
<form action="form_name_goes_here"
method="post" id="mc-embedded-subscribe-form"
name="mc-embedded-subscribe-form"
class="validate" target="_blank" novalidate />
<div class="mc-field-group">
<label for="mce-EMAIL">
<span class="asterisk"></span></label>
input type="email" value="Enter
your email address" name="EMAIL" class="required email"
id="mce-EMAIL" /> </div> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response"
style="display:none"></div> <div class="response"
id="mce-success-response" style="display:none"></div> </div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe"
id="mailsubmit" class="button"></div>
</form>
</div> <!--End mc_embed_signup-->
</div><!--end form section-->
<div id="grid_section">
<div class="section1">
<a href="">
<img src="images/section1_hydrogel.jpg"
alt="PowerBar HydroGel Image" />
<h4>PowerBar HydroGel Coming Soon</h4>
<p>Click here to register for updates</p></a>
</div>
<div class="section2">
<a href="">
<img src="images/section2_action_camera.jpg"
alt="Rollei Bullet HD Action Camera Image" />
<h4>Rollei Bullet HD Action Camera</h4>
<p>Get 20% off the Rollei Bullet HD and start recording your adventures</p></a>
</div>
<div class="section3">
<a href="">
<img src="images/section3_gp4000.jpg"
alt="GP4000S Tyre Sale Image" />
<h4>GP4000S Tyre Sale</h4>
<p>Was €51.99 but you can get it now for €39.99 with free delivery</p></a>
</div>
<div class="section4">
<a href="">
<img src="images/section4_streetracer.jpg"
alt="BMC Streetracer Image" />
<h4>BMC Streetracer for only €999.99</h4>
<p>Great new year offer for you to buy this quality manufactured Swiss frame for only
€999.99</p></a>
</div>
<div class="section5">
<a href="" target="_blank">
<img src="images/section5_facebook.jpg"
alt="Facebook Image" />
<h4>Discounts on Facebook</h4>
<p>We give out regular discounts on social media so follow us there to get the
updates</p></a>
</div>
<div class="section6">
<a href="">
<img src="images/section6_isoactive.jpg"
alt="Facebook Image" />
<h4>IsoActive Sports Drink</h4>
<p>This Isotonic Sports Drink for Maximum Hydration was €26.99 and you can get it now
for only €24.99</p></a>
</div>
</div><!--end grid section-->
</div><!--end wrapper--> </body>
</html>
Heres my CSS
#charset "UTF-8"; /* CSS Document */
body { font-family:"Helvetica Neue",Arial,Sans-serif; }
#_wrapper{ width: 620px;
overflow: hidden;
margin: 0 auto; }
/* ------------Form Section-------------- */
#_formsection{ width: 620px;
height: 350px;
margin: 0 auto;
background-image: url(images/background1.jpg);
background-repeat:no-repeat;}
#_formsection img{ margin: 10px 0 0 0;
float: left;
padding-left: 20px; }
#_formsection h1{ margin: 30px 0 0 0;
float: right;
font-size: 20px;
padding-right: 280px;
color: #FFF;
text-shadow: #666 2px 2px 1px; }
#_formsection p{ clear: both;
margin: 100px 0 10px 0;
float: left;
padding-left: 55px;
color: #FFF;
text-shadow: #666 2px 2px 1px;
display: inline; }
#mc_embed_signup{ clear: both;
float: left;
margin-right: 0px;
padding-left: 50px;
width: 290px; }
.mc-field-group{ width: 200px;
float: left;
overflow: hidden; }
input#mce-EMAIL{ width: 185px;
height: 25px;
font-size: 10px;
padding-left: 10px;
color: #999;
letter-spacing: -0.02em;
text-shadow: 0px 1px 0px #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#ffffff));
background: -moz-linear-gradient(top, #e1e1e1, #ffffff);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #CCC;
outline:none;
transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px; }
input#mce-EMAIL:focus {
box-shadow: 0 0 3px (255, 140, 0, 1);
-webkit-box-shadow: 0 0 3px rgba(255, 140, 0, 1);
-moz-box-shadow: 0 0 3px rgba(255, 140, 0, 1);
border:1px solid rgba(255,140,0, 0.8); }
#mailsubmit { color: #999;
border: 1px solid #CCC;
font-size: 10px;
letter-spacing: -0.02em;
text-shadow: 0px 1px 0px #fff;
outline: none;
background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), to(#ffffff));
background: -moz-linear-gradient(top, #e1e1e1, #ffffff);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 90px;
float: right;
height: 29px;
cursor: pointer; }
/* ------------End Form Section-------------- */
/* ------------Grid Section-------------- */
#grid_section{ clear: both;
width: 620px;
margin: 0 auto;
margin-top: 20px; }
.section1 { border: 1px solid #CCC;
float: left;
width: 200px;
height: 250px;
margin-right: 7px;
display:inline; }
.section1 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section1 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section1 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section1 a{ text-decoration: none;
color: #666; }
.section1 a:hover{ text-decoration: none; }
.section2 { border: 1px solid #CCC;
float: left;
width: 200px;
height: 250px;
margin-right: 7px;
display:inline; }
.section2 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section2 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section2 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section2 a{ text-decoration: none;
color: #666; }
.section2 a:hover{ text-decoration: none; }
.section3 { border: 1px solid #CCC;
float: right;
width: 200px;
height: 250px;
display:inline; }
.section3 img{
margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section3 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section3 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section3 a{ text-decoration: none;
color: #666; }
.section3 a:hover{ text-decoration: none; }
.section4 { border: 1px solid #CCC;
float: left;
width: 200px;
height: 250px;
margin: 7px 7px 0 0;
display:inline;
overflow: hidden; }
.section4 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section4 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section4 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section4 a{ text-decoration: none;
color: #666; }
.section4 a:hover{ text-decoration: none; }
.section5 { border: 1px solid #CCC;
float: left;
width: 200px;
height: 250px;
margin: 7px 7px 0 0;
display:inline;
overflow: hidden; }
.section5 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section5 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section5 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section5 a{ text-decoration: none;
color: #666; }
.section5 a:hover{ text-decoration: none; }
.section6 { border: 1px solid #CCC;
float: right;
width: 200px;
height: 250px;
margin: 7px 0 0 0;
display:inline;
overflow: hidden; }
.section6 img{ margin-top: 1px;
margin-left: 1px;
margin-right: 1px; }
.section6 h4{ margin-top: 5px;
margin-bottom: 0px;
margin-left: 5px;
color: #666;
font-size: 16px;
font-weight: bold; }
.section6 p{ margin-top: 5px;
margin-left: 5px;
color: #666;
font-size: 12px; }
.section6 a{ text-decoration: none;
color: #666; }
.section6 a:hover{ text-decoration: none; }
Not sure if it is how you pasted into stackoverflow or not, but you need to indent your content.
The days are mainly gone where you need to save that extra overhead for the filesize.
Using notepad++ would have helped you find this error pretty quickly, what file editor do you use?
Some elements are missiong from this code:
<div id="mc_embed_signup">
<form action="form_name_goes_here"
method="post" id="mc-embedded-subscribe-form"
name="mc-embedded-subscribe-form"
class="validate" target="_blank" novalidate />
<div class="mc-field-group">
<label for="mce-EMAIL">
<span class="asterisk"></span></label>
CLOSE THIS DIV ABOVE mc-field-group. ALSO FORM IS NOT CLOSED, BEST TO DOUBLE CHECK SIGN-UP FORM CODE
</div><!--end form section-->