I'm trying to get my checkbox inline with the text using display:block and display:inline. When I use this the checkbox disappear and don't show the full size.
I have tried to read and find other ways to solve this but I'm stuck.
Is there any other way to get the checkbox in same line as the text?
Please help a student :)
grid_newsletter {
background: #ffeb3a;
}
.grid_newsletter .text {
text-align: center;
font-size: 24px;
font-weight: 600;
margin-bottom: 41px;
}
.grid_newsletter input {
width: 380px;
border-top: transparent;
border-left: transparent;
border-right: transparent;
margin-left: 20px;
border-bottom: 2px solid black;
padding-left: 0px;
}
.grid_newsletter input[type="checkbox"] {
width: 22px;
height: 22px;
border: 2px solid black;
text-align: center;
display: inline;
}
.grid_newsletter .checkbox_terms {
margin-top: 23px;
display: block;
}
.grid_newsletter .content {
text-align: center;
padding: 70px 55px 30px 60px;
display: inline;
}
.grid_newsletter .text_box_newsletter {
background: white;
width: 495px;
height: 90px;
text-align: center;
margin-top: 27px;
margin-left: auto;
margin-right: auto;
}
.grid_newsletter .text_box_newsletter p {
padding-top: 39px;
padding-bottom: 35px;
text-align: center;
font-weight: 600;
font-size: 18px;
letter-spacing: 0.100em;
}
<div class="grid_newsletter">
<div class="content">
<div class="text">Newsletter!</div>
<form>
<input type="text" name="firstname" placeholder="förnamn">
<input type="email" name="email" placeholder="e-post">
</form>
<div class="checkbox_terms">
<input type="checkbox" name="confirm">
<span class="save">Jag godkänner att mina uppgifter lagras.</span>
<span class="terms">Läs mer om vår hantering av data och vår integritetspolicy här.</span>
</div> <!-- checkbox_terms -->
<div class="text_box_newsletter">
<p>skicka</p>
</div>
</div> <!-- content -->
</div> <!-- grid_newsletter -->
`
You can use display: inline-block or display: inline together with vertical-align: middle on the involved elements.
grid_newsletter {
background: #ffeb3a;
}
.grid_newsletter .text {
text-align: center;
font-size: 24px;
font-weight: 600;
margin-bottom: 41px;
}
.grid_newsletter input {
width: 380px;
border-top: transparent;
border-left: transparent;
border-right: transparent;
margin-left: 20px;
border-bottom: 2px solid black;
padding-left: 0px;
}
.grid_newsletter input[type="checkbox"] {
width: 22px;
height: 22px;
border: 2px solid black;
text-align: center;
display: inline;
}
.grid_newsletter .checkbox_terms {
margin-top: 23px;
display: block;
}
.grid_newsletter .content {
text-align: center;
padding: 70px 55px 30px 60px;
display: inline;
}
.grid_newsletter .text_box_newsletter {
background: white;
width: 495px;
height: 90px;
text-align: center;
margin-top: 27px;
margin-left: auto;
margin-right: auto;
}
.grid_newsletter .text_box_newsletter p {
padding-top: 39px;
padding-bottom: 35px;
text-align: center;
font-weight: 600;
font-size: 18px;
letter-spacing: 0.100em;
}
.vAlign {
display: inline-block;
vertical-align: middle;
}
<div class="grid_newsletter">
<div class="content">
<div class="text">Newsletter!</div>
<form>
<input type="text" name="firstname" placeholder="förnamn">
<input type="email" name="email" placeholder="e-post">
</form>
<div class="checkbox_terms">
<input type="checkbox" name="confirm" class="vAlign">
<span class="save vAlign">Jag godkänner att mina uppgifter lagras.</span>
<span class="terms vAlign">Läs mer om vår hantering av data och vår integritetspolicy här.</span>
</div> <!-- checkbox_terms -->
<div class="text_box_newsletter">
<p>skicka</p>
</div>
</div> <!-- content -->
</div> <!-- grid_newsletter -->
When You use the display block you have to give it a width and height and float left so it will act line inline for that part.
You can also use the height according to your need .
I hope this is what you were looking for .
grid_newsletter {
background: #ffeb3a;
}
.grid_newsletter .text {
text-align: center;
font-size: 24px;
font-weight: 600;
margin-bottom: 41px;
}
.grid_newsletter input {
width: 380px;
border-top: transparent;
border-left: transparent;
border-right: transparent;
margin-left: 20px;
border-bottom: 2px solid black;
padding-left: 0px;
}
.grid_newsletter input[type="checkbox"] {
border: 2px solid black;
text-align: center;
display: block;
width: 20px;
height:15px;
float: left;
}
.grid_newsletter .checkbox_terms {
margin-top: 23px;
display: block;
}
.grid_newsletter .content {
text-align: center;
padding: 70px 55px 30px 60px;
display: inline;
}
.grid_newsletter .text_box_newsletter {
background: white;
width: 495px;
height: 90px;
text-align: center;
margin-top: 27px;
margin-left: auto;
margin-right: auto;
}
.grid_newsletter .text_box_newsletter p {
padding-top: 39px;
padding-bottom: 35px;
text-align: center;
font-weight: 600;
font-size: 18px;
letter-spacing: 0.100em;
}
<div class="grid_newsletter">
<div class="content">
<div class="text">Newsletter!</div>
<form>
<input type="text" name="firstname" placeholder="förnamn">
<input type="email" name="email" placeholder="e-post">
</form>
<div class="checkbox_terms">
<input type="checkbox" name="confirm">
<span class="save">Jag godkänner att mina uppgifter lagras.</span>
<span class="terms">Läs mer om vår hantering av data och vår integritetspolicy här.</span>
</div> <!-- checkbox_terms -->
<div class="text_box_newsletter">
<p>skicka</p>
</div>
</div> <!-- content -->
</div> <!-- grid_newsletter -->
use vertical-align:middle as shown below for textbox:
.grid_newsletter input[type="checkbox"] {
width: 22px;
height: 22px;
border: 2px solid black;
text-align: center;
display: inline;
vertical-align: middle;/*Newly added*/
}
Related
I'm creating this interface for a travel website and I'm aligning two inputs side-by-side and they aren't aligning properly. I am most concerned with the Departure and Return inputs. The Return input and label are not aligning with the departure input and label.
Can someone checkout my code and suggest a solution. It's probably my vision, but if you can help me out, I'd appreciate it a bunch.
#container {
width: 400px;
height: 400px;
background-color: black;
float: left;
}
#menu {
background-color: black;
clear: both;
}
#flights {
font-family: helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
width: 100px;
height: 50px;
color: white;
background-color: black;
float: left;
line-height: 50px;
text-align: center;
}
#flights:hover {
cursor: pointer;
background-color: gold;
color: black;
}
#hotels {
font-family: helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
width: 100px;
height: 50px;
color: white;
background-color: black;
float: left;
line-height: 50px;
text-align: center;
}
#hotels:hover {
cursor: pointer;
background-color: gold;
color: black;
}
#cars {
font-family: helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
width: 100px;
height: 50px;
color: white;
background-color: black;
float: left;
line-height: 50px;
text-align: center;
}
#cars:hover {
cursor: pointer;
background-color: gold;
color: black;
}
#bundle {
font-family: helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
width: 100px;
height: 50px;
color: white;
background-color: black;
float: left;
line-height: 50px;
text-align: center;
}
#bundle:hover {
cursor: pointer;
background-color: gold;
color: black;
}
#flights-data {
font-family: helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
width: 400px;
height: 400px;
float: left;
margin-top: 0;
background-color: gold;
padding: 10px;
}
label {
width: 180px;
height: '';
float: left;
margin: 0;
padding: 0;
}
input#flight-departure {
display: inline-block;
width: 48%;
height: 50px;
padding: 10px;
float: left;
margin-right: 10px;
margin-top: 0;
display: block;
margin-bottom: 5px;
}
input#flight-return {
display: inline;
width: 48%;
height: 50px;
padding: 10px;
float: left;
margin-right: 0px;
margin-top: 0;
margin-bottom: 5px;
}
input#fly-from,
input#fly-to,
input#passengers {
display: block;
width: 380px;
height: 50px;
margin-bottom: 5px;
padding: 10px;
}
#depart-block {
column-count: 2;
column-gap: 10px;
width: 385px;
height: 100px;
padding: 0;
margin: 0;
float: left;
}
#find-a-flight {
width: 380px;
height: 50px;
line-height: 50px;
background-color: black;
color: white;
border-radius: 30px;
text-align: center;
margin-top: 10px;
}
#find-a-flight:hover {
cursor: pointer;
background-color: white;
border: 2px solid black;
color: black;
}
label#return {
margin: 0;
}
div.active#flights {
background-color: gold;
color: black;
}
<div id="container">
<div id="menu">
<div class="active" id="flights">Flights</div>
<div id="hotels">Hotels</div>
<div id="cars">Cars</div>
<div id="bundle">Bundle</div>
</div>
<div id="flights-data">
<label for="fly-from">Flying from</label><br>
<input type="text" id="fly-from" value="Departure city or Airport">
<label for="fly-to">Flying to</label><br>
<input type="text" id="fly-to" value="Departure city or Airport"><br>
<div id="departing-block">
<label for="Departure">Departing Flight</label><br>
<input type="text" id="flight-departure" value="Pick-a-date">
<label id="return" for="Return">Returning</label><br>
<input type="text" id="flight-return" value="Pick-a-date">
</div>
<label for="passengers">Passengers</label><br>
<input type="text" id="passengers" value="1 Adult 0 Children">
<div id="find-a-flight">Find a Flight</div>
</div>
Do the following change in <div id="flights-data">:
<label for="fly-from">Flying from</label><br>
<input type="text" id="fly-from" value="Departure city or Airport">
<label for="fly-to">Flying to</label><br>
<input type="text" id="fly-to" value="Departure city or Airport"><br>
<div id="departing-block">
<div style="display: inline-block;">
<label for="Departure">Departing Flight</label><br>
<input type="text" id="flight-departure" value="Pick-a-date">
</div>
<div style="display: inline-block;">
<label id="return" for="Return">Returning</label><br>
<input type="text" id="flight-return" value="Pick-a-date">
</div>
</div>
<label for="passengers">Passengers</label><br>
<input type="text" id="passengers" value="1 Adult 0 Children">
<div id="find-a-flight">Find a Flight</div>
</div>
this will align both the inputs side-by-side properly. I have checked it.
I have the image formated how I want, I just can't get it to float to the top so it looks nice next to the form I made. I have tried making a div and having that float up to no avail. Help?
header {
background-color: #030303;
color: #ffffff;
height: 60px;
text-align: left;
padding-top: 30px;
padding-left: 3em;
background-image: url("assets/dndlogo.jpg");
background-repeat: no-repeat;
background-position: right;
}
#dndlogo {
float: right;
height: 50px;
}
header h1 {
font-family: Georgia, "Times New Roman", Serif;
margin-top: 0px;
font-size: 3em;
letter-spacing: 0.25em;
}
#schedulebox {
float: left;
height: 750px;
width: 15%;
float: left;
background-color: #bd0202;
text-align: center;
}
#homecontent {
height: 750px;
width: 84.3%;
float: left;
background-color: #030303;
color: white;
}
nav {
overflow: hidden;
background-color: #030303;
font-family: Arial;
float: top;
margin: 0;
padding: 0;
border-radius: 10px;
}
nav li {
float: left;
font-size: 20px;
color: black;
text-align: center;
padding: 15px 20px;
text-decoration: none;
list-style-type: none;
color: white;
height: 15px;
}
/*nav li:hover{
background-color: white;
border-radius: 15px;
transition: 0.5s;
color: black;
}*/
nav ul {
margin: 0;
padding-bottom: 10px;
padding-left: 0;
}
footer {
background-color: #030303;
float: bottom;
color: white;
}
#schedulebox h1 {
border-bottom: solid;
padding-top: 0;
margin: 0;
}
html {
background-color: #030303;
}
button {
background-color: #030303;
border: none;
color: white;
font-size: 20px;
height: 27px;
}
button:hover {
background-color: white;
color: #030303;
border-radius: 5px;
transition: 0.5s;
}
main {
border: white solid;
border-radius: 10px;
order-radius: 10px;
}
#wrapper {
padding: 20px;
}
#schedulebox {
border-right: white solid;
}
#dragonpic {
width: 1556.5px;
height: auto;
}
#homecontent2 {
border: solid white;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
#homecontent h2,
#homecontent h3 {
padding-left: 10px;
}
#resourcescontent {
color: white;
padding-left: 10px;
}
a img:visited {
border: black;
}
a img:hover {
border: white solid;
border-width: thin;
transition: 0.3s;
}
a.button {
-webkit-appearance: button;
-moz-appearance: button;
border: none;
color: white;
text-decoration: none;
height: 20px;
padding: 5px;
font-size: 20px;
}
a.button:hover {
background-color: white;
color: #030303;
transition: 0.3s;
border-radius: 5px;
}
#beyondlogo {
margin-left: auto;
margin-right: auto;
width: 50%;
display: block;
border-radius: 10px;
}
#resourcescontent p,
#resourcescontent h2 {
text-align: center;
}
form {
color: white;
}
label {
float: left;
display: block;
text-align: right;
width: 120px;
padding-right: 1em;
}
input,
textarea {
display: block;
margin-bottom: 20px;
}
#joiningcontent h2 {
color: white;
padding-left: 20px;
width: 20%;
text-align: center;
}
#joiningpic {
margin-left: auto;
margin-bottom: auto;
width: 50%;
display: block;
border-radius: 10px;
}
#joiningcontent {}
<div id="wrapper">
<header>
<h1>Dungeons and Dragons: WCTC</h1>
</header>
<main class="clearfix">
<nav>
<ul>
<li>Home</li>
<li>Resources</li>
<li>Join Us!</li>
</ul>
</nav>
<div id="joiningcontent">
<h2>If you wish to join, provide us with some information so we can contact you!</h2>
<form>
<label for="FirstName">First Name:</label>
<input type="text" id="FirstName" name="FName" required>
<label for="LastName">Last Name:</label>
<input type="text" id="LastName" name="LName" required>
<label for="emailboi">Email:</label>
<input type="email" id="emailboi" name="Email" required>
<label for="GuestOrMember">Are you signing up as a Guest?</label>
<input id="GuestOrMember" type="checkbox">
<button type="submit" value="submit">Submit</button>
</form>
<img src="assets/signuppic.png" id="joiningpic">
</div>
</main>
</div>
I'm still a little lost on what to do and I'm fairly new to web development so I appologize for any ameteur mistakes made.
For both the img and the form you need to:
float: left;
display: inline;
This is due to the form being a block level element so you need to float both left and set them to be inline, rather than block. If you put img before form then it will be on the left of the form, put it after the form and it will be on the right of the form.
Be aware that if the image and form do not fit within the width of the browser window then they will wrap and one will be below the other, whichever way round you have them.
https://jsfiddle.net/bryanwadd/o1da8buw/
For correct working float, the floated element should be the first. Just move img as a first element in parent, like this:
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="style.css" type="text/css">
<head>
<meta charset="UTF-8">
<title>Sign Up</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>Dungeons and Dragons: WCTC</h1>
</header>
<main class="clearfix">
<nav><ul><li>Home</li> <li>Resources</li> <li>Join Us!</li></ul></nav>
<div id="joiningcontent">
<img src="assets/signuppic.png" id="joiningpic">
<h2>If you wish to join, provide us with some information so we can contact you!</h2>
<form>
<label for="FirstName">First Name:</label>
<input type="text" id="FirstName" name="FName" required>
<label for="LastName">Last Name:</label>
<input type="text" id="LastName" name="LName" required>
<label for="emailboi">Email:</label>
<input type="email" id="emailboi" name="Email" required>
<label for="GuestOrMember">Are you signing up as a Guest?</label>
<input id="GuestOrMember" type="checkbox">
<button type="submit" value="submit">Submit</button>
</form>
</div>
</main>
</div>
</body>
</html>
UPDATED2
header{
background-color: #030303;
color:#ffffff;
height: 60px;
text-align: left;
padding-top: 30px;
padding-left: 3em;
background-image: url("assets/dndlogo.jpg");
background-repeat: no-repeat;
background-position: right;
}
#dndlogo{
float: right;
height: 50px;
}
header h1{
font-family: Georgia, "Times New Roman", Serif;
margin-top: 0px;
font-size: 3em;
letter-spacing: 0.25em;
}
#schedulebox{
float: left;
height: 750px;
width: 15%;
float: left;
background-color: #bd0202;
text-align: center;
}
#homecontent{
height: 750px;
width: 84.3%;
float: left;
background-color: #030303;
color: white;
}
nav {
overflow: hidden;
background-color: #030303;
font-family: Arial;
float: top;
margin: 0;
padding: 0;
border-radius: 10px;
}
nav li{
float: left;
font-size: 20px;
color: black;
text-align: center;
padding: 15px 20px;
text-decoration: none;
list-style-type: none;
color: white;
height: 15px;
}
/*nav li:hover{
background-color: white;
border-radius: 15px;
transition: 0.5s;
color: black;
}*/
nav ul{
margin: 0;
padding-bottom: 10px;
padding-left: 0;
}
footer{
background-color: #030303;
float: bottom;
color: white;
}
#schedulebox h1{
border-bottom: solid;
padding-top: 0;
margin: 0;
}
html{
background-color: #030303;
}
button{
background-color: #030303;
border: none;
color: white;
font-size: 20px;
height: 27px;
}
button:hover{
background-color: white;
color: #030303;
border-radius: 5px;
transition: 0.5s;
}
main{
border: white solid;
border-radius: 10px;
order-radius: 10px;
}
#wrapper{
padding: 20px;
}
#schedulebox{
border-right: white solid;
}
#dragonpic{
width: 1556.5px;
height: auto;
}
#homecontent2{
border: solid white;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
#homecontent h2, #homecontent h3{
padding-left: 10px;
}
#resourcescontent{
color: white;
padding-left: 10px;
}
a img:visited{
border: black;
}
a img:hover{
border: white solid;
border-width: thin;
transition: 0.3s;
}
a.button {
-webkit-appearance: button;
-moz-appearance: button;
border: none;
color: white;
text-decoration: none;
height: 20px;
padding: 5px;
font-size: 20px;
}
a.button:hover{
background-color: white;
color: #030303;
transition: 0.3s;
border-radius: 5px;
}
#beyondlogo{
margin-left: auto;
margin-right: auto;
width: 50%;
display: block;
border-radius: 10px;
}
#resourcescontent p, #resourcescontent h2{
text-align: center;
}
form{
color: white;
display: inline-block;
vertical-align: top;
max-width: 40%;
box-sizing: border-box;
}
label{
float: left;
display: block;
text-align: right;
width: 120px;
padding-right: 1em;
}
input, textarea{
display: block;
margin-bottom: 20px;
}
#joiningcontent h2{
color: white;
padding-left: 20px;
width: 20%;
text-align: center;
}
#joiningpic{
margin-left: auto;
margin-bottom: auto;
width: 50%;
border-radius: 10px;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
}
#joiningcontent{
}
<div id="wrapper">
<header>
<h1>Dungeons and Dragons: WCTC</h1>
</header>
<main class="clearfix">
<nav><ul><li>Home</li> <li>Resources</li> <li>Join Us!</li></ul></nav>
<div id="joiningcontent">
<h2>If you wish to join, provide us with some information so we can contact you!</h2>
<form>
<label for="FirstName">First Name:</label>
<input type="text" id="FirstName" name="FName" required>
<label for="LastName">Last Name:</label>
<input type="text" id="LastName" name="LName" required>
<label for="emailboi">Email:</label>
<input type="email" id="emailboi" name="Email" required>
<label for="GuestOrMember">Are you signing up as a Guest?</label>
<input id="GuestOrMember" type="checkbox">
<button type="submit" value="submit">Submit</button>
</form>
<img src="assets/signuppic.png" id="joiningpic">
</div>
</main>
</div>
I'm trying to place the logo and the form on the same line but can't because the span that containing the logo is spanning the whole line. How do I make it the same size as its content?
header {
text-align: right;
background-color: #333333;
border-bottom-width: 1px;
}
.clear {
display: inline;
margin-left: 5px;
}
.LogoHeader {
height: 25%;
width: 25%;
border-spacing: 20px;
vertical-align: middle;
margin-left: 47px;
}
.SearchForm {
display: inline;
padding: 10px 0px;
}
.SearchField {
display: inline;
border: none;
margin: 0;
line-height: 20px;
object-position: right;
margin: 0px 10px white;
}
.SearchButton {
display: inline;
background-color: deeppink;
border-style: none;
line-height: 20px;
}
<header>
<span style="position:relative;float: right; clear: right; width: 100%;"><img class="LogoHeader" src="C:\Users\David\Desktop\WebDevelopmentTest\images\NotWalla\logo.svg" alt="My news website"></span>
<div style="position: relative; vertical-align: middle; right: 50%; display: inline-block; height: -50%">
<form class="SearchForm">
<input class="SearchButton" type="submit" value="Search"><input class="SearchField" type="text" name="q" value autocomplete="off">
</form>
</div>
</header>
You can remove the width: 100%; from span styles.
Well... After some messing around I was able to figure it out!
You can't really see it in the code below but it definitely works.
Thank you all for the help.
header {
text-align: right;
background-color: #333333;
border-bottom-width: 1px;
}
.clear {
display: inline;
min-height: 28px;
}
.LogoHeader {
width: 100%;
height: 100%
}
.SearchForm {
display: inline;
padding: 10px 0px;
margin-right: 10px;
}
.SearchField {
border: none;
line-height: 30px;
margin: 0px 10px white;
direction: rtl;
}
.SearchButton {
background-color: deeppink;
border-style: none;
line-height: 30px;
<header style=" border-bottom: 20px solid #333; border-top: 20px solid #333;">
<div style=" width: 100%; float: right; clear: both; max-width: 303px; margin-right: 10px; transform: translateY(-6px)">
<img class="LogoHeader" src="C:\Users\David\Desktop\WebDevelopmentTest\images\NotWalla\logo.svg" alt="My news website">
</div>
<form class="SearchForm">
<input class="SearchButton" type="submit" value="Search"><input class="SearchField" type="text" name="q" value autocomplete="off">
</form>
</header>
I'm trying to do here is give my username div a margin-top:10%;
simple as that.
Here is an example of what it currently looks like live as you can see my username area is jammed right at the top of my content div.
All I wanted is to budge it down a tad. Any ideas on why or how to fix this?
CODE
input {
outline: none;
}
body {
font-family: sans-serif;
background-color: #222222;
}
#header {
color: #fff;
font-size: 25px;
text-align: center;
}
#content {
width: 60%;
height: 250px;
background-color: #303640;
margin-left: 20%;
}
#username {
width: 80%;
height: 40px;
background-color: #373e49;
margin-top: 10%;
margin-left: 10%;
border: 1px solid #373e49;
border-radius: 5px;
}
#usernameIcon {
width: 12%;
float: left;
margin-top: 10px;
}
.usernameIcon {
width: 20px;
height: 20px;
}
#usernameTextbox {
width: 88%;
float: right;
margin-top: 10px;
}
.tbUsername {
background-color: #373e49;
border-left: 2px solid #434a54;
border-right: none;
border-top: none;
border-bottom: none;
padding-left: 10px;
color: #fff;
}
<div id="header">
<p>Welcome</p>
</div>
<div id="content">
<form method="post" action="index.php">
<div id="username">
<div id="usernameIcon">
<img src="IMAGES/UsernameIcon.svg" class="usernameIcon">
</div>
<div id="usernameTextbox">
<input type="text" name="username" class="tbUsername" placeholder="Username">
</div>
</div>
<div id="password">
</div>
<div id="btnLogin">
</div>
</form>
</div>
set a padding-top:1px in your #content
input {
outline: none;
}
body {
font-family: sans-serif;
background-color: #222222;
}
#header {
color: #fff;
font-size: 25px;
text-align: center;
}
#content {
width: 60%;
height: 250px;
background-color: #303640;
margin-left: 20%;
padding-top:1px /* NEW */
}
#username {
width: 80%;
height: 40px;
background-color: #373e49;
margin-top: 10%;
margin-left: 10%;
border: 1px solid #373e49;
border-radius: 5px;
}
#usernameIcon {
width: 12%;
float: left;
margin-top: 10px;
}
.usernameIcon {
width: 20px;
height: 20px;
}
#usernameTextbox {
width: 88%;
float: right;
margin-top: 10px;
}
.tbUsername {
background-color: #373e49;
border-left: 2px solid #434a54;
border-right: none;
border-top: none;
border-bottom: none;
padding-left: 10px;
color: #fff;
}
<div id="header">
<p>Welcome</p>
</div>
<div id="content">
<form method="post" action="index.php">
<div id="username">
<div id="usernameIcon">
<img src="IMAGES/UsernameIcon.svg" class="usernameIcon">
</div>
<div id="usernameTextbox">
<input type="text" name="username" class="tbUsername" placeholder="Username">
</div>
</div>
<div id="password">
</div>
<div id="btnLogin">
</div>
</form>
</div>
try changing the position to absolute. That´s simple, put it on the element that has the margin-top:10%; you´ll see it works!
would you have any idea why my red alert message is split into 2 blocks? I'd like it to be one block under the main message field. See http://jsfiddle.net/z4Lg4/
Many thanks
HTML
<div id="contactwrapper">
<div class="block clear">
<div class="block-left">
<h1>Nous contacter</h1>
<div id="addressbox">
<h3>CENTRE DE dfd</h3>
<p>3, rdsfr</p>
<p> L5341 dfsf (Luxembourg)</p>
<ul id="contact">
<li><i class="icon-phone-sign blue"></i> +352 691 123.456</li>
<li><i class="icon-envelope blue"> </i>contact#dfdsf.lu</li>
<li><i class="icon-map-marker blue"></i> Plan d'accès</li>
</ul>
</div> <!-- End DIV addressbox -->
</div> <!-- End DIV block-left -->
<div class="block-right"> <h1>Formulaire de contact</h1>
<!-- CONTACT FORM-->
<div class="contact-form">
<form id="contactfrm" method="post" class="clearfix">
<div class="clearfix">
<input id="name" name="name" placeholder="Nom" type="text" value="">
<input id="email" name="email" placeholder="Email" type="email" value="">
</div>
<textarea id="message" name="message" placeholder="Message et coordonnées"></textarea>
<input type="submit" value="Envoyer" name="submit">
<p class="success" style="display:none">Votre message a bien été envoyé! Merci</p>
<p class="error" style="display:none;">E-mail not valid et/ou message vide</p>
</form>
</div><!-- /.contact-form -->
</div> <!-- End DIV block-right -->
</div> <!-- End DIV Block -->
</div> <!-- End DIV Contactwrapper -->
CSS
#contactwrapper {
margin-top: 30px;
padding-bottom: 30px;
position: relative;
display: block;
margin-right: auto;
margin-left: auto;
width: 980px;
background: #fff;
-webkit-box-shadow: 0px 0px 10px 2px #e0e0e0;
-moz-box-shadow: 0px 0px 10px 2px #e0e0e0;
box-shadow: 0px 0px 10px 2px #e0e0e0;
}
.block-left {
float: left;
box-sizing: border-box;
width: 50%;
padding-right: 20px;
}
.block-right {
float: right;
box-sizing: border-box;
width: 50%;
overflow: hidden;
}
.block {
display: block;
margin-right: auto;
margin-left: auto;
clear: both;
box-sizing: border-box;
padding-left: 20px;
padding-right: 20px;
width: 100%;
overflow: hidden;
}
.contact-form input[type=text] {
float: left;
width: 200px;
}
.contact-form input[type=email] {
float: right;
width: 200px;
}
.contact-form input[type=submit] {
float: right;
}
.contact-form textarea {
float: left;
height: 70px;
margin-bottom: 10px;
margin-top: 20px;
width: 100%;
}
/*************************************************************
/*************************************************************
* FORMS
*************************************************************/
form label { cursor: pointer }
form textarea,
form input[type=text],
form input[type=password],
form input[type=email] {
background: #d5d5d5 url('../images/form-bg.png') left top repeat-x;
border-top: 1px solid transparent;
border-right: 1px solid #d2d2d2;
border-bottom: 1px solid transparent;
border-left: 1px solid #d2d2d2;
color: #7c7c7c;
font-family: 'Arial', sans-serif;
padding: 6px 8px;
resize: none;
}
form input:focus,
form textarea:focus {
background: #d5d5d5 none;
border: 1px solid red;
outline: none;
}
form input[type=submit] {
background: #0064C4 url('../images/form-caret.png') right center no-repeat;
border: 0;
color: #fff;
cursor: pointer;
font-family: 'Arial', sans-serif;
font-size: 14px;
font-weight: normal;
padding: 8px 50px;
text-transform: uppercase;
}
.success
{
display:none;
display: block;
margin: auto;
width: 100%;
overflow: hidden;
text-align:center;
font-size: 14px;
font-weight: 600;
color: #fff;
letter-spacing: 1px;
padding-top: 3px;
padding-bottom: 3px;
background: #99CB97;
}
.error
{
display:none;
display: block;
background:#EF6666;
display:inline;
padding: 3px 10px 3px 10px;
top: 10px;
}
check the js fiddle
http://jsfiddle.net/z4Lg4/
.error
{
display:none;
display: block;
background:#EF6666;
display:inline;
top: 72px;
position:absolute;
}
made the changes:
css:
.error
{
display:none;
display: block;
background:#EF6666;
display:inline;
top: 100px;
margin-left:35px;
position:absolute;
}
Fiddle